Краткое введение в объект карты JavaScript, а также методы и свойства, которые мы можем использовать для работы с ним.

Большая часть нашей роли как веб-разработчиков может заключаться в разработке наилучшей структуры данных для использования в работе. Карты были введены в JavaScript в ES2015 как новый тип итеративного типа объекта, который позволяет нам хранить упорядоченные коллекции key:value пар.

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

Что такое карта?

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

Карты могут быть созданы и инициализированы с использованием синтаксиса new Map():

const myMap = new Map();

Это создает пустую карту:

Map(0) {}

Мы также можем инициализировать карту значениями, передав массив массивов.

const myFruitMap = new Map([['type', 'apple'], ['colour', 'green'], ['name', 'Granny Smith'], ['price', 0.85]]);
Map(4) {"type" => "apple", "colour" => "green", "name" => "Granny Smith", "price" => 0.85}

Добавление свойств на карту

Для добавления значений на карту мы используем метод set(), который принимает два аргумента. Первый аргумент - это ключ, а второй аргумент - это значение.

myMap.set('name', 'Gemma');
myMap.set('occupation', 'Web Developer');

Глядя на карту в консоли, мы видим новые значения и свойства:

Map(2) {"name" => "Gemma", "occupation" => "Web Developer"}

Это похоже на объект, использующий строковые ключи, но с картой мы можем использовать любой тип данных в качестве ключа.

myMap.set(123, 'this is cool');
myMap.set(true, 'why not');
Map(4) {"name" => "Gemma", "occupation" => "Web Developer", 123 => "this is cool", true => "why not"}

Карты не допускают повторного использования ключей и значений. В следующем примере строка один и номер один обрабатываются как уникальные ключи, но когда мы пытаемся использовать числовой во второй раз, первое значение переопределяется.

const myNumberMap = new Map();
myNumberMap.set(1, 'the number one');
myNumberMap.set('1', 'a string of one');
myNumberMap.set(1, 'this will override the numerical 1 value');
Map(2) {1 => "this will override the numerical 1 value", "1" => "a string of one"}

Работа со свойствами на карте

Структура карты означает, что у нас есть доступ к встроенным свойствам, позволяющим нам работать с данными.

Чтобы продемонстрировать эти методы и свойства, давайте инициализируем новую карту.

const myRandomMap = new Map([['animal', 'crocodile'], ['colour', 'purple'], ['country', 'France'], ['number', 527]]);
Map(4) {"animal" => "crocodile", "colour" => "purple", "country" => "France", "number" => 527}

Если мы хотим проверить, существует ли что-то на нашей карте, у нас есть доступ к методу has(), который возвращает логическое значение.

myRandomMap.has('shape'); // false
myRandomMap.has('colour'); // true

Мы можем использовать метод get() для получения значения по его ключу.

myRandomMap.get('animal'); // crocodile

Мы можем использовать метод delete(), чтобы удалить элемент с карты с помощью его ключа. Этот метод вернет true, если элемент существовал и был удален, и false , если он не соответствует какому-либо значению на карте.

myRandomMap.delete('country'); // true
myRandomMap.delete('pineapple'); // false

Одним из преимуществ использования карты над объектом является то, что мы можем определить размер нашей карты в любое время, используя свойство size. Это подсчитает количество элементов на карте.

myRandomMap.size; // 4

Если мы хотим вернуть все ключи на нашей карте, мы можем использовать метод keys(), который вернет объект MapIterator.

myRandomMap.keys();
MapIterator {"animal", "colour", "country", "number"}

Мы можем сделать то же самое с методом values() для доступа к значениям свойств.

myRandomMap.values();
MapIterator {"crocodile", "purple", "France", 527}

Если нам нужны и ключи, и значения, доступен entries() метод.

myRandomMap.entries();
MapIterator {"animal" => "crocodile", "colour" => "purple", "country" => "France", "number" => 527}

Очистить карту от всех значений можно методом clear().

myRandomMap.clear();
Map(0) {}

Резюме

  • Карта - это набор свойств, состоящий из key:value пар
  • Карта может использовать любой тип данных в качестве ключа
  • Порядок свойств на карте сохраняется; порядок, в котором мы размещаем объекты на карте, - это порядок, в котором они останутся
  • Мы можем создать и инициализировать карту, используя синтаксис new Map()
  • Мы также можем инициализировать карту со значениями в ней, если мы передадим массив массивов
  • Карты не допускают повторного использования пар "ключ-значение".
  • Нам доступны различные методы и свойства, которые упрощают работу с картами, например get(), clear() и size.