logo

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 donew Map()>
  • Utwórz mapę i używajMap.set()>

Przykłady mapy JavaScript

nowa mapa()

W tym używamynew Map()>konstruktor,

Przykład: W tym przykładzie mapa o nazwieprices>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 nazwieprices>.

wzorce programowania java
// 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