10 metod mapowania JavaScript, które powinieneś dziś opanować

Mapa JavaScript to kolekcja, która przechowuje każdy z jej elementów jako parę klucz-wartość. Ten typ danych jest również nazywany tablicą asocjacyjną lub słownikiem.

Jako klucza lub wartości można użyć dowolnego typu danych (elementów podstawowych i obiektów). Obiekt Map zapamiętuje pierwotną kolejność wstawiania, chociaż zazwyczaj dostęp do wartości uzyskuje się za pomocą ich klucza.

W tym artykule dowiesz się o dziesięciu metodach map JavaScript, które powinieneś już dziś opanować.

1. Jak stworzyć nową mapę w JavaScript

Możesz utworzyć nowy obiekt mapy, używając Mapa() konstruktor. Ten konstruktor akceptuje jeden parametr: iterowalny obiekt, którego elementy są parami klucz-wartość.

niech mapObj = new Mapa([
[1966, „Batman: film”],
[1989, „Batman”],
[1992, „Powrót Batmana”],
[1995, „Batman na zawsze”],
[2005, „Batman zaczyna”],
[2008, „Mroczny rycerz”],
[2012, „Mroczny rycerz powstaje”]
]);
console.log (mapObj);

Wyjście:

mapa (7) {
1966 => 'Batman: Film',
1989 => 'Batman',
1992 => 'Powrót Batmana',





instagram viewer


1995 => 'Batman na zawsze',
2005 => 'Batman zaczyna',
2008 => 'Mroczny Rycerz',
2012 => „Mroczny rycerz powstaje”
}

Jeśli nie podasz parametru, JavaScript utworzy nową pustą mapę.

niech mapObj = new Map();
console.log (mapObj);

Wyjście:

Mapa (0) {}

Jeśli spróbujesz utworzyć mapę ze zduplikowanymi kluczami, każdy powtórzony klucz zastąpi poprzednią wartość nową wartością.

niech mapObj = new Mapa([
['klucz1', 'wartość1'],
['klucz2', 'wartość2'],
['klucz2', 'nowaWartość2']
]);
console.log (mapObj);

Wyjście:

mapa (2) {
'klucz1' => 'wartość1',
'klucz2' => 'nowaWartość2'
}

Tutaj wartość przechowywana przeciwko klawisz2 kluczem jest nowaWartość2, a nie wcześniej wartość2.

Możesz również utworzyć obiekt Map, który będzie zawierał pary klucz-wartość przy użyciu mieszanych typów danych.

niech mapObj = new Mapa([
["ciąg1", 1],
[2, „ciąg2”],
["ciąg3", 433.234],
[23.56, 45]
]);
console.log (mapObj);

Wyjście:

mapa (4) {
'ciąg1' => 1,
2 => 'ciąg2',
'ciąg3' => 433,234,
23.56 => 45
}

2. Dodaj nowe elementy do obiektu mapy

Możesz dodać nowy element do obiektu Map za pomocą ustawić() metoda. Ta metoda akceptuje klucz i wartość, a następnie dodaje nowy element do obiektu Map. Metoda następnie zwraca nowy obiekt Map z dodaną wartością. Jeśli klucz już istnieje w mapie, nowa wartość zastąpi istniejącą wartość.

niech mapObj = new Map();
mapObj.set (1966, Batman: film);
mapObj.set (1989, 'Batman');
mapObj.set (1992, Powrót Batmana);
mapObj.set (1995, „Batman Forever”);
console.log (mapObj);

Wyjście:

mapa (4) {
1966 => 'Batman: Film',
1989 => 'Batman',
1992 => 'Powrót Batmana',
1995 => 'Batman na zawsze'
}

Możesz także użyć zmiennych lub stałych jako kluczy lub wartości:

const rok1 = 1966;
const movieName1 = 'Batman: Film';
niech rok2 = 1989;
var movieName2 = 'Batman';
niech mapObj = new Map();
mapObj.set (rok1, nazwa_filmu1);
mapObj.set (rok2, nazwa_filmu2);
console.log (mapObj);

Wyjście:

mapa (2) {
1966 => 'Batman: Film',
1989 => 'Batman'
}

ten ustawić() metoda obsługuje tworzenie łańcuchów.

niech mapObj = new Map();
mapObj.set (1966, "Batman: film")
.set (1989, 'Batman')
.set (1992, Powrót Batmana)
.set (1995, „Batman na zawsze”);
console.log (mapObj);

