Рубрики
Без рубрики

Как использовать коллекции JavaScript – карта и установка

В JavaScript объекты используются для хранения нескольких значений в качестве сложной структуры данных. Объект создается с фигурными скобками {…} и список свойств. Свойство – это пара ключа, где ключ должен быть строкой, а значение может быть любого типа. С другой

Автор оригинала: FreeCodeCamp Community Member.

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

Объект создается с фигурными брекетами {...} и список свойств. Свойство – это пара ключа, где ключ Должно быть строка и ценность может быть любого типа.

С другой стороны, Массивы Заказанная коллекция, которая может хранить данные любого типа. В JavaScript массивы создаются с квадратными кронштейнами [...] и разрешить дублировать элементы.

До ES6 (Ecmascript 2015), JavaScript Объекты и Массивы были самые важные структуры данных для обработки коллекций данных. Сообщество разработчика не было много вариантов за пределами этого. Тем не менее, комбинация объектов и массивов смогла обрабатывать данные во многих сценариях.

Тем не менее, было несколько недостатков,

  • Объектные ключи могут быть только типа строка Отказ
  • Объекты не поддерживают порядок элементов, вставленных в них.
  • Объекты не имеют некоторых полезных методов, что затрудняет их использование в некоторых ситуациях. Например, вы не можете вычислить размер ( длина ) объекта легко. Кроме того, перечисление объекта не так просто.
  • Массивы – это коллекции элементов, которые позволяют дубликаты. Поддерживающие массивы, которые имеют только различные элементы, требуют дополнительной логики и кода.

С введением ES6 мы получили два новых структура данных, которые обращаются к недостаткам, упомянутым выше: Карта и Установить Отказ В этой статье мы будем внимательно посмотрим и понять, как использовать их в разных ситуациях.

Карта в JavaScript

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

Другими словами, Карта имеет характеристики обоих Объект и Массив :

  • Как и объект, он поддерживает структуру пары для значения ключа.
  • Как массив, он помнит порядок вставки.

Как создать и инициализировать карту в JavaScript

Новый Карта Может быть создан так:

const map = new Map();

Который возвращает пустую Карта :

Map(0) {}

Еще один способ создания Карта с начальными значениями. Вот как создать Карта с тремя парными парами:

const freeCodeCampBlog = new Map([
  ['name', 'freeCodeCamp'],
  ['type', 'blog'],
  ['writer', 'Tapas Adhikary'],
]);

Который возвращает Карта с тремя элементами:

Map(3) {"name" => "freeCodeCamp", "type" => "blog", "writer" => "Tapas Adhikary"}

Как добавить значения на карту в JavaScript

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

Установить (ключ, значение) Метод принимает два параметра, ключ и ценность , где ключ и значение могут иметь любой тип, примитивный ( Boolean , String , Номер и т. Д.) Или объект:

// create a map
const map = new Map();

// Add values to the map
map.set('name', 'freeCodeCamp');
map.set('type', 'blog');
map.set('writer', 'Tapas Adhikary');

Выход:

Map(3) {"name" => "freeCodeCamp", "type" => "blog", "writer" => "Tapas Adhikary"}

Обратите внимание, что если вы используете один и тот же ключ, чтобы добавить значение на Карта Несколько раз он всегда заменит предыдущее значение:

// Add a different writer
map.set('writer', 'Someone else!');

Таким образом, вывод будет:

Map(3) 
{"name" => "freeCodeCamp", "type" => "blog", "writer" => "Someone else!"}

Как получить значения из карты в JavaScript

Чтобы получить значение от Карта Используйте Получить (ключ) Метод:

map.get('name'); // returns freeCodeCamp

Все о клавишах карты в JavaScript

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

// create a Map
const funMap = new Map();

funMap.set(360, 'My House Number'); // number as key
funMap.set(true, 'I write blogs!'); // boolean as key

let obj = {'name': 'tapas'}
funMap.set(obj, true); // object as key

console.log(funMap);

Вот выход:

Map(3) 
{
  360 => "My House Number", 
  true => "I write blogs!", 
  {…} => true
}

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

// Create an empty object
const funObj = {};

// add a property. Note, passing the key as a number.
funObj[360] = 'My House Number';

// It returns true because the number 360 got converted into the string '360' internally!
console.log(funObj[360] === funObj['360']);

Свойства карты и методы в JavaScript

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

  • Используйте Размер Недвижимость, чтобы узнать, сколько элементов в Карта :
  • Ищите элемент с имеет (ключ) Метод:
  • Удалите элемент с Удалить (ключ) Метод:
  • Используйте Очистить () Способ удаления всех элементов из Карта сразу:
console.log('size of the map is', map.size);
// returns true, if map has an element with the key, 'John'
console.log(map.has('John')); 


// returns false, if map doesn't have an element with the key, 'Tapas'
console.log(map.has('Tapas')); 
map.delete('Sam'); // removes the element with key, 'Sam'.
// Clear the map by removing all the elements
map.clear(); 

