logo

Mapa JavaScript

map() crea una nova matriu a partir de cridar una funció per a cada element de la matriu. No executa la funció per a elements buits ni canvia la matriu original. JavaScript Map és una col·lecció de parells clau-valor que permet una recuperació i manipulació de dades eficients.

En iterar un objecte de mapa retorna la clau i el parell de valors en el mateix ordre que s'han inserit. Constructor de mapes (). s'utilitza per crear un mapa en JavaScript.



JavaScript Mapa té una propietat que representa la mida del mapa.

Exemple:

  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 }>

Passos per crear un mapa



  • Passant una matriu anew Map()>
  • Crear un mapa i utilitzar-loMap.set()>

Exemples de mapa JavaScript

mapa nou()

En això fem servirnew Map()>constructor,

Exemple: En aquest exemple, s'anomena un mapaprices>es crea per associar noms de productes amb els seus respectius preus, permetent una recuperació i una gestió eficients de la informació de preus.

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

Map.set()

Podeu afegir elements a un mapa amb elset()>mètode.



Exemple: En aquest exemple, el Map.set()> s'utilitza el mètode per afegir preus dels productes al mapa anomenatprices>.

// 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, 'Smartphone' => 800 }>>>

Exemple 1: En aquest exemple, crearem un objecte de mapa bàsic

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);>

Sortida 'sumit', 'lastname' => 'ghosh', 'website' => 'geeksforgeeks' }>

Exemple 2: Aquest exemple afegeix elements al mapa utilitzant conjunt() mètode.

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

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

Exemple 3: Aquest exemple explica l'ús de mètodes Map com té () , aconseguir() , suprimir() , i clar () .

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);>

Sortida 'sumit', 'last name' => 'ghosh', 'website' => 'geeksforgeeks', 'friend 1' => 'gourav', 'amic 2' => 'sourav' } map1 té lloc web? veritable map1 té l'amic 3? fals obtenir...>>>

Avantatges del mapa:

Mapa objecte proporcionat per ES6 . Una clau d'un mapa pot aparèixer una vegada, que serà única a la col·lecció del mapa. Hi ha lleugers avantatges en utilitzar un mapa en lloc d'un objecte.

  • Claus accidentals i seguretat: No s'emmagatzema cap clau predeterminada, només conté allò que s'hi posa explícitament. Per això, és segur d'utilitzar.
  • Tipus de clau i ordre: Pot ser qualsevol valor com a funció clau, objectar qualsevol cosa. I l'ordre és senzill en l'ordre d'inserció d'entrada.
  • Mida: A causa de la propietat de mida, un mapa es pot recuperar fàcilment.
  • Rendiment: Qualsevol operació es pot realitzar en matemàtiques tan fàcilment d'una manera millor.
  • Serialització i anàlisi: Podem crear el nostre propi suport de serialització i anàlisi per a Map fent servir JSON.stringify() i JSON.parse() mètodes.

Navegadors compatibles:

  • Google Chrome
  • Edge
  • Firefox
  • Òpera
  • Safari