10 методов карты JavaScript, которые вы должны освоить сегодня

Карта JavaScript - это коллекция, в которой каждый из своих элементов хранится в виде пары ключ-значение. Этот тип данных также называется ассоциативным массивом или словарем.

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

В этой статье вы узнаете о десяти методах JavaScript Map, которые вам следует освоить сегодня.

1. Как создать новую карту на JavaScript

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

пусть mapObj = новая карта ([
[1966, 'Бэтмен: Фильм'],
[1989, «Бэтмен»],
[1992, «Бэтмен возвращается»],
[1995, «Бэтмен навсегда»],
[2005, «Бэтмен: Начало»],
[2008, «Темный рыцарь»],
[2012, «Темный рыцарь: восстание»]
]);
console.log (mapObj);

Выход:

Карта (7) {
1966 => 'Бэтмен: Фильм',
1989 => "Бэтмен",
1992 => "Бэтмен возвращается",





instagram viewer


1995 => "Бэтмен навсегда",
2005 => "Бэтмен: Начало",
2008 => 'Темный рыцарь',
2012 => 'Темный рыцарь: восстание'
}

Если вы не укажете параметр, JavaScript создаст новую пустую карту.

пусть mapObj = new Map ();
console.log (mapObj);

Выход:

Карта (0) {}

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

пусть mapObj = новая карта ([
['ключ1', 'значение1'],
['ключ2', 'значение2'],
['key2', 'newValue2']
]);
console.log (mapObj);

Выход:

Карта (2) {
'key1' => 'значение1',
'key2' => 'newValue2'
}

Здесь значение, сохраненное против key2 ключ newValue2, не раньше значение2.

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

пусть mapObj = новая карта ([
["строка1", 1],
[2, "строка2"],
["строка3", 433.234],
[23.56, 45]
]);
console.log (mapObj);

Выход:

Карта (4) {
'строка1' => 1,
2 => 'строка2',
'строка3' => 433,234,
23.56 => 45
}

2. Добавление новых элементов в объект карты

Вы можете добавить новый элемент в объект Map, используя установленный() метод. Этот метод принимает ключ и значение, а затем добавляет новый элемент в объект Map. Затем метод возвращает новый объект Map с добавленным значением. Если ключ уже существует на карте, новое значение заменит существующее значение.

пусть mapObj = new Map ();
mapObj.set (1966, «Бэтмен: фильм»);
mapObj.set (1989, «Бэтмен»);
mapObj.set (1992, «Бэтмен возвращается»);
mapObj.set (1995, «Бэтмен навсегда»);
console.log (mapObj);

Выход:

Карта (4) {
1966 => 'Бэтмен: Фильм',
1989 => "Бэтмен",
1992 => "Бэтмен возвращается",
1995 => 'Бэтмен навсегда'
}

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

const year1 = 1966;
const movieName1 = 'Бэтмен: фильм';
пусть year2 = 1989;
var movieName2 = 'Бэтмен';
пусть mapObj = new Map ();
mapObj.set (год1, имя фильма1);
mapObj.set (год2, movieName2);
console.log (mapObj);

Выход:

Карта (2) {
1966 => 'Бэтмен: Фильм',
1989 => "Бэтмен"
}

В установленный() поддерживает цепочку.

пусть mapObj = new Map ();
mapObj.set (1966, Бэтмен: Фильм)
.set (1989, "Бэтмен")
.set (1992, "Бэтмен возвращается")
.set (1995, «Бэтмен навсегда»);
console.log (mapObj);

Выход:

Карта (4) {
1966 => 'Бэтмен: Фильм',
1989 => "Бэтмен",
1992 => "Бэтмен возвращается",
1995 => 'Бэтмен навсегда'
}

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

Вы можете удалить все элементы из объекта Map, используя Чисто() метод. Этот метод всегда возвращает неопределенный.

пусть mapObj = новая карта ([
[1966, 'Бэтмен: Фильм'],
[1989, «Бэтмен»]
]);
console.log ("Размер объекта карты:" + mapObj.size);
console.log (mapObj);
mapObj.clear ();
console.log («Размер объекта Map после очистки элементов:» + mapObj.size);
console.log (mapObj);

Выход:

Размер объекта карты: 2
Карта (2) {1966 => 'Бэтмен: Фильм', 1989 => 'Бэтмен'}
Размер объекта Map после очистки элементов: 0
Карта (0) {}

4. Удаление определенного элемента с карты

Вы можете удалить определенный элемент из объекта Map с помощью удалять() метод. Этот метод принимает ключ элемента, который нужно удалить с карты. Если ключ существует, метод возвращает правда. В противном случае возвращается ложный.

пусть mapObj = новая карта ([
[1966, 'Бэтмен: Фильм'],
[1989, «Бэтмен»]
]);
console.log ("Начальная карта:");
console.log (mapObj);
mapObj.delete (1966);
console.log ("Карта после удаления элемента с ключом 1966");
console.log (mapObj);

Выход:

Начальная карта:
Карта (2) {1966 => 'Бэтмен: Фильм', 1989 => 'Бэтмен'}
Карта после удаления элемента с ключом 1966
Карта (1) {1989 => 'Бэтмен'}

5. Проверьте, существует ли элемент на карте

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

пусть mapObj = новая карта ([
[1966, 'Бэтмен: Фильм'],
[1989, «Бэтмен»],
[1992, «Бэтмен возвращается»],
[1995, «Бэтмен навсегда»],
[2005, «Бэтмен: Начало»],
[2008, «Темный рыцарь»],
[2012, «Темный рыцарь: восстание»]
]);
console.log (mapObj.has (1966));
console.log (mapObj.has (1977));

