Map - это новый тип объекта, который позволяет хранить коллекции пар ключ-значение.
В отличие от объектов, ключи Map могут быть любого типа, даже объектами или функциями. Также легко получать размер объекта Map, хотя это не так просто для объектов. Кроме того, с Map мы можем выполнять итерацию в том порядке, в котором были добавлены значения, в отличие от объектов.
Вот простой пример, демонстрирующей несколько доступных методов и свойств, таких как set, get, size, has, delete и clear:
let things = new Map(); const myFunc = () => '🍕'; things.set('🚗', 'Car'); things.set('🏠', 'House'); things.set('✈️', 'Airplane'); things.set(myFunc, '😄 Key is a function!'); things.size; // 4 things.has('🚗'); // true things.has(myFunc) // true things.has(() => '🍕'); // false, not the same reference things.get(myFunc); // '😄 Key is a function!' things.delete('✈️'); things.has('✈️'); // false things.clear(); things.size; // 0 // setting key-value pairs is chainable things.set('🔧', 'Wrench') .set('🎸', 'Guitar') .set('🕹', 'Joystick'); const myMap = new Map(); // Even another map can be a key things.set(myMap, 'Oh gosh!'); things.size; // 4 things.get(myMap);
Инициализация из массива
Вы можете инициализировать Map из массива, содержащего массивы двух значений:
const funArray = [ ['🍾', 'Champagne'], ['🍭', 'Lollipop'], ['🎊', 'Confetti'], ]; let funMap = new Map(funArray); funMap.get('🍾'); // Champ
Итерирование
Можно лего перебирать значния используя for...of с использованием деструктурирования:
let activities = new Map(); activities.set(1, '🏂'); activities.set(2, '🏎'); activities.set(3, '🚣'); activities.set(4, '🤾'); for (let [nb, activity] of activities) { console.log(`Activity ${nb} is ${activity}`); } // Activity 1 is 🏂 // Activity 2 is 🏎 // Activity 3 is 🚣 // Activity
И вы также можете использовать forEach для итерации по объекту. Однако, обратите внимание, как первый аргумент функции forEach является значением, а второй - ключом. Следующий результат будет иметь тот же результат, что и для for...of:
activities.forEach((value, key) => { console.log(`Activity ${key} is ${value}`); });