logo

Carte JavaScript

map() crée un nouveau tableau en appelant une fonction pour chaque élément du tableau. Il n'exécute pas la fonction pour les éléments vides et ne modifie pas le tableau d'origine. JavaScript Map est une collection de paires clé-valeur, permettant une récupération et une manipulation efficaces des données.

Lors de l'itération d'un objet cartographique, il renvoie la paire clé et valeur dans le même ordre que celui inséré. Constructeur Map() est utilisé pour créer une carte en JavaScript.



Javascript Carte a une propriété qui représente la taille de la carte.

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

Étapes pour créer une carte



  • Passer un tableau ànew Map()>
  • Créez une carte et utilisezMap.set()>

Exemples de cartes JavaScript

nouvelle carte()

En cela, nous utilisonsnew Map()>constructeur,

Exemple: Dans cet exemple, une carte nomméeprices>est créé pour associer les noms de produits à leurs prix respectifs, permettant une récupération et une gestion efficaces des informations sur les prix.

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

Carte.set()

Vous pouvez ajouter des éléments à une carte avec leset()>méthode.



Exemple: Dans cet exemple, le Map.set()> La méthode est utilisée pour ajouter les prix des produits à la carte nomméeprices>.

interface comparable en 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, 'Smartphone' => 800 }>

Exemple 1: Dans cet exemple, nous allons créer un objet cartographique de base

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

Sortir
Map1 Map(3) { 1 =>2, 2 => 3, 4 => 5 } Map2 Map(3) { 'firstname' => 'sumit', 'lastname' => 'ghosh', 'website' => 'geeksforgeeks' }>

Exemple 2 : Cet exemple ajoute des éléments à la carte en utilisant ensemble() méthode.

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

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

Exemple 3 : Cet exemple explique l'utilisation des méthodes Map comme a() , obtenir() , supprimer() , et clair() .

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

Sortir
Map(5) { 'first name' =>'sumit', 'last name' => 'ghosh', 'website' => 'geeksforgeeks', 'friend 1' => 'gourav', 'friend 2' => 'sourav' } map1 a un site web ? true map1 a un ami 3 ? faux obtenir...>

Avantages de la carte :

Carte objet fourni par ES6 . Une clé d’une carte peut apparaître une seule fois, qui sera unique dans la collection de la carte. Il y a de légers avantages à utiliser une carte plutôt qu’un objet.

  • Clés accidentelles et sécurité : Aucune clé par défaut n'est stockée, contient uniquement ce qui y est explicitement mis. Pour cette raison, son utilisation est sûre.
  • Types de clés et ordre : Il peut s'agir de n'importe quelle valeur en tant que fonction clé, objet n'importe quoi. Et l'ordre est simple dans l'ordre d'insertion des entrées.
  • Taille: Grâce à la propriété size, une carte peut être facilement récupérée.
  • Performance: Toute opération mathématique peut être effectuée si facilement et de manière plus efficace.
  • Sérialisation et analyse : Nous pouvons créer notre propre support de sérialisation et d'analyse pour Map en utilisant JSON.stringify() et JSON.parse() méthodes.

Navigateurs pris en charge :

  • Google Chrome
  • Bord
  • Firefox
  • Opéra
  • Safari