map.size // It will return, 0

Mapiterator: клавиши (), значения () и записи () в JavaScript

Методы Клавиши () , Значения () и Записи () Методы вернуть Mapiterator , что отлично, потому что вы можете использовать для или foreach петли прямо на нем.

Во-первых, создайте простой Карта :

const ageMap = new Map([
  ['Jack', 20],
  ['Alan', 34],
  ['Bill', 10],
  ['Sam', 9]
]);
  • Получите все ключи:
  • Получите все значения:
  • Получите все записи (пары ключей):
console.log(ageMap.keys());

// Output:

// MapIterator {"Jack", "Alan", "Bill", "Sam"}
console.log(ageMap.values());

// Output

// MapIterator {20, 34, 10, 9}
console.log(ageMap.entries());

// Output

// MapIterator {"Jack" => 20, "Alan" => 34, "Bill" => 10, "Sam" => 9}

Как повторить на карте в JavaScript

Вы можете использовать либо foreach или для петля, чтобы повториться над Карта :

// with forEach
ageMap.forEach((value, key) => {
   console.log(`${key} is ${value} years old!`);
});

// with for-of
for(const [key, value] of ageMap) {
  console.log(`${key} is ${value} years old!`);
}

Выход будет одинаковым в обоих случаях:

Jack is 20 years old!
Alan is 34 years old!
Bill is 10 years old!
Sam is 9 years old!

Как преобразовать объект на карту в JavaScript

Вы можете столкнуться с ситуацией, когда вам нужно преобразовать объект к Карта -подобная структура. Вы можете использовать метод Записи Объект сделать это:

const address = {
  'Tapas': 'Bangalore',
  'James': 'Huston',
  'Selva': 'Srilanka'
};

const addressMap = new Map(Object.entries(address));

Как преобразовать карту в объект в JavaScript

Если вы хотите сделать обратное, вы можете использовать Preyentries Метод:

Object.fromEntries(map)

Как преобразовать карту в массив в JavaScript

Есть пара способов преобразовать карту в массив:

  • Использование Array.rom (карта) :
  • Использование оператора распространения:
const map = new Map();
map.set('milk', 200);
map.set("tea", 300);
map.set('coffee', 500);

console.log(Array.from(map));
console.log([...map]);

Карта против объекта: когда вы должны их использовать?

Карта имеет характеристики обоих объект и массив Отказ Тем не менее, Карта больше похоже на объект чем массив Из-за характера хранения данных в Ключевое значение формат.

Сходство с объектами заканчивается здесь, хотя. Как вы видели, Карта отличается во многих отношениях. Итак, какой из них вы должны использовать, а когда? Как вы решаете?

Использовать Карта когда:

  • Ваши потребности не так просто. Вы можете захотеть создавать ключи, которые представляют собой строки. Хранение объекта в качестве ключа – очень мощный подход. Карта дает вам эту способность по умолчанию.
  • Вам нужна структура данных, где элементы могут быть заказаны. Регулярные объекты не поддерживают порядок их записей.
  • Вы ищете гибкость, не полагаясь на внешнюю библиотеку, как Лодаш. Вы можете в конечном итоге использовать библиотеку, такую как Лодаш, потому что мы не находим методы, как есть (), значения (), удаления (), или недвижимость, такого как размер с регулярным объектом. Карта делает это легко для вас, предоставляя все эти методы по умолчанию.

Используйте объект, когда:

  • У вас нет ни одного из потребностей, перечисленных выше.
  • Вы полагаетесь на Json.parse () как Карта не может быть проанализирован с этим.

Набор в JavaScript

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

А Установить В JavaScript ведет себя так же, как математический набор.

Как создать и инициализировать набор в JavaScript

Новый Установить Может быть создан так:

const set = new Set();
console.log(set);

И вывод будет пустым Установить :

Set(0) {}

Вот как создать Установить С некоторыми начальными значениями:

const fruteSet = new Set(['🍉', '🍎', '🍈', '🍏']);
console.log(fruteSet);

Выход:

Set(4) {"🍉", "🍎", "🍈", "🍏"}

Установить свойства и методы в JavaScript

Установить Имеет методы для добавления элемента к нему, удалите элементы из него, проверьте, существует ли элемент в нем, и полностью очистить его:

  • Используйте Размер Недвижимость, чтобы узнать размер Установить Отказ Возвращает количество элементов в нем:
  • Используйте Добавить (Элемент) Способ добавить элемент к Установить :
set.size
// Create a set - saladSet
const saladSet = new Set();

// Add some vegetables to it
saladSet.add('🍅'); // tomato
saladSet.add('🥑'); // avocado
saladSet.add('🥕'); // carrot
saladSet.add('🥒'); // cucumber

console.log(saladSet);


// Output

// Set(4) {"🍅", "🥑", "🥕", "🥒"}

