logo

Mapa de JavaScript

map() crea una nueva matriz llamando a una función para cada elemento de la matriz. No ejecuta la función para elementos vacíos ni cambia la matriz original. JavaScript Map es una colección de pares clave-valor que permite la recuperación y manipulación eficiente de datos.

Al iterar, un objeto de mapa devuelve el par clave y valor en el mismo orden en que se insertó. Constructor de mapa() se utiliza para crear mapas en JavaScript.

javascript Mapa tiene una propiedad que representa el tamaño del mapa.



Ejemplo:

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

Pasos para crear un mapa

  • Pasar una matriz anew Map()>
  • Crear un mapa y utilizarMap.set()>

Ejemplos de mapas de JavaScript

nuevo mapa()

En esto usamosnew Map()>constructor,

Ejemplo: En este ejemplo, un mapa llamadoprices>se crea para asociar nombres de productos con sus respectivos precios, lo que permite una recuperación y gestión eficiente de la información de precios.

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

Mapa.set()

Puedes agregar elementos a un mapa con elset()>método.

Ejemplo: En este ejemplo, el Map.set()> El método se emplea para agregar precios de productos al mapa denominadoprices>.

// 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, 'Teléfono inteligente' => 800 }>

Ejemplo 1: En este ejemplo, crearemos un objeto de mapa básico.

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

Producción
Map1 Map(3) { 1 =>2, 2 => 3, 4 => 5 } Mapa2 Mapa(3) { 'firstname' => 'sumit', 'lastname' => 'ghosh', 'sitio web' => 'geeksforgeeks' }>

Ejemplo 2: Este ejemplo agrega elementos al mapa usando colocar() método.

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

Producción
Map(3) { 'FirstName' =>'Shobhit', 'Apellido' => 'Sharma', 'sitio web' => 'techcodeview.com' }>

Ejemplo 3: Este ejemplo explica el uso de métodos de mapa como tiene() , conseguir() , borrar() , y claro() .

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

Producción
Map(5) { 'first name' =>'sumit', 'apellido' => 'ghosh', 'sitio web' => 'geeksforgeeks', 'amigo 1' => 'gourav', 'amigo 2' => 'sourav' } ¿map1 tiene sitio web? verdadero mapa1 tiene amigo 3? falso obtener...>

Ventajas del mapa:

Mapa objeto proporcionado por ES6 . Una clave de un mapa puede aparecer una vez, lo que será única en la colección del mapa. Existen ligeras ventajas al utilizar un mapa en lugar de un objeto.

  • Claves accidentales y seguridad: No se almacenan claves predeterminadas, solo contienen lo que se incluye explícitamente en ellas. Por eso, es seguro de usar.
  • Tipos de claves y orden: Puede ser cualquier valor como función clave, cualquier objeto. Y el orden es sencillo en el orden de inserción de la entrada.
  • Tamaño: Debido a la propiedad de tamaño, se puede recuperar fácilmente un mapa.
  • Actuación: Cualquier operación matemática se puede realizar mejor y con mayor facilidad.
  • Serialización y análisis: Podemos crear nuestro propio soporte de serialización y análisis para Map usando JSON.stringify() y JSON.parse() métodos.

Navegadores compatibles:

  • Google Chrome
  • Borde
  • Firefox
  • Ópera
  • Safari