Выход:

правда
ложный

Элемент с ключом 1966 существует в объекте Map, поэтому метод вернул правда. Но поскольку нет элемента с ключом 1977 в объекте Map возвращенный метод ложный со второго звонка.

Связанный: Что такое JavaScript и как он работает?

6. Доступ к значению для определенного ключа

В получать() Метод возвращает определенный элемент из объекта Map. Этот метод принимает ключ элемента в качестве параметра. Если ключ существует в объекте Map, метод возвращает значение элемента. В противном случае возвращается неопределенный.

пусть mapObj = новая карта ([
[1966, 'Бэтмен: Фильм'],
[1989, «Бэтмен»],
[1992, «Бэтмен возвращается»],
[1995, «Бэтмен навсегда»],
[2005, «Бэтмен: Начало»],
[2008, «Темный рыцарь»],
[2012, «Темный рыцарь: восстание»]
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

Выход:

Бэтмен: Фильм
неопределенный

Элемент с ключом 1966 существует в объекте Map, поэтому метод вернул значение элемента. Нет элемента с ключом 1988 в объекте Map, поэтому метод вернул неопределенный.

7. Доступ к записям карты через итератор

По официальной Веб-документы MDN:

Метод entries () возвращает новый объект Iterator, который содержит пары [ключ, значение] для каждого элемента в объекте Map в порядке вставки. В этом конкретном случае этот объект-итератор также является итеративным, поэтому можно использовать цикл for-of. Когда используется протокол [Symbol.iterator], он возвращает функцию, которая при вызове возвращает сам этот итератор.

Вы можете получить доступ к каждому элементу карты, используя этот итератор и для... из утверждение:

пусть mapObj = новая карта ([
[1966, 'Бэтмен: Фильм'],
[1989, «Бэтмен»],
[1992, «Бэтмен возвращается»],
[1995, «Бэтмен навсегда»],
[2005, «Бэтмен: Начало»],
[2008, «Темный рыцарь»],
[2012, «Темный рыцарь: восстание»]
]);
for (пусть запись mapObj.entries ()) {
console.log (запись);
}

Выход:

[1966, «Бэтмен: фильм»]
[1989, «Бэтмен»]
[1992, "Бэтмен возвращается"]
[1995, «Бэтмен навсегда»]
[2005, "Бэтмен: Начало"]
[2008, «Темный рыцарь»]
[2012, «Темный рыцарь: восстание»]

Или вы можете использовать функцию деструктивного присваивания ES6 для доступа к каждому ключу и значению:

пусть mapObj = новая карта ([
[1966, 'Бэтмен: Фильм'],
[1989, «Бэтмен»],
[1992, «Бэтмен возвращается»],
[1995, «Бэтмен навсегда»],
[2005, «Бэтмен: Начало»],
[2008, «Темный рыцарь»],
[2012, «Темный рыцарь: восстание»]
]);
for (let [ключ, значение] mapObj.entries ()) {
console.log («Ключ:» + ключ + «Значение:» + значение);
}

Выход:

Ключ: 1966 г. Значение: Бэтмен: Фильм
Ключ: 1989 г. Значение: Бэтмен
Ключ: 1992 Значение: Бэтмен возвращается
Ключ: 1995 г. Значение: Бэтмен навсегда
Ключ: Значение 2005 года: Бэтмен: начало
Ключ: 2008 Ценность: Темный рыцарь
Ключ: 2012 Value: The Dark Knight Rises

8. Как перебирать значения карты

В ценности() метод возвращает Итератор объект, содержащий все значения в карте, и делает это в порядке вставки.

пусть mapObj = новая карта ([
[1966, 'Бэтмен: Фильм'],
[1989, «Бэтмен»],
[1992, "Бэтмен возвращается"]
]);
const iteratorObj = mapObj.values ​​();
for (пусть значение iteratorObj) {
console.log (значение);
}

Выход:

Бэтмен: Фильм
Бэтмен
Бэтмен возвращается

9. Перебрать ключи карты

В ключи () метод возвращает Итератор объект, содержащий все ключи в карте, и делает это в порядке вставки.

пусть mapObj = новая карта ([
[1966, 'Бэтмен: Фильм'],
[1989, «Бэтмен»],
[1992, "Бэтмен возвращается"]
]);
const iteratorObj = mapObj.keys ();
for (пусть ключ iteratorObj) {
console.log (ключ);
}

Выход:

1966
1989
1992

Связанный: Стрелочные функции JavaScript могут сделать вас лучшим разработчиком

10. Обход элементов карты с помощью обратного вызова

В для каждого() вызывает функцию обратного вызова для каждого элемента объекта Map. Функция обратного вызова принимает два параметра: ключ и значение.

function printKeyValue (ключ, значение) {
console.log («Ключ:» + ключ + «Значение:» + значение);
}
пусть mapObj = новая карта ([
[1966, 'Бэтмен: Фильм'],
[1989, «Бэтмен»],
[1992, "Бэтмен возвращается"]
]);
mapObj.forEach (printKeyValue);

Выход:

Ключ: Бэтмен: фильм Значение: 1966
Ключ: Бэтмен Значение: 1989
Ключ: Бэтмен. Возвращенная стоимость: 1992 г.

Теперь вы знаете о картах на JavaScript

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

15 методов массива JavaScript, которые вы должны освоить сегодня

Хотите разобраться в массивах JavaScript, но не можете с ними разобраться? Ознакомьтесь с нашими примерами массивов JavaScript для руководства.

Читать далее

Об авторе