
На майских в Telegram — больше читателей и отклика
Планируйте посты со скидкой 3,5% по промокоду HAPPYMAY с 28 апреля по 15 мая
Получить скидку
19.9

Frontend Interview - собеседования по Javascript / Html / Css
5.0
28
Интернет технологии
690
19
Поделиться
В избранное
Купить рекламу в этом канале
Формат:
keyboard_arrow_down
- 1/24
- 2/48
- 3/72
- 7 дней
1 час в топе / 24 часа в ленте
Количество:
keyboard_arrow_down
- 1
- 2
- 3
- 4
- 5
- 8
- 10
- 15
Стоимость публикации:
local_activity
3 356.64₽3 356.64₽local_mall
0.0%
Осталось по этой цене:0
Последние посты канала
Что такое вычисляемые свойства и как их использовать?
Это функция в JavaScript, которая позволяет использовать выражения в качестве имен свойств объекта. Это особенно полезно, когда имя свойства динамически вычисляется или создается на основе переменной.
Вычисляемые свойства в объектных литералах задаются в квадратных скобках
Использование вычисляемых свойств
1. Динамическое имя свойства на основе переменной
2. Использование выражений в качестве имен свойств
3. Вложенные вычисляемые свойства
4. Использование функции для вычисления имен свойств
Применение в реальных сценариях
Создание объекта с динамическими ключами
Предположим, вам нужно создать объект для хранения оценок студентов, где ключи представляют собой имена студентов, а значения — их оценки.
Использование вычисляемых свойств для формирования запросов
Допустим, у вас есть объект, представляющий параметры фильтра для поиска, и вы хотите динамически создавать ключи на основе выбранных фильтров.
👉 @frontendInterview
Это функция в JavaScript, которая позволяет использовать выражения в качестве имен свойств объекта. Это особенно полезно, когда имя свойства динамически вычисляется или создается на основе переменной.
Вычисляемые свойства в объектных литералах задаются в квадратных скобках
[]
.let propName = 'name';
let person = {
[propName]: 'Alice'
};
console.log(person.name); // 'Alice'
Использование вычисляемых свойств
1. Динамическое имя свойства на основе переменной
let key = 'age';
let person = {
name: 'Alice',
[key]: 25
};
console.log(person.name); // 'Alice'
console.log(person.age); // 25
2. Использование выражений в качестве имен свойств
let i = 0;
let obj = {
['prop_' + ++i]: i,
['prop_' + ++i]: i,
['prop_' + ++i]: i
};
console.log(obj); // { prop_1: 1, prop_2: 2, prop_3: 3 }
3. Вложенные вычисляемые свойства
let prefix = 'user';
let index = 1;
let users = {
[prefix + index]: { name: 'Alice' },
[prefix + (index + 1)]: { name: 'Bob' }
};
console.log(users.user1.name); // 'Alice'
console.log(users.user2.name); // 'Bob'
4. Использование функции для вычисления имен свойств
function createKey(base, index) {
return base + index;
}
let obj = {
[createKey('key', 1)]: 'value1',
[createKey('key', 2)]: 'value2'
};
console.log(obj.key1); // 'value1'
console.log(obj.key2); // 'value2'
Применение в реальных сценариях
Создание объекта с динамическими ключами
Предположим, вам нужно создать объект для хранения оценок студентов, где ключи представляют собой имена студентов, а значения — их оценки.
let studentName1 = 'Alice';
let studentName2 = 'Bob';
let grades = {
[studentName1]: 85,
[studentName2]: 92
};
console.log(grades.Alice); // 85
console.log(grades.Bob); // 92
Использование вычисляемых свойств для формирования запросов
Допустим, у вас есть объект, представляющий параметры фильтра для поиска, и вы хотите динамически создавать ключи на основе выбранных фильтров.
function getFilterKey(filterName) {
return `filter_${filterName}`;
}
let filters = {};
filters[getFilterKey('age')] = 25;
filters[getFilterKey('location')] = 'New York';
console.log(filters); // { filter_age: 25, filter_location: 'New York' }
👉 @frontendInterview
256
09:05
28.04.2025
imageИзображение не доступно для предпросмотра
My Language Skills
Вам дан объект, содержащий результаты теста по языкам. Верните массив языков, для которых результат теста больше 60 в убывающем порядке.
Примеры:
👉 @frontendInterview
Вам дан объект, содержащий результаты теста по языкам. Верните массив языков, для которых результат теста больше 60 в убывающем порядке.
Примеры:
{"Java": 10, "Ruby": 80, "Python": 65}
// ["Ruby", "Python"]
{"Hindi": 60, "Dutch" : 93, "Greek": 71}
// ["Dutch", "Greek", "Hindi"]
{"C++": 50, "ASM": 10, "Haskell": 20}
// []
👉 @frontendInterview
441
16:04
27.04.2025
imageИзображение не доступно для предпросмотра
Алгоритмы
В этом руководстве содержатся основные сведения об алгоритмах: анализируются различные типы алгоритмов, рассматриваются мето-ды их построения (рекурсия, динамическое программирование и др.), приводятся практические примеры. В конце каждой главы приводятся упражнения, направленные на закрепление пройденного. Для изучения материала требуется знание основ дискретной математики и методов доказательств, а также представление об основных вычислительных задачах и алгоритмах. Желателен практический опыт работы с языком программирования, поддерживающим косвенную адресацию и рекурсию.Издание адресовано студентам и преподавателям технических вузов, а также тем, кто хочет изучить основы алгоритмизации.
👉 @frontendInterview
В этом руководстве содержатся основные сведения об алгоритмах: анализируются различные типы алгоритмов, рассматриваются мето-ды их построения (рекурсия, динамическое программирование и др.), приводятся практические примеры. В конце каждой главы приводятся упражнения, направленные на закрепление пройденного. Для изучения материала требуется знание основ дискретной математики и методов доказательств, а также представление об основных вычислительных задачах и алгоритмах. Желателен практический опыт работы с языком программирования, поддерживающим косвенную адресацию и рекурсию.Издание адресовано студентам и преподавателям технических вузов, а также тем, кто хочет изучить основы алгоритмизации.
👉 @frontendInterview
728
10:06
27.04.2025
Как можно узнать, есть ли в двух множествах Set общие элементы?
Метод isDisjointFrom() позволяет проверить, имеют ли два множества хотя бы один общий элемент. Возвращает true, если множества не имеют общих элементов, и false, если хотя бы один элемент совпадает.
Проверку, которую выполняет метод, можно выразить так:
A ∩ B = ∅
Пример
В одной компании два разработчика, Анна и Павел, решили организовать учебный кружок по программированию. Чтобы понять, могут ли они вести занятия вместе, им нужно проверить, есть ли у них пересекающиеся области знаний. В этом им поможет метод isDisjointFrom():
Как мы видим, у них нет общих навыков, но тут оказалось, что Анна забыла указать, что она также знает Node.js.
👉 @frontendInterview
Метод isDisjointFrom() позволяет проверить, имеют ли два множества хотя бы один общий элемент. Возвращает true, если множества не имеют общих элементов, и false, если хотя бы один элемент совпадает.
Проверку, которую выполняет метод, можно выразить так:
A ∩ B = ∅
Пример
В одной компании два разработчика, Анна и Павел, решили организовать учебный кружок по программированию. Чтобы понять, могут ли они вести занятия вместе, им нужно проверить, есть ли у них пересекающиеся области знаний. В этом им поможет метод isDisjointFrom():
const annaSkills = new Set(['JavaScript', 'HTML', 'CSS', 'Vue.js']);
const pavelSkills = new Set(['Python', 'Node.js', 'PostgreSQL', 'Redis']);
console.log(annaSkills.isDisjointFrom(pavelSkills));
// true, т.к. у Ани и Павла нет общих навыков
Как мы видим, у них нет общих навыков, но тут оказалось, что Анна забыла указать, что она также знает Node.js.
/ Добавим навык в существующее множество.
annaSkills.add('Node.js');
console.log(annaSkills.isDisjointFrom(pavelSkills));
// false, т.к. Node.js уже есть в обоих множествах
👉 @frontendInterview
765
16:05
26.04.2025
play_circleВидео недоступно для предпросмотра
859
10:07
26.04.2025
imageИзображение не доступно для предпросмотра
Сливаем вам базу с курсами и книгами от известных онлайн школ по Frontend:
(23 ГБ) — Основы веба
(46 ГБ) — HTML/CSS/Верстка
(53 ГБ) — JavaScript
(31 ГБ) — React
(17 ГБ) — TypeScript
(33 ГБ) — Vue / Angular / Svelte
(56 ГБ) — Webpack / Vite / Git
(43 ГБ) — Next.js / Nuxt.js
(68 ГБ) — Figma и Веб-дизайн
(76 ГБ) — Анимации и UI/UX
(44 ГБ) — WordPress
(37 ГБ) — Архитектура фронтенда
(21 ГБ) — Тестирование фронта
Скачивать ничего не нужно — все выложили в Telegram
622
08:07
26.04.2025
imageИзображение не доступно для предпросмотра
Как создать веб-приложение со своей картой: подключение API v3 Яндекс Карт
Сколько карт установлено на вашем смартфоне? Попробуйте ответить на этот вопрос и задумайтесь, как часто их добавляют разработчики приложений. Кто-то отмечает на картах свои магазины, кто-то — делает проекты в духе Zenly, другие — показывают зоны доставки еды и т. д.
Если вам тоже пришлось «вшить» в свое веб-приложение карты, запаситесь терпением. В инструкции рассказываем, как это сделать и настроить тестовое окружение с IDE в облаке.
👉 @frontendInterview
Сколько карт установлено на вашем смартфоне? Попробуйте ответить на этот вопрос и задумайтесь, как часто их добавляют разработчики приложений. Кто-то отмечает на картах свои магазины, кто-то — делает проекты в духе Zenly, другие — показывают зоны доставки еды и т. д.
Если вам тоже пришлось «вшить» в свое веб-приложение карты, запаситесь терпением. В инструкции рассказываем, как это сделать и настроить тестовое окружение с IDE в облаке.
👉 @frontendInterview
970
16:06
24.04.2025
Как можно убрать пробелы в начале и конце строки?
При работе с полями ввода <input> и <textarea> может встречаться ситуация, когда пользователи добавляют пробелы в начале или конце текста. В некоторых случаях это не критично — например, в чатах или мессенджерах. Но есть ситуации, где важно получить чистые данные без лишних пробелов, как при вводе email для авторизации.
Для удаления таких пробельных символов используется метод .trim(), который нужно применить к значению поля перед отправкой данных на сервер.
Метод также помогает получить чистые данные в required-полях. Атрибут required указывает, что поле формы обязательно для заполнения, но он не всегда правильно работает с пробельными символами. Если пользователь введёт только пробелы в поле с атрибутом required, браузер может посчитать поле заполненным, хотя фактически полезной информации там нет.
Пример
Метод не принимает аргументов и работает напрямую со строкой, на которой вызван:
👉 @frontendInterview
При работе с полями ввода <input> и <textarea> может встречаться ситуация, когда пользователи добавляют пробелы в начале или конце текста. В некоторых случаях это не критично — например, в чатах или мессенджерах. Но есть ситуации, где важно получить чистые данные без лишних пробелов, как при вводе email для авторизации.
Для удаления таких пробельных символов используется метод .trim(), который нужно применить к значению поля перед отправкой данных на сервер.
Метод также помогает получить чистые данные в required-полях. Атрибут required указывает, что поле формы обязательно для заполнения, но он не всегда правильно работает с пробельными символами. Если пользователь введёт только пробелы в поле с атрибутом required, браузер может посчитать поле заполненным, хотя фактически полезной информации там нет.
Пример
const phrase = ' А быть может, каждый из вас уже начал — не заметив этого — тот единственный путь, который предназначен ему судьбой.\n '
console.log(phrase.length)
// 124
const phraseWithoutSpaces = phrase.trim()
console.log(phraseWithoutSpaces)
// 'А быть может, каждый из вас уже начал — не заметив этого — тот единственный путь, который предназначен ему судьбой.'
console.log(phraseWithoutSpaces.length)
// 115
Метод не принимает аргументов и работает напрямую со строкой, на которой вызван:
const str = ' Привет, Дока! '
console.log(str.trim()) // 'Привет, Дока!'
👉 @frontendInterview
970
11:00
23.04.2025
imageИзображение не доступно для предпросмотра
Здесь на простых картинках и понятном языке обучают фронтенд-разработке, делятся полезными фишками и ресурсами
Подписывайтесь: @FrontendPortal
628
09:00
23.04.2025
close
С этим каналом часто покупают
Отзывы канала
keyboard_arrow_down
- Добавлен: Сначала новые
- Добавлен: Сначала старые
- Оценка: По убыванию
- Оценка: По возрастанию
5.0
0 отзыва за 6 мес.
k
**ylov.v4d@*****.com
на сервисе с мая 2024
05.08.202412:31
5
Вежливый администратор, четкое соблюдение ТЗ
Показать еще
Лучшие в тематике
Новинки в тематике
Статистика канала
Рейтинг
19.9
Оценка отзывов
5.0
Выполнено заявок
62
Подписчики:
12.4K
Просмотры на пост:
lock_outline
ER:
5.0%
Публикаций в день:
2.0
CPV
lock_outlineВыбрано
0
каналов на сумму:0.00₽
Подписчики:
0
Просмотры:
lock_outline
Перейти в корзинуКупить за:0.00₽
Комментарий