Metody Map w JavaScript

metody new Map()

Można to zrobić, przekazując tablicę do new Map() Konstruktor do tworzenia Map:

instancja

// Tworzenie Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

Spróbuj sam

Map.get()

Można użyć get() Metoda pobiera wartość klucza z Map:

instancja

fruits.get("apples");

Spróbuj sam

Map.set()

Można użyć set() Metoda dodaje element do Map:

instancja

// Tworzenie Map
const fruits = new Map();
// ustaw wartości Map
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

Spróbuj sam

set() Metoda może również być używana do zmiany istniejącej wartości Map:

instancja

fruits.set("apples", 500);

Spróbuj sam

Map.size

size Atrybut zwraca liczbę elementów w Map:

instancja

fruits.size;

Spróbuj sam

Map.delete()

delete() Metoda usuwa jeden element z Map:

instancja

fruits.delete("apples");

Spróbuj sam

Map.clear()

clear() Metoda usuwa wszystkie elementy z Map:

instancja

fruits.clear();

Spróbuj sam

Map.has()

Jeśli w Map istnieje pewien klucz:has() Metoda zwraca true:

instancja

fruits.has("apples");

Spróbuj sam

Spróbuj poniższego kodu:

fruits.delete("apples");
fruits.has("apples");

Spróbuj sam

Map.forEach()

forEach() Metoda wywołuje funkcję zwrotną dla każdego pary klucz-wartość w Map:

instancja

// wyświetl wszystkie wpisy
let text = "";
fruits.forEach(function(value, key) {
  text += key + ' = ' + value;
});

Spróbuj sam

Map.entries()

entries() Metoda zwraca obiekt zawierający klucz [key, value] obiekt iteratora:

instancja

// wyświetl wszystkie wpisy
let text = "";
for (const x of fruits.entries()) {
  text += x;
}

Spróbuj sam

Map.keys()

keys() Metoda zwraca obiekt iteratora zawierający klucze Map:

instancja

// wyświetl wszystkie klucze
let text = "";
for (const x of fruits.keys()) {
  text += x;
}

Spróbuj sam

Map.values()}

values() metoda zwraca obiekt iteratora zawierający wartości z Map:

instancja

// Wyświetlanie wszystkich wartości
let text = "";
for (const x of fruits.values()) {
  text += x;
}

Spróbuj sam

Można użyć values() metoda sumuje wartości w Map:

instancja

// Sumowanie wszystkich wartości
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

Spróbuj sam

Obiekty jako klucze

Wskazówka:Możliwość użycia obiektów jako kluczy to ważna cecha Map.

instancja

// Tworzenie obiektów
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Tworzenie Map
const fruits = new Map();
// Dodawanie nowych elementów do Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

Spróbuj sam

Uwaga:klucz to obiekt (apples), a nie ciąg znaków ("apples"):

instancja

fruits.get("apples"); // Zwraca undefined

Spróbuj sam

JavaScript Map.groupBy()

ES2024 dodał do JavaScript Map.groupBy() metoda.

Map.groupBy() metoda grupuje elementy obiektu na podstawie wartości zwróconej przez funkcję zwrotną.

Map.groupBy() metoda nie zmienia oryginalnego obiektu.

instancja

// Tworzenie tablicy
const fruits = [
  {name: "apples", quantity: 300},
  {name: "bananas", quantity: 500},
  {name: "oranges", quantity: 200},
  {name: "kiwi", quantity: 150}
];
// Funkcja zwrotna do grupowania
function myCallback({ quantity }) {
  zwróć quantity > 200 ? "ok" : "niski";
}
// Grupowanie według liczby
const wynik = Map.groupBy(fruits, myCallback);

Spróbuj sam

Wsparcie przeglądarek

Map.groupBy() To cecha ES2024.

Od marca 2024 roku nowe przeglądarki wspierają tę cechę:

Różnica między Object.groupBy() a Map.groupBy()

Object.groupBy() i Map.groupBy() Różnica polega na:

Object.groupBy() Grupowanie elementów do obiektu JavaScript.

Map.groupBy() Grupowanie elementów do obiektu Map.

Pełny podręcznik Map

Aby uzyskać pełną referencję, odwiedź naszą:Podręcznik JavaScript Map.

Ten podręcznik zawiera opisy i przykłady wszystkich właściwości i metod Map.