JavaScript Map — словник із будь-якими ключами

Map (у перекладі — відображення, словник) зберігає пари ключ → значення, де ключем може бути що завгодно: рядок, число, об'єкт, навіть функція.

правити

Загальний опис

Звичайний об'єкт теж схожий на словник, але має три вади, через які його весь час доводилось підпирати милицями.

Перше: ключі там тільки рядки. Спробуєш взяти ключем об'єкт — він мовчки перетвориться на "[object Object]", і два різні об'єкти зіллються в один ключ.

Друге: об'єкт успадковує властивості. Ключ на ім'я toString чи constructor уже «існує», хоч ти його не клав.

Третє: щоб дізнатись кількість, доводиться рахувати Object.keys(obj).length — окремим проходом.

Map не має жодної з цих проблем: ключі будь-які, нічого зайвого не успадковується, розмір — у властивості size, а порядок додавання зберігається чесно.

правити

Порада

Ключ-об'єкт — головна причина брати Map: так можна прив'язати дані до DOM-елемента, не чіпаючи сам елемент.

автор: NagarD правити

Нотатка

Map не серіалізується в JSON.stringify() — на виході буде порожній {}. Щоб зберегти, перетвори: JSON.stringify([...map]).

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

const map = new Map([[key, value], ...]);

методи

властивості

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
Map	38+	13+	8+	25+	12+	11+

Підтримка: мобільні переглядачі

Переглядач
Map	38+	yes	yes	8+

Приклади

+ запропонувати свій приклад у пісочниці

const users = new Map();

users.set('id', 42);
users.set(1, 'число як ключ');

// ключ-об'єкт: дані прив'язані до елемента, сам елемент не змінюємо
const button = document.querySelector('button');
users.set(button, { clicks: 0 });

console.log(users.get(button)); // { clicks: 0 }
console.log(users.size);        // 3
console.log(users.has('id'));   // true

for (const [key, value] of users) {
    console.log(key, '→', value);
}