Введение в обеък Map в JavaScript

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}`);
});