JavaScript Мапи (Карти)
Мапа містить пари ключ-значення, де ключі можуть мати будь-який тип даних.
Мапа запам’ятовує початковий порядок вставки ключів.
Мапа має властивість, що представляє розмір мапи.
Методы Мапи
| Метод | Опис |
|---|---|
| new Map() | Створює об’єкт new Map (нова Мапа) |
| set() | Встановлює значення для ключа на Мапі |
| get() | Отримує значення ключа на Мапі |
| clear() | Видаляє всі елементи з Мапи |
| delete() | Видаляє елемент Мапи, що вказаний ключом |
| has() | Повертає true, якщо ключ існує на Мапі |
| forEach() | Викликає зворотній виклик для кожної пари ключ/значення на Мапі |
| entries() | Повертає об’єкт-ітератор з парами [ключ, значення] на Мапі |
| keys() | Повертає об’єкт-ітератор з ключами на Мапі |
| values() | Повертає об’єкт-ітератор значень на Мапі |
| Властивість | Опис |
|---|---|
| size | Повертає кількість елементів Мапи |
Як зробити Мапу
Ви можете створити JavaScript Мапу за допомогою:
- Передача масиву в
new Map() - Створюйте Мапу та використовуйте
Map.set()
Метод new Map()
Ви можете створити мапу, передавши масив в конструктор new Map():
Приклад
// Створити Мапу
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
Спробуйте самі »
Метод Map.set()
Ви можете додавати елементи до мапи за допомогою метода set():
Приклад
// Створити Мапу
const fruits = new Map();
// Встановити значення Мапи
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
Спробуйте самі »
Метод set() також можна використовувати для зміни існуючих значень Мапи:
Метод Map.get()
Метод get() отримує значення ключа на Мапі:
Метод Map.size
Властивість size повертає кількість елементів на мапі:
Метод Map.delete()
Метод delete() видаляє елемент Map (Мапу):
Метод Map.clear()
Метод clear() видаляє всі елементи з Мапи:
Метод Map.has()
Метод has() повертає значення true, якщо ключ існує на Мапі:
Приклад
fruits.has("apples");
Спробуйте самі »
Спробуй це:
fruits.delete("apples");
fruits.has("apples");
Спробуйте самі »
Мапи та Об’єкти
typeof поверне об’єкт:
instanceof Мапа поверне true:
JavaScript Об’єкти та Мапи
Відмінності між JavaScript Об’єктами та Мапами:
| Об’єкт | Мапа | |
|---|---|---|
| Ітерабельність | Не прямо ітерований | Прямо ітерований |
| Розмір | Не має властивості size (розмір) | Має властивість size (розмір) |
| Типи ключів | Ключі мають бути рядками (або символами) | Ключи можуть мати будь-який тип даних |
| Впорядкованість ключів | Ключі невпорядковані | Ключи впорядковані за вставкою |
| За замовчуванням | Є ключі за замовчуванням | Немає ключів за замовчуванням |
Метод Map.forEach()
Метод forEach() викликає зворотній виклик для кожної пари ключ/значення на Мапі:
Приклад
// Список всіх записів
let text = "";
fruits.forEach (function(value, key) {
text += key + ' = ' + value;
})
Спробуйте самі »
Метод Map.keys()
Метод keys() повертає об’єкт-ітератор з ключами на Мапі:
Приклад
// Список всіх ключів
let veggies = "";
for (const x of fruits.keys()) {
veggies += x;
}
Спробуйте самі »
Метод Map.values()
Метод values повертає об’єкт-ітератор зі значеннями на Мапі:
Приклад
// Скласти всі значення
let total = 0;
for (const x of fruits.values()) {
total += x;
}
Спробуйте самі »
Метод Map.entries()
Метод entries() повертає об’єкт-ітератор з [ключ, значення] на Мапі:
Приклад
// Список всіх записів
let text = "";
for (const x of fruits.entries()) {
text += x;
}
Спробуйте самі »
Об’єкти та Ключі
Можливість використовувати об’єкти як ключі - важлива особливість Мапи.
Приклад
// Створити Об’єкти
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Створити Мапу
const fruits = new Map();
// Додати нові елементи на Мапу
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
Спробуйте самі »
Пам’ятайте: ключ - це об’єкт (apples), а не рядок ("apples"):
Підтримка браузерами
JavaScript Мапи підтримуються в усіх сучасних браузерах, крім Internet Explorer:
| Chrome | Edge | Firefox | Safari | Opera |
