Frontend | Вопросы собесов
Сайт easyoffer.ru Реклама @easyoffer_adv ВП @easyoffer_vp Тесты t.me/+T0COHtFzCJkwMDUy Задачи t.me/+_tcX2w2EmvdmMTgy Вакансии t.me/+CgCAzIyGHHg0Nzky
Ko'proq ko'rsatish📈 Telegram kanali Frontend | Вопросы собесов analitikasi
Frontend | Вопросы собесов (@easy_javascript_ru) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 18 272 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 7 328-o'rinni va Rossiya mintaqasida 36 922-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 18 272 obunachiga ega bo‘ldi.
18 Iyun, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -130 ga, so‘nggi 24 soatda esa -5 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya o‘rtacha 9.76% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 5.46% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 1 783 marta ko‘riladi; birinchi sutkada odatda 997 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 9 ta reaksiya keladi.
- Tematik yo‘nalishlar: Kontent ставь, браузер, html, border, flex kabi asosiy mavzularga jamlangan.
📝 Tavsif va kontent siyosati
Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Сайт easyoffer.ru
Реклама @easyoffer_adv
ВП @easyoffer_vp
Тесты t.me/+T0COHtFzCJkwMDUy
Задачи t.me/+_tcX2w2EmvdmMTgy
Вакансии t.me/+CgCAzIyGHHg0Nzky”
Yuqori yangilanish chastotasi (oxirgi ma’lumot 19 Iyun, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Texnologiyalar & Aralashmalar toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.
div, h1, p, ::before, ::after): вес 1.
✅Классы, атрибуты и псевдоклассы (.class, [type="text"], :hover, :nth-child): вес 10.
✅Идентификаторы (#id): вес 100.
✅Инлайновые стили (стили, заданные непосредственно в элементе с атрибутом style): вес 1000.
✅Важные правила (!important): не учитывают специфичность, а просто переопределяют другие правила.
2️⃣Правила вычисления специфичности:
Специфичность CSS выражается в виде чисел (a, b, c, d), где:
✅a — количество инлайновых стилей (1 или 0).
✅b — количество идентификаторов.
✅c — количество классов, атрибутов и псевдоклассов.
✅d — количество элементов и псевдоэлементов.
Примеры расчета специфичности
1️⃣Элементы и псевдоэлементы:
div { color: red; } /* Специфичность: 0, 0, 0, 1 */
p::before { content: ''; } /* Специфичность: 0, 0, 0, 2 */
2️⃣Классы, атрибуты и псевдоклассы:
.example { color: blue; } /* Специфичность: 0, 0, 1, 0 */
[type="text"] { color: green; } /* Специфичность: 0, 0, 1, 0 */
:hover { color: yellow; } /* Специфичность: 0, 0, 1, 0 */
3️⃣Идентификаторы:
#unique { color: orange; } /* Специфичность: 0, 1, 0, 0 */
4️⃣Инлайновые стили:
<div style="color: purple;"></div> <!-- Специфичность: 1, 0, 0, 0 -->
5️⃣Комбинированные селекторы:
#unique .example:hover { color: pink; } /* Специфичность: 0, 1, 1, 1 */
Если два или более правил CSS применяются к одному и тому же элементу, приоритет будет у правила с наибольшей специфичностью.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Specificity Example</title>
<style>
p { color: red; } /* Специфичность: 0, 0, 0, 1 */
.text { color: green; } /* Специфичность: 0, 0, 1, 0 */
#unique { color: blue; } /* Специфичность: 0, 1, 0, 0 */
.text#unique { color: orange; } /* Специфичность: 0, 1, 1, 0 */
</style>
</head>
<body>
<p class="text" id="unique">This is a paragraph.</p>
</body>
</html>
В этом примере, текст параграфа будет оранжевого цвета, так как правило .text#unique имеет наибольшую специфичность (0, 1, 1, 0).
Использование !important
Правила с ним имеют наивысший приоритет и могут переопределить даже те стили, которые имеют более высокую специфичность. Тем не менее, злоупотребление !important может затруднить управление стилями и отладку.
p { color: red !important; } /* Перебивает все другие правила */
Специфичность пределяет приоритет применяемых стилей на основе типов селекторов и их веса. Она используется браузером для разрешения конфликтов между различными правилами CSS, чтобы определить, какие стили применяются к элементу.
🔥 ТОП ВОПРОСОВ С СОБЕСОВ
🔒 База собесов | 🔒 База тестовыхPromise.all возвращает новый промис, который:
✅Завершается успешно, когда все промисы в массиве выполнены.
✅Отклоняется, если любой из промисов в массиве отклоняется.
3️⃣Сбор результатов:
Когда все промисы успешно выполнены, результирующий промис разрешается массивом результатов всех переданных промисов.
Синтаксис
Promise.all(iterable);
✅iterable: массив или любой итерируемый объект, элементы которого являются промисами или значениями.
Рассмотрим пример, где мы запускаем несколько асинхронных операций одновременно и ждем их завершения.
const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 200, 'Second'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 300, 'Third'));
Promise.all([promise1, promise2, promise3])
.then((results) => {
console.log(results); // ['First', 'Second', 'Third']
})
.catch((error) => {
console.error('One of the promises failed:', error);
});
Если один из промисов отклоняется, Promise.all отклоняет весь результат.
const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 200, 'Error in Second'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 300, 'Third'));
Promise.all([promise1, promise2, promise3])
.then((results) => {
console.log(results); // This line will not be executed
})
.catch((error) => {
console.error('One of the promises failed:', error); // 'Error in Second'
});
Promise.all также можно использовать с async/await для более удобной работы с асинхронным кодом.
const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 200, 'Second'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 300, 'Third'));
async function runPromises() {
try {
const results = await Promise.all([promise1, promise2, promise3]);
console.log(results); // ['First', 'Second', 'Third']
} catch (error) {
console.error('One of the promises failed:', error);
}
}
runPromises();
Promise.all используется для выполнения нескольких асинхронных операций параллельно и возвращает один промис, который разрешается массивом результатов, если все промисы выполнены успешно, или отклоняется, если любой из промисов отклоняется. Это полезно для управления несколькими асинхронными задачами одновременно.
🔥 ТОП ВОПРОСОВ С СОБЕСОВ
🔒 База собесов | 🔒 База тестовыхimport React, { useEffect, useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('useEffect: Выполняется после рендеринга');
document.title = `Вы нажали ${count} раз`;
return () => {
console.log('useEffect: Очистка');
};
}, [count]);
return (
<div>
<p>Вы нажали {count} раз</p>
<button onClick={() => setCount(count + 1)}>Нажми меня</button>
</div>
);
}
export default Example;
useLayoutEffect
✅Когда выполняется:
Выполняется синхронно после всех мутировавших эффектов DOM, но перед тем, как браузер обновит экран. Это означает, что изменения, сделанные в useLayoutEffect, будут видны пользователю до того, как браузер нарисует обновленный интерфейс.
✅Основное использование:
Используется для выполнения побочных эффектов, которые должны произойти до отрисовки интерфейса, таких как измерение размеров DOM-элементов, выполнение синхронных изменений в DOM, которые должны произойти перед отрисовкой, или выполнение операций, которые блокируют отрисовку.
✅Поведение:
Блокирует отрисовку до тех пор, пока эффект не будет выполнен. Это может привести к задержке в отображении интерфейса, если эффект выполняется долго.
Пример:
import React, { useLayoutEffect, useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
useLayoutEffect(() => {
console.log('useLayoutEffect: Выполняется после рендеринга, но перед отрисовкой');
document.title =раз</p>
<button onCl
return () => {
console.log('useLayoutEffect: Очистка');
};
}, [count]);
return (
<div>
<p>Вы нажали {count} раз</p>
<button onClick={() => setCount(count + 1)}>Нажми меня</button>
</div>
);
}
export default Example;
Основные различия
1️⃣Время выполнения:
✅useEffect выполняется асинхронно после того, как браузер обновил экран.
✅useLayoutEffect выполняется синхронно перед тем, как браузер обновит экран.
2️⃣Использование:
✅useEffect лучше подходит для побочных эффектов, которые не влияют на компоновку и отрисовку интерфейса.
✅useLayoutEffect лучше подходит для побочных эффектов, которые должны быть выполнены перед отрисовкой, таких как измерение или изменения в DOM.
🔥 ТОП ВОПРОСОВ С СОБЕСОВ
🔒 База собесов | 🔒 База тестовых
Это структура данных, которая позволяет хранить пары ключ-значение и поддерживает любые типы данных в качестве ключей.
Основные особенности:
1️⃣Любые типы ключей:
В ней ключами могут быть любые значения, включая объекты, функции и примитивы. Это отличает Map от объектов, где ключи могут быть только строками или символами.
const map = new Map();
map.set('a', 1);
map.set(1, 'one');
map.set({}, 'object');
map.set(function() {}, 'function');
console.log(map);
2️⃣Сохранение порядка:
Сохраняет порядок вставки элементов, что позволяет итерировать по элементам в порядке их добавления.
3️⃣Итерируемость:
Имеет встроенные методы для итерации, такие как map.keys(), map.values(), и map.entries(), что упрощает работу с коллекцией данных.
4️⃣Методы и свойства:
✅set(key, value): Добавляет новую пару ключ-значение в Map.
✅get(key): Возвращает значение, соответствующее ключу.
✅has(key): Возвращает true, если ключ присутствует в Map.
✅delete(key): Удаляет пару ключ-значение по ключу.
✅clear(): Очищает Map.
✅size: Возвращает количество элементов в Map.
Пример:
const map = new Map();
map.set('name', 'Alice');
map.set('age', 25);
console.log(map.get('name')); // Alice
console.log(map.has('age')); // true
console.log(map.size); // 2
for (const [key, value] of map) {
console.log(key, value);
}
// name Alice
// age 25
Set
Это структура данных, которая хранит уникальные значения. В Set каждое значение может присутствовать только один раз.
Основные особенности:
1️⃣Только уникальные значения:
Set автоматически удаляет дубликаты значений, что позволяет легко создавать коллекции уникальных элементов.
2️⃣Итерируемость:
Set поддерживает итерацию и имеет встроенные методы для работы с коллекцией данных.
3️⃣Методы и свойства:
✅add(value): Добавляет новое значение в Set.
✅has(value): Возвращает true, если значение присутствует в Set.
✅delete(value): Удаляет значение из Set.
✅clear(): Очищает Set.
✅size: Возвращает количество элементов в Set.
Пример:
const set = new Set();
set.add(1);
set.add(2);
set.add(2); // Дубликат не добавится
set.add(3);
console.log(set.has(2)); // true
console.log(set.size); // 3
for (const value of set) {
console.log(value);
}
// 1
// 2
// 3
Сравнение с традиционными структурами данных
Объекты и массивы:
✅Объекты используются для хранения пар ключ-значение, но ключи могут быть только строками или символами.
✅Массивы используются для хранения упорядоченных коллекций элементов, но они не гарантируют уникальность значений.
Map и Set:
✅Map предоставляет более гибкую работу с парами ключ-значение, поддерживая любые типы данных в качестве ключей и сохраняя порядок вставки.
✅Set предоставляет коллекцию уникальных значений и автоматически удаляет дубликаты.
🔥 ТОП ВОПРОСОВ С СОБЕСОВ
🔒 База собесов | 🔒 База тестовых let age: number = 25;
let name: string = "Alice";
function greet(name: string): string {
return `Hello, ${name}`;
}
2️⃣Совместимость:
TypeScript полностью совместим. Любой корректный JavaScript-код также является корректным TypeScript-кодом. Это позволяет постепенно внедрять TypeScript в существующие проекты.
3️⃣Поддержка современных возможностей:
Поддерживает все современные стандарты JavaScript (ES6 и выше), а также предоставляет дополнительные возможности, такие как декораторы и асинхронные функции.
4️⃣Расширенные возможности ООП (объектно-ориентированного программирования):
Добавляет возможности, такие как классы, интерфейсы, абстрактные классы и модификаторы доступа (public, private, protected).
class Person {
private name: string;
constructor(name: string) {
this.name = name;
}
public greet(): void {
console.log(`Hello, my name is ${this.name}`);
}
}
const alice = new Person("Alice");
alice.greet(); // Hello, my name is Alice
5️⃣Типы данных и интерфейсы:
TypeScript позволяет определять собственные типы и интерфейсы, что делает код более выразительным и понятным.
interface User {
id: number;
name: string;
email: string;
}
const user: User = {
id: 1,
name: "Alice",
email: "alice@example.com"
};
6️⃣Инструменты разработки:
Благодаря статической типизации и метаданным, TypeScript обеспечивает улучшенное автодополнение, рефакторинг и навигацию по коду в популярных редакторах кода, таких как Visual Studio Code.
7️⃣Компиляция:
Компилируется (или транслируется) в JavaScript. Это означает, что код TypeScript преобразуется в JavaScript, который затем может выполняться в любом браузере или среде выполнения JavaScript.
// TypeScript
let message: string = "Hello, TypeScript";
// Компилированный JavaScript
var message = "Hello, TypeScript";
Создание простого проекта может включать следующие шаги:
1️⃣Установка TypeScript:
npm install -g typescript
2️⃣Инициализация проекта TypeScript:
tsc --init
Это создаст файл tsconfig.json, в котором можно настроить параметры компиляции TypeScript.
3️⃣Создание TypeScript-файла:
// src/index.ts
const greet = (name: string): string => {
return Hello, ${name};
};
console.log(greet("TypeScript"));
4️⃣Компиляция TypeScript в JavaScript:
tsc
Это создаст файл index.js в папке dist или другой указанной папке.
5️⃣Запуск скомпилированного JavaScript-кода:
node dist/index.js
TypeScript — он является строгой надстройкой над JavaScript. Он добавляет статическую типизацию, улучшенные возможности ООП, поддержку современных стандартов JavaScript и улучшенные инструменты разработки. TypeScript компилируется в JavaScript, что позволяет использовать его в любых средах выполнения JavaScript.
🔥 ТОП ВОПРОСОВ С СОБЕСОВ
🔒 База собесов | 🔒 База тестовыхMap более подходящим для определенных задач по сравнению с обычными объектами. Вот основные отличия:
1️⃣Типы ключей
✅Объекты: Ключами могут быть только строки или символы. Другие типы, такие как числа или объекты, автоматически преобразуются в строки.
const obj = {};
obj[1] = 'one'; // Ключ преобразуется в строку '1'
console.log(obj['1']); // 'one'
const a = { key: 'a' };
const b = { key: 'b' };
obj[a] = 'value'; // Ключ преобразуется в '[object Object]'
console.log(obj['[object Object]']); // 'value'
✅Map: Ключами могут быть любые значения, включая объекты, функции и примитивы.
const map = new Map();
map.set(1, 'one');
console.log(map.get(1)); // 'one'
const a = { key: 'a' };
const b = { key: 'b' };
map.set(a, 'valueA');
map.set(b, 'valueB');
console.log(map.get(a)); // 'valueA'
console.log(map.get(b)); // 'valueB'
2️⃣Итерация
✅Объекты: Осуществляется с помощью циклов for...in или методов Object.keys(), Object.values() и Object.entries().
const obj = { a: 1, b: 2 };
for (const key in obj) {
console.log(key, obj[key]);
}
Object.keys(obj).forEach(key => console.log(key, obj[key]));
✅Map: Имеет встроенные методы для итерации, такие как map.keys(), map.values() и map.entries(). Эти методы возвращают итерируемые объекты.
const map = new Map([['a', 1], ['b', 2]]);
for (const [key, value] of map) {
console.log(key, value);
}
map.forEach((value, key) => console.log(key, value));
3️⃣Сохранение порядка
✅Объекты: Порядок свойств в объектах не гарантирован, хотя современные реализации JavaScript сохраняют порядок добавления свойств.
✅Map: Порядок добавления пар ключ-значение всегда сохраняется.
4️⃣Производительность
✅Объекты: Использование объектов может быть быстрее для создания и доступа к свойствам, но это зависит от реализации в конкретной среде выполнения.
✅Map: Map оптимизирован для частого добавления и удаления ключей и значений.
5️⃣Методы и свойства
✅Объекты: Не имеют встроенных методов для работы с коллекцией ключей и значений.
✅Map: Предоставляет множество встроенных методов, таких как set, get, has, delete, и свойства, такие как size.
const map = new Map();
map.set('key', 'value');
console.log(map.has('key')); // true
console.log(map.get('key')); // 'value'
map.delete('key');
console.log(map.size); // 0
6️⃣Прототипное наследование
✅Объекты: Имеют цепочку прототипов, которая может приводить к коллизиям имен свойств с прототипами.
const obj = { a: 1 };
console.log(obj.toString); // [Function: toString] - свойство унаследовано от Object.prototype
✅Map: В Map нет такой проблемы, так как он не использует цепочку прототипов для хранения данных.
const map = new Map();
map.set('a', 1);
console.log(map.toString); // [Function: toString] - метод самого Map, а не его данных
✅Объекты используют строки и символы как ключи, их итерация может быть менее удобной, и они могут сталкиваться с проблемами прототипного наследования.
✅Map поддерживает любые типы ключей, сохраняет порядок вставки, предоставляет удобные методы для работы с коллекцией и оптимизирован для частых операций добавления и удаления.
🔥 ТОП ВОПРОСОВ С СОБЕСОВ
🔒 База собесов | 🔒 База тестовых
Endi mavjud! Telegram Tadqiqoti 2025 — yilning asosiy insaytlari 
