Краткое введение в объект карты 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
.