Я люблю огурцы! Как насчет добавления еще одного?

О нет, я не могу – Установить это коллекция Уникальный Элементы:

saladSet.add('🥒');
console.log(saladSet);

Вывод такой же, как раньше – ничто не добавлено к салатация Отказ

  • Используйте имеет (элемент) Метод поиска, если у нас есть морковь (🥕) или брокколи (🥦) в Установить :
  • Используйте Удалить (элемент) Метод удалить авокадо (🥑) из Установить :
// The salad has a🥕, so returns true
console.log('Does the salad have a carrot?', saladSet.has('🥕'));

// The salad doesn't have a🥦, so returns false
console.log('Does the salad have broccoli?', saladSet.has('🥦'));
saladSet.delete('🥑');
console.log('I do not like 🥑, remove from the salad:', saladSet);

Теперь наш салат Установить составляет:

Set(3) {"🍅", "🥕", "🥒"}
  • Используйте Очистить () Способ удаления всех элементов из Установить :
saladSet.clear();

Как повторить набор в JavaScript

Установить имеет метод под названием Значения () который возвращает Setiterator Чтобы получить все свои ценности:

// Create a Set
const houseNos = new Set([360, 567, 101]);

// Get the SetIterator using the `values()` method
console.log(houseNos.values());

Выход:

SetIterator {360, 567, 101}

Мы можем использовать foreach или для петля на этом, чтобы получить значения.

Интересно, что JavaScript пытается сделать Установить Совместим с Карта Отказ Вот почему мы находим два одинаковых метода, что и Карта , Клавиши () и Записи () Отказ

Как Установить не имеет ключей, Клавиши () Метод возвращает Setiterator Чтобы получить его значения:

console.log(houseNos.keys());

// Output

// console.log(houseNos.keys());

С Карта , Записи () Метод возвращает итератор для получения пар клавишных значений. Снова нет ключей в Установить Итак, Записи () Возвращает Setiterator Чтобы получить пары значения значений:

console.log(houseNos.entries());

// Output

// SetIterator {360 => 360, 567 => 567, 101 => 101}

Как перечислять набор в JavaScript

Мы можем перечислить набор, используя foreach и для петли:

// with forEach

houseNos.forEach((value) => {
   console.log(value);
});


// with for-of

for(const value of houseNos) {
   console.log(value);
 }

Выход обоих есть:

360
567
101

Наборы и массивы в JavaScript

Массив, как Установить , позволяет добавлять и удалять элементы. Но Установить совсем другое и не предназначено для замены массивов.

Основная разница между массивом и Установить это то, что массивы позволяют вам иметь дублирующие элементы. Также некоторые из Установить Операции, такие как Удалить () быстрее, чем операции массива, такие как Shift () или Сращивание () Отказ

Думать о Установить как расширение регулярного массива, просто с большей мышц. Установить Структура данных не является заменой массив Отказ Оба могут решать интересные проблемы.

Как конвертировать набор в массив в JavaScript

Преобразование Установить в массив простой:

const arr = [...houseNos];
console.log(arr);

Уникальные значения из массива, используя набор в JavaScript

Создание Установить Это действительно простой способ удаления дубликатовных значений из массива:

// Create a mixedFruit array with a few duplicate fruits
const mixedFruit = ['🍉', '🍎', '🍉', '🍈', '🍏', '🍎', '🍈'];

// Pass the array to create a set of unique fruits
const mixedFruitSet = new Set(mixedFruit);

console.log(mixedFruitSet);

Выход:

Set(4) {"🍉", "🍎", "🍈", "🍏"}

Набор и объект в JavaScript

А Установить Может иметь элементы любого типа, даже объекты:

// Create a person object
const person = {
   'name': 'Alex',
   'age': 32
 };

// Create a set and add the object to it
const pSet = new Set();
pSet.add(person);
console.log(pSet);

Выход:

Здесь нет удивления – Установить Содержит один элемент, который является объектом.

Давайте изменим свойство объекта и добавьте его в комплект снова:

// Change the name of the person
person.name = 'Bob';

// Add the person object to the set again
pSet.add(person);
console.log(pSet);

Как вы думаете, что вывод будет? Два человек объекты или только один?

Вот выход:

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

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

Использовать Установить Когда вам нужно поддерживать различный набор данных для выполнения заданных операций, например Союз , Пересечение , Разница , и так далее.

В итоге

Вот репозиторий GitHub, чтобы найти весь исходный код, используемый в этой статье. Если вы нашли это полезным, пожалуйста, покажите свою поддержку, давая ей звезду: https://github.com/atapas/js-collections-map-set.

Вы также можете понравиться некоторые из моих других статей:

Если эта статья была полезна, пожалуйста, поделитесь этим, чтобы другие могли прочитать его также. Вы можете у меня в Twitter ( @tapasadhary ) с комментариями или не стесняйтесь следовать за мной.