Wyjście:

mapa (4) {
1966 => 'Batman: Film',
1989 => 'Batman',
1992 => 'Powrót Batmana',
1995 => 'Batman na zawsze'
}

3. Usuń wszystkie elementy z obiektu mapy

Możesz usunąć wszystkie elementy z obiektu mapy za pomocą jasne() metoda. Ta metoda zawsze zwraca nieokreślony.

niech mapObj = new Mapa([
[1966, „Batman: film”],
[1989, „Batman”]
]);
console.log("Rozmiar obiektu Map: " + mapObj.size);
console.log (mapObj);
obiekt mapy.clear();
console.log("Rozmiar obiektu Map po wyczyszczeniu elementów: " + mapObj.size);
console.log (mapObj);

Wyjście:

Rozmiar obiektu Mapa: 2
Mapa (2) { 1966 => 'Batman: Film', 1989 => 'Batman' }
Rozmiar obiektu Map po wyczyszczeniu elementów: 0
Mapa (0) {}

4. Usuń określony element z mapy

Możesz usunąć określony element z obiektu mapy, używając kasować() metoda. Ta metoda akceptuje klucz elementu do usunięcia z mapy. Jeśli klucz istnieje, metoda zwraca prawda. W przeciwnym razie wraca fałszywe.

niech mapObj = new Mapa([
[1966, „Batman: film”],
[1989, „Batman”]
]);
console.log("Początkowa mapa: ");
console.log (mapObj);
mapObj.delete (1966);
console.log("Mapa po usunięciu elementu posiadającego klucz jako 1966");
console.log (mapObj);

Wyjście:

Początkowa mapa:
Mapa (2) { 1966 => 'Batman: Film', 1989 => 'Batman' }
Mapa po skasowaniu elementu posiadającego klucz jako 1966
Mapa (1) { 1989 => 'Batman' }

5. Sprawdź, czy element istnieje na mapie

Możesz sprawdzić, czy element istnieje w obiekcie mapy, używając ma() metoda. Ta metoda akceptuje klucz elementu jako parametr do testowania obecności w obiekcie Map. Ta metoda zwraca prawda jeśli klucz istnieje. W przeciwnym razie wraca fałszywe.

niech mapObj = new Mapa([
[1966, „Batman: film”],
[1989, „Batman”],
[1992, „Powrót Batmana”],
[1995, „Batman na zawsze”],
[2005, „Batman zaczyna”],
[2008, „Mroczny rycerz”],
[2012, „Mroczny rycerz powstaje”]
]);
console.log (mapObj.has (1966));
console.log (mapObj.has (1977));

Wyjście:

prawda
fałszywe

Element z kluczem 1966 istnieje w obiekcie Map, więc zwrócona metoda prawda. Ale skoro nie ma elementu z kluczem 1977 w obiekcie Map zwrócona metoda fałszywe od drugiego połączenia.

Związane z: Co to jest JavaScript i jak działa?

6. Dostęp do wartości dla określonego klucza

ten dostwać() Metoda zwraca określony element z obiektu Map. Ta metoda akceptuje klucz elementu jako parametr. Jeśli klucz istnieje w obiekcie Map, metoda zwraca wartość elementu. W przeciwnym razie wraca nieokreślony.

