Map

Ресурсы:

Документация
Первая половина статьи
Страница учебника

---

Map ('мэпы') - коллекции, или карты.

В объектах зачастую в качестве свойств используются строки:


В данном случае, к примеру, свойство name является строкой, хоть и записано без кавычек, это всё равно строка.

Что же будет, если в качестве ключа передать не строку, а к примеру число:


А произойдёт то, что 4 превратится в строку и в этом можно убедиться, если вывести в консоль самый первый ключ нашего объекта


Но если в качестве ключа мы попробуем поставить объект, то получим ошибку.

Но бывают ситуации, когда вместо строк в качестве ключей нам нужны другие типы данных.

К примеру, у нас есть список магазинов торговой сети, каждый из них содержит определённый перечень товаров и на каждый из них выделяется определённый бюджет:


К каждому из этих объектов (один объект - это один магазин) нужно добавить его бюджет, таким образом, чтобы сформировались пары магазин - бюджет.

Чтобы создать новую карту:


Созданная новая карта изначально пустая и её нужно заполнить.

В качестве ключей в "мэпах" можно использовать массивы, объекты, функции и т.д.
По типу данных "мэпы" - это всё те же объекты, но со своими специфическими методами.

Метод set()

Синтаксис этого метода:


Применительно к нашим магазинам:


Или тоже самое, но цепочкой:


Или, как вариант, для удобства читаемости:


Работа цепочки возможна благодаря тому, что каждый раз, когда отрабатывает звено цепочки, обратно возвращается объект map

Если сейчас вывести в консоль содержимое нашей карты:


То увидим:


Мы видим что это объект, у которого свойства (ключи) также являются объектами

Цифры бюджетов магазинов могут приходить из каких-то таблиц, либо баз данных


И тогда нам нужно соединить две структуры: массив с магазинами и массив с бюджетами, для этого мы можем использовать обычный цикл, либо метод forEach():


В аргумент shop при переборе по очереди будут попадать каждый из трёх объектов, содержащихся в массиве shops, при этом i - это порядковый номер каждого из элементов массива.

Если сейчас вывести в консоль содержимое карты, то получим тот же результат, что и до этого.

Работа с картами

map.get(key) - возвращает значение по ключу или undefined, когда ключ key отсутствует

Проверка на наличие какого-то ключа в карте:


map.has(key) - вернёт true, если ключ key в коллекции есть, иначе false

Удалить пару "ключ-значение":


Полностью очистить карту от всех элементов:


Узнать текущее количество элементов карты:


В консоли карта выглядит как объект с объектами, но на самом деле это массив массивов!

Убедимся в этом, добавив в качестве аргумента первое начальное значение для магазинов. Это будет начальное значение при создании карты, затем добавятся остальные с помощью forEach()


в консоли получаем ожидаемый результат

Методы перебора карты

map.keys() - возвращает итерируемый объект по ключам, пример:


Результат в консоли:


Пример №2 : можно получить список товаров всех магазинов.

Создадим для начала переменную с пустым массивом:


Чтобы записать в этот массив все товары, мы можем сделать так:


Результат в консоли:


Почему именно такая запись?


Потому, что если записать так


то в консоли будет массив с массивами


поэтому, чтобы из каждого массива вытащить его элемент, мы и добавляем его индекс [0]

Всё дело в том, что Object.keys() возвращает массив из перечисляемых свойств объекта, соответственно:


вернёт


По аналогии:


вернёт


И так далее.

Нам же нужен один массив со списком товаров, поэтому из каждого возвращенного с помощью Object.keys() массива мы вынимаем его элемент с помощью его индекса [0].

Второй способ позволяет получить вместо ключей значения:


В консоли мы получим бюджеты каждого из магазинов:


Третий способ позволяет получить массив с массивами, в каждом из которых первый элемент это объект с магазином, а второй - его бюджет.


Результат в консоли:


Часто эти массивы сразу же деструктуризируют, чтобы иметь возможность вывести элементы массивов по отдельности или как то их использовать по отдельности:


И вот результат:


Четвёртый способ перебрать карту - это иcпользовать метод forEach()


И результат:

Как сделать карту из объекта

Мы можем использовать Object.entries() для создания карты из имеющегося объекта:


И в консоли мы получим карту, созданную из объекта

Как создать из карты объект

Метод Object.fromEntries() преобразует список пар "ключ-значение" в объект


Еще пример:

Главные отличия карт от объектов

1. У карт ключи могут быть чем угодно: массивами, объектами, функциями, цифрами и т.п. У объектов ключами могут быть только строки

2. Порядок свойств в картах всегда такой, какой мы его добавляли. У объектов нет четкого порядка относительно того, когда было добавлено свойство. Например, если свойство в объект добавляется динамически, оно может быть подставлено в любое место объекта.

3. При создании пустой карты в ней ничего не будет содержаться, в том числе каких-то наследуемых свойств через прототип, а в пустом объекте они есть.

4. Карты легко перебирать и для этого есть много способов.

5. Размеры карты легко получить через свойство size, с объектом же требуется сначала его трансформация в массив, чтобы затем получить его длину.