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

карта JavaScript Программирование и разработка

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

В выпуске ES6 JavaScript представил новый встроенный класс для карт, который упрощает работу с коллекциями. В этом коротком руководстве мы обсудим Mapпримеры, методы и варианты использования кода JavaScript, а также познакомим вас с дополнительными концепциями.

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

До ES6 разработчики JavaScript использовали объекты для сопоставления ключей со значениями, но использование объекта в качестве карты имеет некоторые ограничения:

  • Нет надежного способа перебора ключей
  • keys() Метод преобразует поля в строки, которая создает ключ столкновения
  • Нет простого способа добавить новые ключи и новые значения

Эти проблемы были устранены в выпуске ES6, когда Mapбыл представлен тип коллекции. Он может содержать пары ключ-значение любого типа и может запоминать порядок вставки ключей. Любое значение (объекты и примитивы) можно использовать как ключ или значение.

JavaScript Mapсоздает новый массив, который содержит результаты итерации по элементам массива и вызывает предоставленную функцию один раз для каждого элемента по порядку. Это важная структура данных, которая имеет множество важных применений.

Примечание: WeakMap аналогично Map, но все ключи в a WeakMapявляются объектами.

Чтобы создать новый Map, следуйте этому синтаксису:

let map = new Map([iterable]);

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

‘use strict’;
//START:DEFINE
const scores =
    new Map([[‘Ruby’, 12], [‘Steven’, 11], [‘Sam’, 15], [‘Robin’, 14]]);
scores.set(‘James’, 14);
console.log(scores.size);
//END:DEFINE

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

Читайте также:  Алгоритмы 101: как использовать алгоритмы на графах

Здесь мы сделали три вещи:

  1. Инициализировал scoresкарту с именами и оценками
  2. Добавил ключ и значение на карту с помощью set()метода (строка 7)
  3. Используется sizeсвойство, чтобы определить, сколько ключей находится на карте (строка 9)

С картами JavaScript мы можем сделать гораздо больше, например:

  • Перебирать карты
  • Инициализировать карты с итеративными объектами
  • Получение элементов с карт по ключу
  • Получить количество элементов на карте
  • Преобразование ключей или значений карты в массивы
  • Вызов обратных вызовов для каждой пары «ключ-значение» в порядке вставки.
  • И т.п.

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

Синтаксис карты JavaScript

Этот синтаксис карты JavaScript выглядит следующим образом:

Синтаксис карты JavaScript

Описание:

  • array: массив, для которого вызывается конкретная функция
  • map: метод вызвал массив с необходимыми параметрами
  • function (currentValue, index, arr): функция со своими параметрами, которая требуется для запуска для каждого элемента в массиве
  • currentValue: значение текущего элемента
  • index: индекс текущего элемента
  • arr: объект массива, на котором map()вызывается
  • thisValue: значение, используемое в качестве thisзначения функции при ее выполнении.

Теперь, когда мы изучили синтаксис, давайте посмотрим на пример реализации map()функции:

//creating an array
var an_array = [5, 3, 1, 4, 2]
//map calls a function with “item” as parameter
//map will pass each element of an_array as “item” in this function
//the function will triple each element passed and return it as the return value
result = an_array.map(function(item) {
    return item*3;
});
//new list will print with the tripled values
console.log(result);

Примечание. Исходный массив карт не меняется.

Методы карты JavaScript и варианты использования

Теперь, когда мы знаем синтаксис карты JavaScript и рассмотрели пример реализации, давайте обсудим некоторые часто используемые методы карты вместе с вариантами их использования.

Инициализировать карту с итерируемым объектом

Map()Конструктор инициализирует карту с Iterable объекта:

let userRoles = new Map( [
    [ruby, ‘director’],
    [steven, ‘producer’],
    [foo, ‘writer’],
    [robin, ‘actress’]
]);

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

get() возвращает значение, сопоставленное определенному ключу:

userRoles.get(robin); // actress

Если вы передадите ключ, которого нет на карте, он вернется как undefined :

let emma = {name: ‘Emma’};
userRoles.get(emma); // undefined

Вернуть логическое значение, показывающее, существует ли указанный ключ

has() возвращает логическое значение, показывающее, существует ли указанный ключ:

userRoles.has(emma); // false
userRoles.has(ruby); // true

Вернуть количество записей на карте

sizeСвойство возвращает количество записей в карте:

console.log(userRoles.size); // 4

Вернуть новый объект итератора, который включает значение каждого элемента

values() возвращает новый объект итератора, который включает значение каждого элемента:

for (let role of userRoles.values()) {
    console.log(role);
}
// director
// producer
// writer
// actress

Удалить указанные элементы из объекта карты

delete() удаляет указанные элементы из объекта карты:

userRoles.delete(ruby);

Удалить все элементы в объекте карты

clear() удаляет все элементы в объекте карты:

userRoles.clear();

Если мы проверим размер, он вернется как ноль:

console.log(userRoles.size); // 0

Более важные методы карты:

  • forEach(callback[, thisArg]): вызывает обратный вызов для каждого значения пары ключей на карте в порядке вставки
  • set(key, value): устанавливает значение ключа в объекте карты.
  • keys(): возвращает новый итератор с ключами для элементов в порядке вставки
  • entries(): перебирает набор ключей и значений
Читайте также:  JSON ответ в JavaScript

Расширенные концепции карты

JavaScript Map- ценный тип коллекций, который делает программирование с помощью JavaScript более чистым и эффективным. Мы узнали о синтаксисе карты, методах и вариантах использования. Теперь вы готовы заняться более сложными концепциями. Вот некоторые рекомендуемые концепции для обсуждения:

  • Метапрограммирование
  • Прототипное наследование
  • Реализация конструкторов
  • Литералы
Оцените статью
bestprogrammer.ru
Добавить комментарий