Основы Map и Set
Используйте Map для поиска по парам «ключ → значение», а Set — для уникальных значений; перебирайте и преобразуйте их и применяйте небольшие практические приёмы
«Основы Map и Set» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 3 уроков всего.
Зачем нужны отображения и множества
Цель: выбрать подходящий контейнер.
- Отображение: key→значение (key любого типа)
- Множество: уникальные значения
- Перебирать и преобразовывать данные
- Небольшие повседневные шаблоны
Отображение: set/get/has
Отображение предоставляет set, get, has, delete, очистку и свойство размера.
// Map: key→value with any key type
const userToScore = new Map();
// set values
userToScore.set("ayla", 10);
userToScore.set("mina", 15);
// read values
console.log("ayla:", userToScore.get("ayla"));
console.log("has lena?", userToScore.has("lena"));
// size
console.log("size:", userToScore.size);
Множество: уникальные значения
Множество хранит только одну копию каждого значения; дубликаты игнорируются.
// Set: unique values
const seen = new Set();
// add values (duplicates are ignored)
seen.add("red");
seen.add("blue");
seen.add("red"); // ignored
console.log("size:", seen.size);
console.log("has red?", seen.has("red"));
seen.delete("blue");
console.log("after delete:", seen.size);
Почему отображение лучше объекта
Отображение сохраняет идентичность объектов в качестве ключей. Обычные объекты преобразуют ключи в строки.
// Map can use objects as keys directly
const key1 = { id: 1 };
const key2 = { id: 1 }; // different reference
const map = new Map();
map.set(key1, "A");
console.log("get key1:", map.get(key1));
console.log("get key2:", map.get(key2)); // undefined (different object)
const obj = {};
obj[key1] = "B"; // coerces key to "[object Object]"
console.log("object key:", obj["[object Object]"]);
Преобразования
Создавайте массивы уникальных значений из множества. Создавайте отображение из пар и обратно с помощью entries().
// Unique array values via Set
const nums = [2, 2, 3, 4, 3];
const unique = Array.from(new Set(nums));
console.log("unique:", unique);
// Map from pairs; back to pairs
const pairs = [["a", 1], ["b", 2]];
const m = new Map(pairs);
console.log("get a:", m.get("a"));
console.log("entries:", Array.from(m.entries()));
Шаблоны, которые стоит запомнить
Небольшие шаблоны:
- Используйте отображение для подсчётов (key → число).
- Используйте множество для быстрой проверки наличия.
- Предпочитайте отображение, если ключи не являются строками или Вам нужен порядок вставки.
Тест на уникальность множества
Быстрая проверка: уникальность.
Итоги
Итоги: Выбирайте отображение для поиска по схеме key→значение (key любого типа), а множество — для уникальных значений; перебирайте и преобразовывайте их с помощью entries()/Array.from.
Часто задаваемые вопросы
Урок «Основы Map и Set» бесплатный?
Да — полный текст урока «Основы Map и Set» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 3 уроков всего.
Чему я научусь в уроке «Основы Map и Set»?
Используйте Map для поиска по парам «ключ → значение», а Set — для уникальных значений; перебирайте и преобразуйте их и применяйте небольшие практические приёмы Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.
Сколько времени занимает урок «Основы Map и Set»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Основы Map и Set
- WeakMap и WeakSet — простая приватность и кэши
- Шаблоны перебора