10 métodos de mapas de JavaScript que debe dominar hoy

Un mapa de JavaScript es una colección que almacena cada uno de sus elementos como un par clave-valor. Este tipo de datos también se conoce como matriz asociativa o diccionario.

Puede utilizar cualquier tipo de datos (primitivas y objetos) como clave o valor. El objeto Mapa recuerda el orden original de inserción, aunque normalmente accederá a los valores por su clave.

En este artículo, aprenderá acerca de diez métodos de mapas de JavaScript que debe dominar hoy.

1. Cómo crear un nuevo mapa en JavaScript

Puede crear un nuevo objeto Mapa utilizando el Mapa() constructor. Este constructor acepta un parámetro: un objeto iterable cuyos elementos son pares clave-valor.

let mapObj = new Map ([
[1966, 'Batman: La película'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman para siempre'],
[2005, 'Batman Begins'],
[2008, 'El caballero de la noche'],
[2012, 'El caballero de la noche asciende']
]);
console.log (mapObj);

Producción:

Mapa (7) {
1966 => 'Batman: La película',
1989 => 'Batman',
1992 => 'Batman regresa',





instagram viewer


1995 => 'Batman para siempre',
2005 => 'Batman comienza',
2008 => 'El Caballero Oscuro',
2012 => 'El caballero de la noche asciende'
}

Si no proporciona el parámetro, JavaScript creará un nuevo mapa vacío.

let mapObj = new Map ();
console.log (mapObj);

Producción:

Mapa (0) {}

Si intenta crear un mapa con claves duplicadas, cada clave repetida sobrescribirá el valor anterior con el nuevo valor.

let mapObj = new Map ([
['clave1', 'valor1'],
['clave2', 'valor2'],
['key2', 'newValue2']
]);
console.log (mapObj);

Producción:

Mapa (2) {
'clave1' => 'valor1',
'key2' => 'newValue2'
}

Aquí, el valor almacenado contra el key2 la clave es newValue2, no el anterior valor2.

También puede crear un objeto Map que contenga pares clave-valor utilizando tipos de datos mixtos.

let mapObj = new Map ([
["cadena1", 1],
[2, "cadena2"],
["string3", 433.234],
[23.56, 45]
]);
console.log (mapObj);

Producción:

Mapa (4) {
'cadena1' => 1,
2 => 'cadena2',
'cadena3' => 433.234,
23.56 => 45
}

2. Agregar nuevos elementos a un objeto de mapa

Puede agregar un nuevo elemento al objeto Mapa usando el colocar() método. Este método acepta una clave y un valor, luego agrega un nuevo elemento al objeto Map. Luego, el método devuelve el nuevo objeto Mapa con el valor agregado. Si la clave ya existe en el mapa, el nuevo valor reemplazará al valor existente.

let mapObj = new Map ();
mapObj.set (1966, 'Batman: La película');
mapObj.set (1989, 'Batman');
mapObj.set (1992, 'Batman Returns');
mapObj.set (1995, 'Batman para siempre');
console.log (mapObj);

Producción:

Mapa (4) {
1966 => 'Batman: La película',
1989 => 'Batman',
1992 => 'Batman regresa',
1995 => 'Batman para siempre'
}

También puede utilizar variables o constantes como claves o valores:

const año1 = 1966;
const movieName1 = 'Batman: La película';
sea ​​año2 = 1989;
var movieName2 = 'Batman';
let mapObj = new Map ();
mapObj.set (año1, nombrePelícula1);
mapObj.set (año2, nombrePelícula2);
console.log (mapObj);

Producción:

Mapa (2) {
1966 => 'Batman: La película',
1989 => 'Batman'
}

los colocar() El método admite el encadenamiento.

let mapObj = new Map ();
mapObj.set (1966, 'Batman: La película')
.set (1989, 'Batman')
.set (1992, 'Batman Returns')
.set (1995, 'Batman para siempre');
console.log (mapObj);

Producción:

Mapa (4) {
1966 => 'Batman: La película',
1989 => 'Batman',
1992 => 'Batman regresa',
1995 => 'Batman para siempre'
}

3. Eliminar todos los elementos de un objeto de mapa

Puede eliminar todos los elementos de un objeto Mapa utilizando el claro() método. Este método siempre regresa indefinido.

let mapObj = new Map ([
[1966, 'Batman: La película'],
[1989, 'Batman']
]);
console.log ("Tamaño del objeto Mapa:" + mapObj.size);
console.log (mapObj);
mapObj.clear ();
console.log ("Tamaño del objeto Mapa después de borrar elementos:" + mapObj.size);
console.log (mapObj);

Producción:

Tamaño del objeto Mapa: 2
Mapa (2) {1966 => 'Batman: La película', 1989 => 'Batman'}
Tamaño del objeto Mapa después de borrar elementos: 0
Mapa (0) {}

4. Eliminar un elemento específico de un mapa

Puede eliminar un elemento específico de un objeto Mapa utilizando el Eliminar() método. Este método acepta la clave del elemento a eliminar del Mapa. Si la clave existe, el método devuelve cierto. De lo contrario, vuelve falso.

let mapObj = new Map ([
[1966, 'Batman: La película'],
[1989, 'Batman']
]);
console.log ("Mapa inicial:");
console.log (mapObj);
mapObj.delete (1966);
console.log ("Mapa después de eliminar el elemento que tiene la clave como 1966");
console.log (mapObj);

Producción:

Mapa inicial:
Mapa (2) {1966 => 'Batman: La película', 1989 => 'Batman'}
Mapa después de eliminar el elemento que tiene la clave como 1966
Mapa (1) {1989 => 'Batman'}

5. Compruebe si existe un elemento en un mapa

Puede comprobar si un elemento existe en un objeto Mapa utilizando el tiene() método. Este método acepta la clave del elemento como parámetro para probar la presencia en el objeto Mapa. Este método devuelve cierto si la clave existe. De lo contrario, vuelve falso.

let mapObj = new Map ([
[1966, 'Batman: La película'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman para siempre'],
[2005, 'Batman Begins'],
[2008, 'El caballero de la noche'],
[2012, 'El caballero de la noche asciende']
]);
console.log (mapObj.has (1966));
console.log (mapObj.has (1977));

Producción:

cierto
falso

Un elemento con llave 1966 existe en el objeto Map, por lo que el método devolvió cierto. Pero, dado que no hay ningún elemento con clave 1977 en el objeto Map, el método devolvió falso desde la segunda llamada.

Relacionado: ¿Qué es JavaScript y cómo funciona?

6. Acceder al valor de una clave específica

los obtener() El método devuelve un elemento específico del objeto Map. Este método acepta la clave del elemento como parámetro. Si la clave existe en el objeto Map, el método devuelve el valor del elemento. De lo contrario, vuelve indefinido.

let mapObj = new Map ([
[1966, 'Batman: La película'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman para siempre'],
[2005, 'Batman Begins'],
[2008, 'El caballero de la noche'],
[2012, 'El caballero de la noche asciende']
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

Producción:

Batman: la película
indefinido

Un elemento con llave 1966 existe en el objeto Map, por lo que el método devolvió el valor del elemento. No hay elemento con llave 1988 en el objeto Map, por lo que el método devolvió indefinido.

7. Acceder a las entradas de un mapa a través de un iterador

Según el funcionario Documentos web de MDN:

El método inputs () devuelve un nuevo objeto Iterator que contiene los pares [key, value] para cada elemento del objeto Map en el orden de inserción. En este caso particular, este objeto iterador también es iterable, por lo que se puede usar el bucle for-of. Cuando se usa el protocolo [Symbol.iterator], devuelve una función que, cuando se invoca, devuelve este iterador.

Puede acceder a cada elemento del mapa utilizando este iterador y un para... de declaración:

let mapObj = new Map ([
[1966, 'Batman: La película'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman para siempre'],
[2005, 'Batman Begins'],
[2008, 'El caballero de la noche'],
[2012, 'El caballero de la noche asciende']
]);
para (dejar la entrada de mapObj.entries ()) {
console.log (entrada);
}

Producción:

[1966, 'Batman: La película']
[1989, 'Batman']
[1992, 'Batman Returns']
[1995, 'Batman para siempre']
[2005, 'Batman Begins']
[2008, 'El caballero oscuro']
[2012, 'El caballero de la noche asciende']

O puede usar la función de asignación de destrucción de ES6 para acceder a cada clave y valor:

let mapObj = new Map ([
[1966, 'Batman: La película'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman para siempre'],
[2005, 'Batman Begins'],
[2008, 'El caballero de la noche'],
[2012, 'El caballero de la noche asciende']
]);
para (deje [clave, valor] de mapObj.entries ()) {
console.log ("Clave:" + clave + "Valor:" + valor);
}

Producción:

Clave: 1966 Valor: Batman: La película
Clave: 1989 Valor: Batman
Clave: 1992 Valor: Batman Returns
Clave: 1995 Valor: Batman Forever
Clave: 2005 Valor: Batman Begins
Clave: Valor de 2008: El caballero oscuro
Clave: Valor de 2012: The Dark Knight Rises

8. Cómo iterar sobre los valores de un mapa

los valores() el método devuelve un Iterador objeto que contiene todos los valores en un mapa, y lo hace en orden de inserción.

let mapObj = new Map ([
[1966, 'Batman: La película'],
[1989, 'Batman'],
[1992, 'Batman Returns']
]);
const iteratorObj = mapObj.values ​​();
for (sea el valor de iteratorObj) {
console.log (valor);
}

Producción:

Batman: la película
hombre murciélago
Batman Regresa

9. Iterar sobre las claves de un mapa

los teclas() el método devuelve un Iterador objeto que contiene todas las claves en un mapa, y lo hace en orden de inserción.

let mapObj = new Map ([
[1966, 'Batman: La película'],
[1989, 'Batman'],
[1992, 'Batman Returns']
]);
const iteratorObj = mapObj.keys ();
para (dejar clave de iteratorObj) {
console.log (clave);
}

Producción:

1966
1989
1992

Relacionado: Las funciones de flecha de JavaScript pueden convertirlo en un mejor desarrollador

10. Iterar elementos en un mapa usando una devolución de llamada

los para cada() El método invoca una función de devolución de llamada para cada elemento del objeto Map. La función de devolución de llamada toma dos parámetros: la clave y el valor.

function printKeyValue (clave, valor) {
console.log ("Clave:" + clave + "Valor:" + valor);
}
let mapObj = new Map ([
[1966, 'Batman: La película'],
[1989, 'Batman'],
[1992, 'Batman Returns']
]);
mapObj.forEach (printKeyValue);

Producción:

Clave: Batman: La película Valor: 1966
Clave: Batman Valor: 1989
Clave: Batman Returns Valor: 1992

Ahora sabe acerca de los mapas en JavaScript

Ahora tienes los conocimientos suficientes para dominar el concepto de mapas en JavaScript. La estructura de datos del mapa se usa ampliamente en muchas tareas de programación. Una vez que lo haya dominado, puede pasar a otros objetos JavaScript nativos como Conjuntos, Matrices, etc.

15 métodos de matriz de JavaScript que debe dominar hoy

¿Quiere comprender las matrices de JavaScript pero no puede familiarizarse con ellas? Consulte nuestros ejemplos de matrices de JavaScript para obtener orientación.

Leer siguiente

Sobre el Autor