En este tutorial, aprenderá sobre JavaScript Maps y WeakMaps con la ayuda de ejemplos.
JavaScript ES6 ha introducido dos nuevas estructuras de datos, es decir, Mapy WeakMap.
El mapa es similar a los objetos en JavaScript que nos permite almacenar elementos en un par clave / valor .
Los elementos de un mapa se insertan en un orden de inserción. Sin embargo, a diferencia de un objeto, un mapa puede contener objetos, funciones y otros tipos de datos como clave.
Crear mapa de JavaScript
Para crear un Map, usamos el new Map()constructor. Por ejemplo,
// create a Map const map1 = new Map(); // an empty map console.log(map1); // Map ()
Insertar elemento en el mapa
Después de crear un mapa, puede utilizar el set()método para insertar elementos en él. Por ejemplo,
// create a set let map1 = new Map(); // insert key-value pair map1.set('info', (name: 'Jack', age: 26)); console.log(map1); // Map ("info" => (name: "Jack", age: 26))
También puede utilizar objetos o funciones como teclas. Por ejemplo,
// Map with object key let map2 = new Map(); let obj = (); map2.set(obj, (name: 'Jack', age: "26")); console.log(map2); // Map (() => (name: "Jack", age: "26"))
Elementos del mapa de acceso
Puede acceder a los Mapelementos utilizando el get()método. Por ejemplo,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // access the elements of a Map console.log(map1.get('info')); // (name: "Jack", age: "26")
Comprobar elementos del mapa
Puede utilizar el has()método para comprobar si el elemento está en un mapa. Por ejemplo,
const set1 = new Set((1, 2, 3)); let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // check if an element is in Set console.log(map1.has('info')); // true
Eliminar elementos
Puede utilizar el método clear()y el delete()para eliminar elementos de un mapa.
El delete()método devuelve truesi existe un par clave / valor especificado y se ha eliminado o si no vuelve false. Por ejemplo,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // removing a particular element map1.delete('address'); // false console.log(map1); // Map ("info" => (name: "Jack", age: "26")) map1.delete('info'); // true console.log(map1); // Map ()
El clear()método elimina todos los pares clave / valor de un objeto Map. Por ejemplo,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); // removing all element map1.clear(); // false console.log(map1); // Map ()
Tamaño del mapa de JavaScript
Puede obtener la cantidad de elementos en un mapa usando la sizepropiedad. Por ejemplo,
let map1 = new Map(); map1.set('info', (name: 'Jack', age: "26")); console.log(map1.size); // 1
Iterar a través de un mapa
Puede iterar a través de los elementos Map utilizando el método for… of loop o forEach (). Se accede a los elementos en la orden de inserción. Por ejemplo,
let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through Map for (let (key, value) of map1) ( console.log(key + '- ' + value); )
Salida
nombre- Jack edad- 27
También puede obtener los mismos resultados que el programa anterior utilizando el forEach()método. Por ejemplo,
// using forEach method() let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through Map map1.forEach(function(value, key) ( console.log(key + '- ' + value) ))
Iterar sobre claves de mapa
Puede iterar sobre el mapa y obtener la clave utilizando el keys()método. Por ejemplo,
let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through the Map for (let key of map1.keys()) ( console.log(key) )
Salida
nombre Edad
Iterar sobre los valores del mapa
Puede iterar sobre el mapa y obtener los valores utilizando el values()método. Por ejemplo,
let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through the Map for (let values of map1.values()) ( console.log(values); )
Salida
Gato 27
Obtener clave / valores del mapa
Puede iterar sobre el mapa y obtener la clave / valor de un mapa utilizando el entries()método. Por ejemplo,
let map1 = new Map(); map1.set('name', 'Jack'); map1.set('age', '27'); // looping through the Map for (let elem of map1.entries()) ( console.log(`$(elem(0)): $(elem(1))`); )
Salida
nombre: Jack edad: 27
Mapa de JavaScript vs Objeto
| Mapa | Objeto |
|---|---|
| Maps can contain objects and other data types as keys. | Objects can only contain strings and symbols as keys. |
| Maps can be directly iterated and their value can be accessed. | Objects can be iterated by accessing its keys. |
The number of elements of a Map can be determined by size property. | The number of elements of an object needs to be determined manually. |
| Map performs better for programs that require the addition or removal of elements frequently. | Object does not perform well if the program requires the addition or removal of elements frequently. |
JavaScript WeakMap
The WeakMap is similar to a Map. However, WeakMap can only contain objects as keys. For example,
const weakMap = new WeakMap(); console.log(weakMap); // WeakMap () let obj = (); // adding object (element) to WeakMap weakMap.set(obj, 'hello'); console.log(weakMap); // WeakMap (() => "hello")
When you try to add other data types besides objects, WeakMap throws an error. For example,
const weakMap = new WeakMap(); // adding string as a key to WeakMap weakMap.set('obj', 'hello');
// throws error // TypeError: Attempted to set a non-object key in a WeakMap
WeakMap Methods
WeakMaps tienen métodos get(), set(), delete(), y has(). Por ejemplo,
const weakMap = new WeakMap(); console.log(weakMap); // WeakMap () let obj = (); // adding object (element) to WeakMap weakMap.set(obj, 'hello'); console.log(weakMap); // WeakMap (() => "hello") // get the element of a WeakMap console.log(weakMap.get(obj)); // hello // check if an element is present in WeakMap console.log(weakMap.has(obj)); // true // delete the element of WeakMap console.log(weakMap.delete(obj)); // true console.log(weakMap); // WeakMap ()
WeakMaps no son iterables
A diferencia de Maps, WeakMaps no son iterables. Por ejemplo,
const weakMap = new WeakMap(); console.log(weakMap); // WeakMap () let obj = (); // adding object (element) to WeakMap weakMap.set(obj, 'hello'); // looping through WeakMap for (let i of weakMap) ( console.log(i); // TypeError )
JavaScript Mapy WeakMapse introdujeron en ES6 . Es posible que algunos navegadores no admitan su uso. Para obtener más información, visite Soporte de JavaScript Map y Soporte de JavaScript WeakMap.
