10 метода за карта на JavaScript, които трябва да овладеете днес

Карта на JavaScript е колекция, която съхранява всеки свой елемент като двойка ключ-стойност. Този тип данни се нарича още асоциативен масив или речник.

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

В тази статия ще научите за десет метода на JavaScript Map, които трябва да овладеете днес.

1. Как да създадете нова карта в JavaScript

Можете да създадете нов обект Карта, като използвате карта() конструктор. Този конструктор приема един параметър: итерируем обект, чиито елементи са двойки ключ-стойност.

нека mapObj = нова карта([
[1966, „Батман: Филмът“],
[1989, 'Батман'],
[1992, 'Батман се завръща'],
[1995, 'Батман завинаги'],
[2005, „Батман започва“],
[2008, 'Тъмният рицар'],
[2012, 'The Dark Knight Rises']
]);
console.log (mapObj);

Изход:

Карта (7) {
1966 => 'Батман: Филмът',
1989 => 'Батман',
1992 => 'Батман се завръща',
1995 => 'Батман завинаги',
2005 => 'Батман започва',
2008 => „Тъмният рицар“,
2012 => „Тъмният рицар се издига“
}

Ако не предоставите параметъра, JavaScript ще създаде нова празна карта.

нека mapObj = нова карта();
console.log (mapObj);

Изход:

Карта (0) {}

Ако се опитате да създадете карта с дублиращи се ключове, всеки повтарящ се ключ ще презапише предишната стойност с новата стойност.

нека mapObj = нова карта([
['ключ1', 'стойност1'],
['ключ2', 'стойност2'],
['ключ2', 'новаСтойност2']
]);
console.log (mapObj);

Изход:

Карта (2) {
'ключ1' => 'стойност1',
'key2' => 'newValue2'
}

Тук стойността, съхранена спрямо ключ2 ключът е нова стойност2, а не по-рано стойност 2.

Можете също да създадете обект Map, който съдържа двойки ключ-стойност, използвайки смесени типове данни.

нека mapObj = нова карта([
["низ1", 1],
[2, "низ2"],
["низ3", 433.234],
[23.56, 45]
]);
console.log (mapObj);

Изход:

Карта (4) {
'string1' => 1,
2 => 'низ2',
'string3' => 433.234,
23.56 => 45
}

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

Можете да добавите нов елемент към обекта Map, като използвате комплект() метод. Този метод приема ключ и стойност, след което добавя нов елемент към обекта Map. След това методът връща новия обект Map с добавената стойност. Ако ключът вече съществува в картата, новата стойност ще замени съществуващата стойност.

нека mapObj = нова карта();
mapObj.set (1966, „Батман: Филмът“);
mapObj.set (1989, 'Батман');
mapObj.set (1992, 'Батман се завръща');
mapObj.set (1995, 'Батман завинаги');
console.log (mapObj);

Изход:

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

Можете също да използвате променливи или константи като ключове или стойности:

постоянна година1 = 1966;
const movieName1 = 'Батман: Филмът';
нека година2 = 1989;
var movieName2 = 'Батман';
нека mapObj = нова карта();
mapObj.set (година1, movieName1);
mapObj.set (година2, movieName2);
console.log (mapObj);

Изход:

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

В комплект() методът поддържа верижно свързване.

нека mapObj = нова карта();
mapObj.set (1966, „Батман: Филмът“)
.set (1989, 'Батман')
.set (1992, „Батман се завръща“)
.set (1995, 'Батман завинаги');
console.log (mapObj);

Изход:

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

3. Премахване на всички елементи от обект на карта

Можете да премахнете всички елементи от обект Map, като използвате изчисти() метод. Този метод винаги се връща неопределено.

нека mapObj = нова карта([
[1966, „Батман: Филмът“],
[1989, "Батман"]
]);
console.log("Размер на обекта Map: " + mapObj.size);
console.log (mapObj);
mapObj.clear();
console.log("Размер на обекта Map след изчистване на елементи: " + mapObj.size);
console.log (mapObj);

Изход:

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

4. Изтриване на конкретен елемент от карта

