Перебор объекта в JavaScript. Коллекции Map и Set

Рет қаралды 1,253

Александр Ламков — Friendly Frontend

Күн бұрын

✏️ Рассмотрим способы перебора объектов: цикл for in, методы Object.keys, Object.values, Object.entries. Изучим способ преобразования из массива в объект через метод Object.fromEntries. Познакомимся со специальными коллекциями Map и Set и методами работы с ними.
🔴 Timeline:
▶ 00:00 | Введение
▶ 00:26 | Цикл for in
▶ 00:51 | Перебор ключей объекта - Object.keys
▶ 01:15 | Перебор значений объекта - Object.values
▶ 01:37 | Перебор пар объекта ключ-значение - Object.entries
▶ 02:42 | Преобразование массива пар ключ-значение в объект - Object.fromEntries
▶ 03:51 | Коллекция Map
▶ 04:48 | Добавление элемента в Map коллекцию - метод set
▶ 05:25 | Получение элемента из Map коллекции - метод get
▶ 05:44 | Проверка на существование элемента в Map коллекции - метод has
▶ 06:21 | Удаление элемента из Map коллекции - метод delete
▶ 06:42 | Очищение всей Map коллекции - метод clear
▶ 06:55 | Размер Map коллекции - свойство size
▶ 07:11 | Перебор Map коллекции - методы keys, values, entries, цикл for of
▶ 08:14 | Преобразование из Object в Map
▶ 08:30 | Преобразование из Map в Object
▶ 09:05 | Коллекция уникальных значений Set
▶ 09:51 | Добавление значений в коллекцию Set - метод add
▶ 10:16 | Методы Set - delete, has, clear, свойство size
▶ 10:41 | Перебор Set коллекции - методы keys, values, entries, forEach, цикл for of
▶ 10:14 | Заключение
📚 Ссылки:
➖ Документация по JavaScript от MDN: developer.mozilla.org/ru/docs...
➖ Русскоязычный справочник по JavaScript Doka: doka.guide/js/
➖ Фундаментальный онлайн учебник по JavaScript: learn.javascript.ru/
💬 Чат в телеграмме (помощь новичкам):
t.me/friendlyFrontendChat
🔸 Boosty (поддержать канал):
boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2024
🔵 CSS: • CSS курс 2024
🟡 JS: • JavaScript курс 2024
🟢 A11y: • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков: • Верстка Kropp Fitness ...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Верстка Positivus (HTM...
🗺 Frontend Roadmap 2024 • Frontend Roadmap 2024 ...
📌 Автор:
➖ Личный сайт: aleksanderlamkov.ru/
➖ Telegram: t.me/friendlyFrontend
➖ Boosty: boosty.to/friendly-frontend
➖ GetMentor: getmentor.dev/mentor/aleksand...
➖ Solvery: solvery.io/mentor/aleksanderl...
#frontend #фронтенд #js #javascript

Пікірлер: 14

@AleksanderLamkov 12 күн бұрын

📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

@MikhailPavstyuk 12 күн бұрын

Урок полезный, спасибо. ❤

@yehorkondratiyk8897 12 күн бұрын

Как всегда топ

@виртуоз_ру 12 күн бұрын

Хорош 👍

@PhilippJFray 12 күн бұрын

Как раз дошел до этой темы по учебному плану, спасибо за видео)

@gvitoss 11 күн бұрын

Привет, запиши плиз видею по шторму. Пытаюсь на него перейти после vs code. Интересно как с базами работать, чем он лучше vs code?, как ты под себя настроил

@AleksanderLamkov 11 күн бұрын

С БД я не работаю, пишу только фронтенд. Особо ничего не настраивал, но я посмотрю, что можно рассказать на эту тему. Спасибо за идею!

@gabbergabberovich 12 күн бұрын

Очень плохая практика повсеместно показывать обучающимся допускаемое опускание точки с запятой в конце строки с оператором или командой. Новичёк должен визуально привыкать везде прописывать этот знак препинания .

@AleksanderLamkov 12 күн бұрын

Но зачем? На мой взгляд без ";" код получается чище. Мы ничего существенного не выигрываем, добавляя этот знак. Единственный случай, когда отсутствие ";" сломает код - инструкция, начинающаяся с "[ ... ]", но в хорошем коде, как я считаю, таких моментов возникать в принципе не должно.

@gabbergabberovich 12 күн бұрын

@@AleksanderLamkov там на самом деле проблем может быть еще больше, например при написании в одну строку.

@gabbergabberovich 12 күн бұрын

@@AleksanderLamkov по поводу - "код получается чище", улыбнуло, на самом деле это называется - бардак.

@AleksanderLamkov 12 күн бұрын

То есть "код в одну строку" - нормально, а отсутствие лишнего визуального шума в виде ";" - прям таки плохо?) Противоречие какое-то. Да и о чем спор, если на реальном проекте зачастую есть ESLint и Prettier, которые сами автоматически отформатируют код и расставят (или уберут, в зависимости от принятого конфига) эти несчастные точки с запятой в конце строк.

@gabbergabberovich 12 күн бұрын

@@AleksanderLamkov на реальный проект новичка не допустят если он не будет дописывать точку с запятой. То же самое касается последней запятой в объявлении объектов или массивов. Время IE6-8 давно прошло, а вы их даже не застали.