1. Home
  2. Статьи
  3. Статьи JS
  4. JS Map/Set
JS Map/Set

Автор: admin

Дата: 13.09.2020 07:40

Map и Set представлены в спецификации JavaScript в ES2015, также известном как ES6.

Они являются итерируемыми структурами. Так же, как String и Array. Это означает, что мы можем использовать for… of для итерации по этим коллекциям и получения доступа к каждому из их элементов.

Set

Set - это в основном набор уникальных значений, которые могут быть любого типа . Это означает, что вы можете поместить любое значение в Set, вы можете смешивать типы внутри Set, как с обычными массивами JavaScript. 

new Set([iterable]);

Если вы не укажете этот параметр или его значение равно null, новый Set будет пустым. Если передается итеративный объект, все его элементы будут добавлены в новый Set . iterable —это то, что мы можем перебирать, и обычно это последовательность или набор элементов. 

let set = new Set([3, 5, true, 'item 4']);

for (let item of set.values()) {
  console.log(item);
}

Поскольку сам Set является итеративным, можно использовать оператор for..of:

let set = new Set([3, 5, true, 'item 4']);

for (let item of set) {
  console.log(item);
}

Как мы уже говорили, значение внутри Set является уникальным . Если мы попытаемся добавить значение, которое уже существует в Set, оно будет просто проигнорировано:

let set = new Set([3, 5, true, 'item 4']);
for (let item of set.values()) {
  console.log(item);
}
console.log('добавим новое значение');
set.add(3);

for (let item of set.values()) {
  console.log(item);
}

Значение 3 не добавится, т.е в консоль выведет каждый элемент 3, 5, true, 'item 4' дважды.

Set имеет очень полезное свойство, называемое size, которое дает нам информацию о количестве значений внутри коллекции.

Наиболее важные методы, присутствующие в экземпляре Set :

  • add(element) - Добавляет новый элемент в Set
  • clear() - удаляет все элементы из Set
  • delete(element) - Удаляет элемент из Set
  • forEach - это как классический цикл forEach для массива
  • has(value) - возвращает true, если коллекция содержит данный элемент.
  • toString() - выводит набор объектов
  • values() - возвращает все значения коллекции Set
  • keys() - На самом деле то же, что и values() . Это псевдоним для values() метод. Единственная причина, по которой он существует, - это иметь единый интерфейс для новых типов коллекций в JavaScript.

forEach on Set

Синтаксис:

mySetInstance.forEach(function callback(value1, value2, Set) {
   // некоторый код, который будет запускаться для каждого значения внутри Set
}[, thisArg])

Функция в forEach у Set имеет 3 аргумента: значение value, потом снова то же самое значение value, и только потом целевой объект. Это действительно так, значение появляется в списке аргументов дважды.

Это сделано для совместимости с объектом Map, в котором колбэк forEach имеет 3 аргумента. Выглядит немного странно, но в некоторых случаях может помочь легко заменить Map на Set и наоборот.

Set имеет те же встроенные методы, что и Map

Получить массив из существующего Set Мы можем просто преобразовать Set в Array , используя деструктуризацию:

let set = new Set([9, 15]);
set.add(44);
let arr = [...set];
console.log(arr); // [9, 15, 44]

Получите уникальные значения из массива с помощью Set, что означает, что у нее не может быть дубликатов. Мы только что увидели, как можно получить массив из Set, и прежде, чем увидели, что можем создать набор из массива (или любой итерации). Пример:

let arr = [ 13, 11, 15, 21, 13, 11, 17, 17, 19, 19, 21 ];
let uniqueArray = [...new Set(arr)];
console.log(uniqueArray); // [13, 11, 15, 21, 17, 19]

Это удобно и определенно может быть полезно для фильтрации массивов и получения уникальных значений.

Map

Map в основном представляет собой набор пар key / value.

Map также имеет свойство, называемое size, которое дает нам информацию о количестве key/value внутри коллекции.

В экземпляре Map присутствуют следующие методы :

clear() - удаляет все элементы с Map delete(key) - удаляет элемент с Map forEach - это как классический цикл forEach для массива get(key) - получает элемент для указанного ключа has(key) - возвращает true, если коллекция содержит элемент, имеющий этот ключ keys() - возвращает все ключи коллекции Map set (ключ, значение) - добавляет новый элемент в Map values() - возвращает все значения коллекции Map *toString() - выводит набор объектов

Вот пример создания нового объекта Map :

let map = new Map([['name', 'CodingBlast'], ['points', 33], [true, 55], ['true', 44]])

for (let [key, value] of map.entries()) {
  console.log('key is ' + key + ', value is ' + value);
}

Мы также можем просмотреть список ключей или значений :

for (let key of map.keys()) {
  console.log('key:' + key);
}

for (let value of map.values()) {
  console.log('value:' + value);
}

Они распечатают разные значения:

let map = new Map([['name', 'CodingBlast'], ['points', 33], [true, 55], ['true', 44]])
console.log(map.get(true))
console.log(map.get('true'))

В первой строке будет напечатано 55, а во второй строке - 44, потому что мы предоставили разные ключи.

Мы можем использовать удобный метод Array.from для того, чтобы просто распечатать все ключи или значения данного экземпляра Map:

let map = new Map([['name', 'CodingBlast'], ['points', 33], [true, 55], ['true', 44]])
console.log(Array.from(map.keys()))
console.log(Array.from(map.values()))
console.log(Array.from(map.entries()))

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

Map или объект С Map мы получили несколько удобных встроенных методов, а также свойство size, чтобы легко определить, сколько значений мы храним внутри Map. Вам следует использовать Map, если вы знаете, что будете добавлять к нему значения во время выполнения. Для регулярного доступа и частого обновления записей, вероятно, проще использовать объект или массив. С Map вам нужно использовать пользовательские методы .get() и .set() . Что угодно может быть ключом в Map, тогда как с обычными объектами мы должны использовать строки в качестве ключей. Если мы используем что-то еще в качестве ключа, оно будет преобразовано в строку и затем использовано в качестве ключа. Кроме того, у каждого объекта уже есть некоторые ключи, в то время как экземпляр Map по умолчанию не имеет ключей / значений. Посмотрим на пример:

let obj = {};
console.log(obj['toString'])
console.log(obj['hasOwnProperty'])
console.log(obj['constructor'])

Но, конечно, мы можем использовать встроенный метод hasOwnProperty, чтобы проверить, действительно ли ключ находится на объекте или на одном из прототипов. Также мы обычно используем метод Object.keys() для получения только собственных и перечислимых ключей данного объекта.

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

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

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

Используйте объекты, когда есть логика, которая работает с отдельными элементами.

Комментарии