Mapa JavaScriptu

map() tworzy nową tablicę poprzez wywołanie funkcji dla każdego elementu tablicy. Nie wykonuje funkcji dla pustych elementów ani nie zmienia oryginalnej tablicy. JavaScript Map to zbiór par klucz-wartość, umożliwiający efektywne wyszukiwanie i manipulowanie danymi.

Podczas iteracji obiektu mapy zwraca parę klucz i wartość w tej samej kolejności, w jakiej zostały wstawione. Konstruktor mapy(). służy do tworzenia mapy w JavaScript.

JavaScript Mapa ma właściwość reprezentującą rozmiar mapy.



Przykład:

  Input:  let map1 = new Map([  [1 , 10], [2 , 20] ,  [3, 30],[4, 40]  ]);   console.log('Map1: '); console.log(map1);   Output:  // Map1:  // Map(4) { 1 =>10, 2 => 20, 3 => 30, 4 => 40 } 

Kroki tworzenia mapy

  • Przekazywanie tablicy do new Map()>
  • Utwórz mapę i używaj Map.set()>

Przykłady mapy JavaScript

nowa mapa()

W tym używamy new Map()> konstruktor,

Przykład: W tym przykładzie mapa o nazwie prices> służy do kojarzenia nazw produktów z odpowiadającymi im cenami, co pozwala na efektywne wyszukiwanie i zarządzanie informacjami o cenach.

// Creating a Map for product prices const prices = new Map([   ['Laptop', 1000],  ['Smartphone', 800],  ['Tablet', 400]  ]); 

Mapa.set()

Możesz dodawać elementy do mapy za pomocą set()> metoda.

Przykład: W tym przykładzie Map.set()> metoda służy do dodawania cen produktów do mapy o nazwie prices> .

// Creating a Map for product prices  const prices = new Map();  // Using Map.set() to add product prices   prices.set('Laptop', 1000);   prices.set('Smartphone', 800);  // The Map now contains { 'Laptop' =>1000, 'Smartfon' => 800 } 

Przykład 1: W tym przykładzie utworzymy podstawowy obiekt mapy

JavaScript
let map1 = new Map([  [1, 2],  [2, 3],  [4, 5] ]); console.log('Map1'); console.log(map1); let map2 = new Map([  ['firstname', 'sumit'],  ['lastname', 'ghosh'],  ['website', 'geeksforgeeks'] ]); console.log('Map2'); console.log(map2); 

Wyjście
Map1 Map(3) { 1 =>2, 2 => 3, 4 => 5 } Map2 Mapa(3) { 'imię' => 'sumit', 'nazwisko' => 'ghosh', 'strona internetowa' => 'geeksforgeeks' } 

Przykład 2: Ten przykład dodaje elementy do mapy za pomocą ustawić() metoda.

JavaScript
let map1 = new Map(); map1.set('FirstName', 'Shobhit'); map1.set('LastName', 'Sharma'); map1.set('website', 'techcodeview.com'); console.log(map1); 

Wyjście
Map(3) { 'FirstName' =>'Shobhit', 'LastName' => 'Sharma', 'website' => 'techcodeview.com' } 

Przykład 3: Ten przykład wyjaśnia użycie metod Map, takich jak ma() , Dostawać() , usuwać() , I jasne() .

JavaScript
let map1 = new Map(); map1.set('first name', 'sumit'); map1.set('last name', 'ghosh'); map1.set('website', 'geeksforgeeks')  .set('friend 1','gourav')  .set('friend 2','sourav'); console.log(map1);   console.log('map1 has website ? '+   map1.has('website')); console.log('map1 has friend 3 ? ' +   map1.has('friend 3')); console.log('get value for key website '+  map1.get('website')); console.log('get value for key friend 3 '+  map1.get('friend 3')); console.log('delete element with key website '   + map1.delete('website'));   console.log('map1 has website ? '+   map1.has('website')); console.log('delete element with key website ' +  map1.delete('friend 3')); map1.clear(); console.log(map1); 

Wyjście
Map(5) { 'first name' =>'sumit', 'last name' => 'ghosh', 'website' => 'geeksforgeeks', 'friend 1' => 'gourav', 'friend 2' => 'sourav' } map1 ma stronę internetową? prawda mapa1 ma przyjaciela 3? fałszywy wynik... 

Zalety mapy:

Mapa obiekt dostarczony przez ES6 . Klucz Mapy może wystąpić raz i będzie unikalny w kolekcji mapy. Używanie mapy zamiast obiektu ma niewielkie zalety.

  • Przypadkowe klucze i zabezpieczenia: Żadne domyślne klucze nie są przechowywane, zawierają tylko to, co zostało w nich wyraźnie umieszczone. Dzięki temu jest bezpieczny w użyciu.
  • Typy kluczy i kolejność: Może to być dowolna wartość jako funkcja kluczowa, obiekt dowolny. A kolejność jest prosta, w kolejności wstawiania wpisów.
  • Rozmiar: Ze względu na właściwość rozmiaru mapę można łatwo odzyskać.
  • Wydajność: Każdą operację można wykonać na matematyce z łatwością i w lepszy sposób.
  • Serializacja i parsowanie: Możemy stworzyć własną obsługę serializacji i analizowania dla Map, używając JSON.stringify() I JSON.parse() metody.

Obsługiwane przeglądarki:

  • GoogleChrome
  • Krawędź
  • Firefoksa
  • Opera
  • Safari


Najpopularniejsze Artykuły

Kategoria

Ciekawe Artykuły