Frontend | Вопросы собесов
Сайт easyoffer.ru Реклама @easyoffer_adv ВП @easyoffer_vp Тесты t.me/+T0COHtFzCJkwMDUy Задачи t.me/+_tcX2w2EmvdmMTgy Вакансии t.me/+CgCAzIyGHHg0Nzky
Mostrar más📈 Análisis del canal de Telegram Frontend | Вопросы собесов
El canal Frontend | Вопросы собесов (@easy_javascript_ru) en el segmento lingüístico de Ruso es un actor destacado. Actualmente la comunidad reúne a 18 269 suscriptores, ocupando la posición 7 325 en la categoría Tecnologías y Aplicaciones y el puesto 36 895 en la región Rusia.
📊 Métricas de audiencia y dinámica
Desde su creación el невідомо, el proyecto ha mostrado un crecimiento acelerado, reuniendo a 18 269 suscriptores.
Según los últimos datos del 19 junio, 2026, el canal mantiene una actividad estable. En los últimos 30 días la variación de miembros fue de -128, y en las últimas 24 horas de 1, conservando un alto alcance.
- Estado de verificación: No verificado
- Tasa de interacción (ER): El promedio de interacción de la audiencia es 9.80%. Durante las primeras 24 horas tras publicar, el contenido suele obtener 5.48% de reacciones respecto al total de suscriptores.
- Alcance de las publicaciones: Cada publicación recibe en promedio 1 790 visualizaciones. En el primer día suele acumular 1 002 visualizaciones.
- Reacciones e interacción: La audiencia responde de forma activa: el promedio de reacciones por publicación es 9.
- Intereses temáticos: El contenido se centra en temas clave como ставь, браузер, html, border, flex.
📝 Descripción y política de contenido
El autor describe el recurso como un espacio para expresar opiniones subjetivas:
“Сайт easyoffer.ru
Реклама @easyoffer_adv
ВП @easyoffer_vp
Тесты t.me/+T0COHtFzCJkwMDUy
Задачи t.me/+_tcX2w2EmvdmMTgy
Вакансии t.me/+CgCAzIyGHHg0Nzky”
Gracias a la alta frecuencia de actualizaciones (últimos datos recibidos el 20 junio, 2026), el canal mantiene la vigencia y un amplio alcance. La analítica demuestra que la audiencia interactúa activamente con el contenido, lo que lo convierte en un punto de referencia dentro de la categoría Tecnologías y Aplicaciones.
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 поддерживает любые типы ключей, сохраняет порядок вставки, предоставляет удобные методы для работы с коллекцией и оптимизирован для частых операций добавления и удаления.
🔥 ТОП ВОПРОСОВ С СОБЕСОВ
🔒 База собесов | 🔒 База тестовых
¡Ya disponible! Investigación de Telegram 2025 — los principales insights del año 
