Seguimos viendo las novedades de ES6. En esta entrada, vamos a ver las nuevas estructuras de datos que presenta. Estas estrucutras de datos son el Map, WeakMap, Set y WeakSet.
Map
Map es una estructura de datos clave-valor. Pero lo interesante, es que tanto el valor como la clave pueden ser cualquier tipo de dato, es decir, pueden ser números enteros, objetos o cualquier otro tipo. Vamos a ver un código de ejemplo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
// definimos un mapa, también podríamos pasarle un array [[clave, valor]] como parámetro const mapa = new Map(); // añadimos a la variable creada clave-valor mapa.set(12, 'doce'); mapa.set({name: 'John'}, true); // obtenemos un elemento a partir de la clave console.log(mapa.get(12)); // doce // comprobamos si existe a partir de la clave console.log(mapa.has('test')) // false, porque no existe // recorremos el mapa con for-of for (let [c, v] of mapa) { console.log(`Clave: ${c}, Valor: ${v}`); } // Resultado: // Clave: 12, Valor: doce // Clave: [object Object], Valor: true // recorremos el mapa con .forEach mapa.forEach((v, c) => { console.log(`Clave: ${c}, Valor: ${v}`); }); // Resultado: // Clave: 12, Valor: doce // Clave: [object Object], Valor: true // eliminamos un elemento mapa.delete(12); console.log(mapa.get(12)) // undefined, porque no existe // limpiamos el mapa mapa.clear(); // obtenemos el tamaño del mapa console.log(mapa.size); // 0 |
Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-Map
WeakMap
WeakMap son estructuras de datos similares a Map, pero que simplemente permiten objetos como clave y la referencia hacia el objeto es una referencia débil, es decir, cuando no hay referencias al objeto fuera del WeakMap, el elemento es eliminado del WeakMap. Otra de las diferencias respecto a Map, es que no podemos acceder a los métodos .entries() , .keys() , .values() , .clear() ni a la propiedad .size . Tampoco podemos recorrerlo con un bucle para ver los elementos que tiene, simplemente podemos acceder con .get() . Vamos a ver un ejemplo para entenderlo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
// definimos varios objetos let obj1 = {name: 'John'}; let obj2 = {name: 'Peter'}; let obj3 = {name: 'Thomas'}; // definimos un WeakMap const weakMap = new WeakMap(); // añadimos los objetos al WeakMap weakMap.set(obj1, 3); weakMap.set(obj2, 'string'); weakMap.set(obj3, 5.5); // obtenemos elemento a partir de obj1 console.log(weakMap.get(obj1)); // 3 // podemos eliminar un elemento weakMap.delete(obj3); console.log(weakMap.has(obj3)); // false // asignamos null a obj1 y veremos que ya no estará en nuestro WeakMap // en cambio, obj2 sí que continuará estando obj1 = null; console.log(weakMap.has(obj1)); // false console.log(weakMap.has(obj2)); // true // errores, no se pueden utilizar estos métodos ni la propiedad size // console.log(weakMap.entries()); // console.log(weakMap.keys()); // console.log(weakMap.values()); // weakMap.clear(); // console.log(weakMap.size); // undefined |
Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-WeakMap
Set
Set es una estructura de datos que nos permite guardar valores de cualquier tipo, pero tienen que ser únicos. Vamos a ver un ejemplo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
// definimos un set a partir de un array por parámetro, aunque no hace falta pasarle el array const array = [ 1, true, {user: 'John'}, 'test' ]; const set = new Set(array); // añadimos valores al set set.add(5).add('text'); // comprobar si existe un valor console.log(set.has('test')); // añadir un duplicado, no se puede, tienen que ser únicos console.log(set.size); // 6 set.add(1); console.log(set.size); // 6, no se ha añadido el nuevo valor // recorrer el set con for-of o .forEach // se muestran tal cual se han ido añadiendo for (let v of set) { console.log(v); } // Resultado: // 1 // true // { user: 'John' } // test // 5 // text // limpiar el set set.clear(); // comprobar tamaño set console.log(set.size); // 0 |
Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-Set
WeakSet
Con los WeakSet pasa lo mismo que con los WeakMap. En este caso, son similares a Set, pero simplemente permiten objetos como valor y la referencia al objeto también es débil. Tampoco podemos acceder a los métodos .entries() , .keys() , .values() , .clear() ni a la propiedad .size . Ni tampoco podremos iterar sobre el WeakSet. Vamos a ver un ejemplo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// definimos varios objetos let obj1 = {name: 'John'}; let obj2 = {name: 'Peter'}; let obj3 = {name: 'Thomas'}; // definimos un WeakSet const weakSet = new WeakSet(); // añadimos los objetos al WeakSet weakSet.add(obj1).add(obj2).add(obj3); // podemos eliminar un elemento weakSet.delete(obj3); console.log(weakSet.has(obj3)); // false // asignamos null a obj1 y veremos que ya no estará en nuestro WeakSet // en cambio, obj2 sí que continuará estando obj1 = null; console.log(weakSet.has(obj1)); // false console.log(weakSet.has(obj2)); // true // errores, no se pueden utilizar estos métodos ni la propiedad size // console.log(weakSet.entries()); // console.log(weakSet.keys()); // console.log(weakSet.values()); // weakSet.clear(); // console.log(weakSet.size); // undefined |
Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-WeakSet
-
- https://www.sitepoint.com/es6-collections-map-set-weakmap-weakset/
- https://javascript.info/map-set-weakmap-weakset
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR