CodeGym /Cursos /Frontend SELF ES /Nuevas estructuras de datos: Map, Set

Nuevas estructuras de datos: Map, Set

Frontend SELF ES
Nivel 45 , Lección 2
Disponible

3.1 Colección Map

En ECMAScript 2015 (ES6) en JavaScript se añadieron dos nuevas estructuras de datos: Map y Set. Estas estructuras de datos ofrecen formas más flexibles y eficientes de almacenar y gestionar colecciones de datos en comparación con los objetos y arrays tradicionales.

Map es una estructura de datos que permite almacenar pares clave-valor, donde las claves pueden ser de cualquier tipo, incluyendo objetos y funciones.

1. Creación e inicialización de Map:

JavaScript
    
      const map = new Map();
    
  

2. Añadir elementos:

El método set se utiliza para añadir nuevas parejas clave-valor en Map.

JavaScript
    
      map.set('key1', 'value1');
      map.set(2, 'value2');
      map.set({ name: 'objectKey' }, 'value3');
    
  

3. Obtener elementos:

El método get se utiliza para obtener el valor por su clave.

JavaScript
    
      const map = new Map();

      map.set('key1', 'value1');
      map.set(2, 'value2');
      map.set({ name: 'objectKey' }, 'value3');

      console.log(map.get('key1')); // 'value1'
      console.log(map.get(2)); // 'value2'
    
  

4. Comprobar si existe una clave:

El método has comprueba si una clave existe en Map.

JavaScript
    
      const map = new Map();

      map.set('key1', 'value1');
      map.set(2, 'value2');
      map.set({ name: 'objectKey' }, 'value3');

      console.log(map.has('key1')); // true
      console.log(map.has('key3')); // false
    
  

5. Eliminar elementos:

El método delete elimina un elemento por su clave.

JavaScript
    
      const map = new Map();

      map.set('key1', 'value1');
      map.set(2, 'value2');
      map.set({ name: 'objectKey' }, 'value3');

      map.delete('key1');
      console.log(map.has('key1')); // false
    
  

6. Limpiar Map:

El método clear elimina todos los elementos de Map.

JavaScript
    
      const map = new Map();

      map.set('key1', 'value1');
      map.set(2, 'value2');
      map.set({ name: 'objectKey' }, 'value3');

      map.clear();
      console.log(map.size); // 0
    
  

7. Iteración sobre Map:

Puedes usar el bucle for...of para iterar sobre Map.

Ejemplo:

JavaScript
    
      const map = new Map();
      map.set('key1', 'value1');
      map.set(2, 'value2');

      for (const [key, value] of map) {
        console.log(`${key}: ${value}`);
      }

      // 'key1: value1'
      // '2: value2'
    
  

3.2 Colección Set

Set es una estructura de datos que permite almacenar valores únicos de cualquier tipo, incluyendo objetos y primitivos.

1. Creación e inicialización de Set:

JavaScript
    
      const set = new Set();
    
  

2. Añadir elementos:

El método add se utiliza para añadir nuevos valores en Set.

JavaScript
    
      set.add(1);
      set.add('value2');
      set.add({ name: 'objectValue' });
    
  

3. Comprobar si existe un valor:

El método has comprueba si un valor existe en Set.

JavaScript
    
      const set = new Set();

      set.add(1);
      set.add('value2');
      set.add({ name: 'objectValue' });

      console.log(set.has(1)); // true
      console.log(set.has('value3')); // false
    
  

4. Eliminar elementos:

El método delete elimina un valor de Set.

JavaScript
    
      const set = new Set();

      set.add(1);
      set.add('value2');
      set.add({ name: 'objectValue' });

      set.delete(1);
      console.log(set.has(1)); // false
    
  

5. Limpiar Set:

El método clear elimina todos los elementos de Set.

JavaScript
    
      const set = new Set();

      set.add(1);
      set.add('value2');
      set.add({ name: 'objectValue' });

      set.clear();
      console.log(set.size); // 0
    
  

6. Iteración sobre Set:

Puedes usar el bucle for...of para iterar sobre Set.

JavaScript
    
      const set = new Set();
      set.add(1);
      set.add('value2');

      for (const value of set) {
        console.log(value);
      }

      // 1
      // 'value2'
    
  

3.3 Comparación entre Map y Set

Ventajas de Map:

  1. Claves arbitrarias: en Map las claves pueden ser de cualquier tipo, incluyendo objetos y funciones, a diferencia de los objetos donde las claves solo pueden ser cadenas o símbolos.
  2. Elementos ordenados: los elementos en Map mantienen el orden de inserción, lo cual facilita la iteración en el orden de adición.
  3. Tamaño de la colección: el método size permite obtener rápidamente el número de elementos en Map.

Ventajas de Set:

  1. Valores únicos: Set garantiza automáticamente que todos sus elementos sean únicos.
  2. Elementos ordenados: los elementos en Set mantienen el orden de inserción, lo cual facilita la iteración en el orden de adición.
  3. Operaciones optimizadas: Set proporciona métodos optimizados para añadir, eliminar y comprobar la existencia de elementos.

Ejemplos prácticos

Ejemplo de uso de Map para almacenar información de usuarios:

JavaScript
    
      const users = new Map();
      users.set(1, { name: 'Alice', age: 25 });
      users.set(2, { name: 'Bob', age: 30 });

      for (const [id, user] of users) {
        console.log(`User ID: ${id}, Name: ${user.name}, Age: ${user.age}`);
      }

      // User ID: 1, Name: Alice, Age: 25
      // User ID: 2, Name: Bob, Age: 30
    
  

Ejemplo de uso de Set para filtrar valores únicos:

JavaScript
    
      const numbers = [1, 2, 3, 1, 2, 4, 5, 3];
      const uniqueNumbers = new Set(numbers);

      for (const number of uniqueNumbers) {
        console.log(number);
      }

      // 1
      // 2
      // 3
      // 4
      // 5
    
  
Comentarios
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION