JavaScript - Объект Maps

Добро пожаловать, будущие программисты! Сегодня мы окунемся в fascинирующий мир JavaScript Maps. Как ваш доброжелательный соседский учитель информатики, я рад помочь вам в этом путешествии. Так что наденьте свои виртуальные思考ающие шапки, и давайте отправимся в это приключение вместе!

Что такое Map?

Прежде чем мы углубимся в детали, давайте поймем, что такое Map. Представьте, что у вас есть магическая коробка, в которую вы можете положить ключ и Instantly получить соответствующее значение. Именно это и есть Map в JavaScript - это коллекция пар ключ-значение, где и ключи, и значения могут быть любого типа. Круто, правда?

Синтаксис

Основной синтаксис для создания Map довольно прост:

let myMap = new Map();

Здесь мы создаем новый объект Map и присваиваем его переменной myMap. Это как если бы мы открывали ту магическую коробку, о которой мы говорили earlier!

Параметры

При создании Map вы можете optionally передать итерируемый объект (например, массив), содержащий пары ключ-значение:

let myMap = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

В этом примере мы создаем Map с двумя парами ключ-значение с самого начала. Это как если бы мы pre-loading нашу магическую коробку с nějakими сюрпризами!

Свойства Map

Map имеет полезное свойство:

Свойство	Описание
size	Возвращает количество пар ключ-значение в Map

Давайте посмотрим на это в действии:

let myMap = new Map([
  ['apples', 5],
  ['bananas', 3],
  ['oranges', 2]
]);

console.log(myMap.size); // Вывод: 3

В этом фруктовом примере наш Map имеет 3 пары ключ-значение, поэтому size возвращает 3. Это как если бы мы считали, сколько ячеек заполнено в нашей магической коробке!

Методы Map

Map оснащен несколькими полезными методами. Давайте посмотрим на них в таблице:

Метод	Описание
set()	Добавляет новую пару ключ-значение в Map
get()	Возвращает значение, связанное с ключом
has()	Проверяет, существует ли ключ в Map
delete()	Удаляет пару ключ-значение из Map
clear()	Удаляет все пары ключ-значение из Map

Теперь давайте посмотрим на эти методы в действии с примерами!

Метод set()

let petMap = new Map();

petMap.set('dog', 'Buddy');
petMap.set('cat', 'Whiskers');
petMap.set('fish', 'Nemo');

console.log(petMap);
// Вывод: Map(3) { 'dog' => 'Buddy', 'cat' => 'Whiskers', 'fish' => 'Nemo' }

В этом примере мы добавляем домашних животных и их имена в наш Map. Это как если бы мы labeling разные ячейки в нашей магической коробке!

Метод get()

console.log(petMap.get('dog')); // Вывод: Buddy
console.log(petMap.get('elephant')); // Вывод: undefined

Здесь мы получаем значения, используя ключи. Когда мы просим 'dog', мы получаем 'Buddy'. Но когда мы просим 'elephant', который не существует в нашем Map, мы получаем undefined. Это как если бы мы reaching в нашу магическую коробку и либо находили что-то, либо оказывались empty-handed!

Метод has()

console.log(petMap.has('cat')); // Вывод: true
console.log(petMap.has('elephant')); // Вывод: false

Метод has() проверяет, существует ли ключ в нашем Map. Это как если бы мы спрашивали нашу магическую коробку, "У тебя есть ячейка с надписью 'cat'?"

Метод delete()

petMap.delete('fish');
console.log(petMap);
// Вывод: Map(2) { 'dog' => 'Buddy', 'cat' => 'Whiskers' }

Здесь мы удаляем запись 'fish' из нашего Map. Poor Nemo!

Метод clear()

petMap.clear();
console.log(petMap); // Вывод: Map(0) {}

Метод clear() очищает наш entire Map. Это как если бы мы высыпали все из нашей магической коробки!

Конструктор JavaScript Map()

Конструктор Map может создать новый объект Map:

let newMap = new Map();

Вы также можете�始化ать Map с итерируемым объектом:

let initMap = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

Это как если бы мы устанавливали нашу магическую коробку с некоторыми initial ячейками и предметами!

Примеры

Давайте объединим все это в fun пример. Представьте, что мы отслеживаем очки в турнире по видеоиграм:

let gameScores = new Map();

// Добавление очков
gameScores.set('Alice', 1000);
gameScores.set('Bob', 850);
gameScores.set('Charlie', 1200);

console.log(gameScores);
// Вывод: Map(3) { 'Alice' => 1000, 'Bob' => 850, 'Charlie' => 1200 }

// Обновление очков
gameScores.set('Bob', 900);

// Проверка, существует ли игрок
console.log(gameScores.has('David')); // Вывод: false

// Получение очков игрока
console.log(gameScores.get('Charlie')); // Вывод: 1200

// Удаление игрока
gameScores.delete('Alice');

console.log(gameScores);
// Вывод: Map(2) { 'Bob' => 900, 'Charlie' => 1200 }

// Получение количества игроков
console.log(gameScores.size); // Вывод: 2

В этом примере мы используем наш Map как табло. Мы можем легко добавлять игроков, обновлять очки, проверять, существует ли игрок, получать их очки, удалять игроков и проверять, сколько у нас игроков. Это как если бы у нас была магическая доска, которую мы могли бы manipulate с легкостью!

Сравнение Map и Object в JavaScript

Теперь вы можете задаться вопросом: "Почему использовать Map, когда у нас есть Объекты в JavaScript?" Отличный вопрос! Давайте сравним их:

1. Типы ключей: Объекты позволяют только строковые или символьные ключи, в то время как Map позволяет использовать любой тип в качестве ключа (даже объекты!).

2. Порядок: Map поддерживает порядок вставки элементов, в то время как Объекты не гарантируют никакого порядка.

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

4. Производительность: Map показывает лучшую производительность в сценариях, связанных с частыми добавлениями и удалениями пар ключ-значение.

Вот быстрый пример для проиллюстрации:

let obj = {
  'string key': 'string value',
  1: 'number value',
  [{}]: 'object key' // Это на самом деле становится '[object Object]'
};

let map = new Map([
  ['string key', 'string value'],
  [1, 'number value'],
  [{}, 'object key'] // Это работает как预期
]);

console.log(Object.keys(obj).length); // Вывод: 3
console.log(map.size); // Вывод: 3

console.log(obj['[object Object]']); // Вывод: 'object key'
console.log(map.get({})); // Вывод: undefined (потому что это другой объект)

В этом примере мы видим, как Map обрабатывает разные типы ключей более优雅но, чем Объекты. Это как если бы у нас была более гибкая и мощная магическая коробка!

И вот оно, folks! Мы отправились в путешествие по земле JavaScript Maps, от их создания до их манипулирования, и даже сравнили их с их cousin, Объектом. Надеюсь, эта магическая коробка знаний была так же fun для вас, как и для меня. Помните, практика делает perfect, так что не бойтесь экспериментировать с Map в собственном коде. Happy mapping, и пусть ваш код всегда работает без багов!

Credits: Image by storyset