Map. В чём особенность? Какие свойства и методы есть? Как перебрать?

👨‍💻 Frontend Developer 🟡 Часто попадается 🎚️ Сложный
#JavaScript #Коллекции #База JS

Краткий ответ

Map — это коллекция ключ-значение, как и обычный объект, но с важными отличиями:

  • Ключи могут быть любого типа (не только строки)
  • Порядок добавления сохраняется
  • Есть свойство [size] для получения количества элементов
  • Удобные методы: [set()], [get()], [has()], [delete()], [clear()]
const map = new Map();
map.set('ключ', 'значение');
map.set(1, 'число как ключ');
map.set(true, 'булево как ключ');
 
console.log(map.get('ключ')); // 'значение'
console.log(map.size); // 3

Полный ответ

Map — как специальный органайзер с ячейками, где в каждой ячейке можно хранить что угодно и подписывать ячейки любыми этикетками! В отличие от обычного ящика (объекта), этот органайзер умный и помнит, что в него положили и в каком порядке! 🗂️

Особенности Map

Главные отличия Map от обычных объектов:

Простые примеры

Создание и основные методы

// Создание Map
const userMap = new Map();
 
// Добавление элементов
userMap.set('имя', 'Иван');
userMap.set('возраст', 25);
userMap.set(1, 'первый');
 
// Получение значений
console.log(userMap.get('имя'));    // 'Иван'
console.log(userMap.get(1));        // 'первый'
 
// Проверка наличия
console.log(userMap.has('имя'));    // true
console.log(userMap.has('город'));  // false
 
// Удаление
userMap.delete('возраст');
console.log(userMap.size); // 2

Ключи любого типа

const map = new Map();
const funcKey = function() {};
const objKey = {};
const arrKey = [];
 
map.set(funcKey, 'функция как ключ');
map.set(objKey, 'объект как ключ');
map.set(arrKey, 'массив как ключ');
map.set(NaN, 'NaN тоже работает');
 
console.log(map.get(funcKey)); // 'функция как ключ'

Свойства и методы Map

Основные свойства

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);
 
console.log(map.size); // 3 (количество элементов)

Основные методы

const map = new Map();
 
// set(key, value) — добавляет пару ключ-значение
map.set('ключ', 'значение');
 
// get(key) — получает значение по ключу
const value = map.get('ключ');
 
// has(key) — проверяет наличие ключа
const exists = map.has('ключ');
 
// delete(key) — удаляет элемент по ключу
map.delete('ключ');
 
// clear() — очищает всю Map
map.clear();

Как перебрать Map

С помощью for…of

const map = new Map([
  ['имя', 'Иван'],
  ['возраст', 25],
  ['город', 'Москва']
]);
 
// Перебор пар [ключ, значение]
for (const [key, value] of map) {
  console.log(key, value);
}
 
// Перебор только ключей
for (const key of map.keys()) {
  console.log(key);
}
 
// Перебор только значений
for (const value of map.values()) {
  console.log(value);
}

С помощью forEach

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);
 
map.forEach((value, key) => {
  console.log(key, value);
});

Когда использовать Map

Когда нужны нестроковые ключи

// Объекты как ключи — только в Map!
const user1 = { id: 1, name: 'Иван' };
const user2 = { id: 2, name: 'Петр' };
 
const userRoles = new Map();
userRoles.set(user1, 'админ');
userRoles.set(user2, 'пользователь');

Когда важен порядок добавления

// Map сохраняет порядок добавления
const ordered = new Map();
ordered.set('третий', 3);
ordered.set('первый', 1);
ordered.set('второй', 2);
 
for (const [key, value] of ordered) {
  console.log(key, value); 
  // Вывод в порядке добавления, не алфавитном!
}

Частые ошибки

Путаница с объектами

// ❌ Ошибка — попытка использовать объект как ключ в объекте
const obj = {};
const key = {};
// obj[key] = 'значение'; // key становится '[object Object]'
 
// ✅ Правильно — использовать Map для любых ключей
const map = new Map();
map.set(key, 'значение'); // работает как ожидается

Забыть new при создании

// ❌ Ошибка — забыли new
// const map = Map(); // TypeError!
 
// ✅ Правильно
const map = new Map();

Простые правила

  1. Любые ключи — ключами могут быть любые значения 🗝️
  2. Порядок — сохраняется порядок добавления элементов 📋
  3. size — свойство для получения количества элементов 📏
  4. Методы — set(), get(), has(), delete(), clear() 🛠️
  5. Перебор — можно перебирать с for…of и forEach 🔄

Map — мощная альтернатива обычным объектам, когда нужны специальные возможности для работы с коллекциями! 💪


Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