niech mapObj = new Mapa([
[1966, „Batman: film”],
[1989, „Batman”],
[1992, „Powrót Batmana”],
[1995, „Batman na zawsze”],
[2005, „Batman zaczyna”],
[2008, „Mroczny rycerz”],
[2012, „Mroczny rycerz powstaje”]
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

Wyjście:

Batman: Film
nieokreślony

Element z kluczem 1966 istnieje w obiekcie Map, więc metoda zwróciła wartość elementu. Nie ma elementu z kluczem 1988 w obiekcie Map, więc metoda zwrócona nieokreślony.

7. Uzyskaj dostęp do wpisów na mapie za pomocą iteratora

Według urzędnika Dokumentacja internetowa MDN:

Metoda entry() zwraca nowy obiekt Iterator, który zawiera pary [klucz, wartość] dla każdego elementu w obiekcie Map w kolejności wstawiania. W tym konkretnym przypadku ten obiekt iteratora jest również iterowalny, więc można użyć pętli for-of. Gdy używany jest protokół [Symbol.iterator], zwraca on funkcję, która po wywołaniu zwraca sam iterator.

Możesz uzyskać dostęp do każdego elementu mapy za pomocą tego iteratora i dla...z oświadczenie:

niech mapObj = new Mapa([
[1966, „Batman: film”],
[1989, „Batman”],
[1992, „Powrót Batmana”],
[1995, „Batman na zawsze”],
[2005, „Batman zaczyna”],
[2008, „Mroczny rycerz”],
[2012, „Mroczny rycerz powstaje”]
]);
for (niech wpis mapObj.entries()) {
console.log (wpis);
}

Wyjście:

[ 1966, „Batman: Film” ]
[ 1989, 'Batman' ]
[ 1992, „Powrót Batmana” ]
[ 1995, „Batman na zawsze” ]
[ 2005, „Batman zaczyna” ]
[ 2008, „Mroczny rycerz” ]
[ 2012, „Mroczny rycerz powstaje” ]

Możesz też użyć funkcji destrukcji ES6, aby uzyskać dostęp do każdego klucza i wartości:

niech mapObj = new Mapa([
[1966, „Batman: film”],
[1989, „Batman”],
[1992, „Powrót Batmana”],
[1995, „Batman na zawsze”],
[2005, „Batman zaczyna”],
[2008, „Mroczny rycerz”],
[2012, „Mroczny rycerz powstaje”]
]);
for (let [klucz, wartość] obiektu mapObj.entries()) {
console.log("Klucz: " + klucz + " Wartość: " + wartość);
}

Wyjście:

Klucz: 1966 Wartość: Batman: Film
Klucz: 1989 Wartość: Batman
Klucz: 1992 Wartość: Powrót Batmana
Klucz: 1995 Wartość: Batman na zawsze
Klucz: 2005 Wartość: Początek Batmana
Klucz: 2008 Wartość: Mroczny Rycerz
Klucz: 2012 Wartość: Mroczny Rycerz Powstaje

8. Jak iterować wartości mapy

ten wartości() metoda zwraca an Iterator obiekt, który zawiera wszystkie wartości w Mapie i robi to w kolejności wstawiania.

niech mapObj = new Mapa([
[1966, „Batman: film”],
[1989, „Batman”],
[1992, „Powrót Batmana”]
]);
const obiekt iteratora = obiekt mapy.values();
for (niech wartość iteratorObj) {
console.log (wartość);
}

Wyjście:

Batman: Film
Ordynans
Powrót Batmana

9. Iteruj po klawiszach mapy

ten Klucze() metoda zwraca an Iterator obiekt, który zawiera wszystkie klucze w Mapie i robi to w kolejności wstawiania.

niech mapObj = new Mapa([
[1966, „Batman: film”],
[1989, „Batman”],
[1992, „Powrót Batmana”]
]);
const obiekt iteratora = obiekt mapy.keys();
for (niech klucz iteratorObj) {
console.log (klucz);
}

Wyjście:

1966
1989
1992

Związane z: Funkcje strzałek JavaScript mogą uczynić Cię lepszym programistą

10. Iteruj po elementach na mapie za pomocą wywołania zwrotnego

ten dla każdego() Metoda wywołuje funkcję zwrotną dla każdego elementu obiektu Map. Funkcja callback przyjmuje dwa parametry: klucz i wartość.

funkcja printKeyValue (klucz, wartość) {
console.log("Klucz: " + klucz + " Wartość: " + wartość);
}
niech mapObj = new Mapa([
[1966, „Batman: film”],
[1989, „Batman”],
[1992, „Powrót Batmana”]
]);
mapObj.forEach (printKeyValue);

Wyjście:

Klucz: Batman: Film Wartość: 1966
Klucz: Batman Wartość: 1989
Klucz: Powrót Batmana Wartość: 1992

Teraz wiesz o mapach w JavaScript

Teraz masz wystarczającą wiedzę, aby opanować koncepcję Map w JavaScript. Struktura danych Map jest szeroko stosowana w wielu zadaniach programistycznych. Kiedy już to opanujesz, możesz przejść do innych natywnych obiektów JavaScript, takich jak Zestawy, Tablice i tak dalej.

15 metod macierzy JavaScript, które powinieneś opanować już dziś

Chcesz zrozumieć tablice JavaScript, ale nie możesz się z nimi uporać? Zapoznaj się z naszymi przykładami tablic JavaScript, aby uzyskać wskazówki.

Czytaj dalej

O autorze