Можете да премахнете конкретен елемент от обект на карта с помощта на Изтрий() метод. Този метод приема ключа на елемента за изтриване от картата. Ако ключът съществува, методът се връща вярно. В противен случай се връща фалшиво.

нека 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, 'The Dark Knight Rises']
]);
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, 'The Dark Knight Rises']
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

Изход:

Батман: Филмът
неопределено

Елемент с ключ 1966 съществува в обекта Map, така че методът върна стойността на елемента. Няма елемент с ключ 1988 в обекта Map, така че методът се върна неопределено.

7. Достъп до записите на карта чрез итератор

Според длъжностното лице MDN уеб документи:

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

Можете да получите достъп до всеки елемент от картата, като използвате този итератор и a за...от изявление:

нека mapObj = нова карта([
[1966, „Батман: Филмът“],
[1989, 'Батман'],
[1992, 'Батман се завръща'],
[1995, 'Батман завинаги'],
[2005, „Батман започва“],
[2008, 'Тъмният рицар'],
[2012, 'The Dark Knight Rises']
]);
for (нека влизане на mapObj.entries()) {
console.log (вход);
}

Изход:

[ 1966, „Батман: Филмът“ ]
[ 1989, 'Батман' ]
[ 1992, 'Батман се завръща']
[1995, 'Батман завинаги']
[ 2005, „Батман започва“ ]
[ 2008, 'Тъмният рицар' ]
[ 2012, 'The Dark Knight Rises' ]

Или можете да използвате функцията за унищожаване на ES6 за достъп до всеки ключ и стойност:

нека mapObj = нова карта([
[1966, „Батман: Филмът“],
[1989, 'Батман'],
[1992, 'Батман се завръща'],
[1995, 'Батман завинаги'],
[2005, „Батман започва“],
[2008, 'Тъмният рицар'],
[2012, 'The Dark Knight Rises']
]);
for (нека [ключ, стойност] на mapObj.entries()) {
console.log("Ключ: " + ключ + " Стойност: " + стойност);
}

Изход:

Ключ: 1966 Стойност: Батман: Филмът
Ключ: 1989 Стойност: Батман
Ключ: 1992 Стойност: Батман се завръща
Ключ: 1995 Стойност: Батман завинаги
Ключ: 2005 Стойност: Батман започва
Ключ: 2008 Стойност: Тъмният рицар
Ключ: 2012 Стойност: The Dark Knight Rises

8. Как да преглеждате стойностите на картата

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

нека mapObj = нова карта([
[1966, „Батман: Филмът“],
[1989, 'Батман'],
[1992, 'Батман се завръща']
]);
const iteratorObj = mapObj.values();
for (нека стойност на iteratorObj) {
console.log (стойност);
}

Изход:

Батман: Филмът
Батман
Батман се завръща

9. Повторете ключовете на картата

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

нека mapObj = нова карта([
[1966, „Батман: Филмът“],
[1989, 'Батман'],
[1992, 'Батман се завръща']
]);
const iteratorObj = mapObj.keys();
for (нека ключ на iteratorObj) {
console.log (ключ);
}

Изход:

1966
1989
1992

Свързани: Функциите със стрелка на JavaScript могат да ви направят по-добър разработчик

10. Итерирайте елементи в карта с помощта на обратно извикване

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

функция printKeyValue (ключ, стойност) {
console.log("Ключ: " + ключ + " Стойност: " + стойност);
}
нека mapObj = нова карта([
[1966, „Батман: Филмът“],
[1989, 'Батман'],
[1992, 'Батман се завръща']
]);
mapObj.forEach (printKeyValue);

Изход:

Ключ: Батман: Филмът Стойност: 1966
Ключ: Батман Стойност: 1989
Ключ: Batman Returns Value: 1992

Вече знаете за картите в JavaScript

Сега имате достатъчно знания, за да овладеете концепцията за карти в JavaScript. Структурата на данните на картата се използва широко в много задачи по програмиране. След като го овладеете, можете да преминете към други естествени JavaScript обекти като набори, масиви и т.н.

15 метода за масив на JavaScript, които трябва да овладеете днес

Искате да разберете JavaScript масивите, но не можете да се справите с тях? Вижте нашите примери за JavaScript масиви за насоки.

Прочетете Следващото

За автора