CodeGym /Cursos /Frontend SELF PT /New data structures: Map, Set

New data structures: Map, Set

Frontend SELF PT
Nível 45 , Lição 2
Disponível

3.1 Coleção Map

No ECMAScript 2015 (ES6), foram adicionadas ao JavaScript duas novas estruturas de dados: Map e Set. Essas estruturas de dados oferecem formas mais flexíveis e eficientes de armazenar e gerenciar coleções de dados em comparação com objetos e arrays tradicionais.

Map é uma estrutura de dados que permite armazenar pares chave-valor, onde as chaves podem ser de qualquer tipo, incluindo objetos e funções.

1. Criar e inicializar Map:

JavaScript
    
      const map = new Map();
    
  

2. Adicionar elementos:

O método set é usado para adicionar novos pares chave-valor ao Map.

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

3. Obter elementos:

O método get é usado para obter o valor por meio da chave.

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. Verificar a existência de chave:

O método has verifica se uma chave existe no 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. Remover elementos:

O método delete remove um elemento pela chave.

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. Limpar Map:

O método clear remove todos os elementos do 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. Iterar sobre Map:

Você pode usar o loop for...of para iterar sobre o Map.

Exemplo:

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 Coleção Set

Set é uma estrutura de dados que permite armazenar valores únicos de qualquer tipo, incluindo objetos e primitivos.

1. Criar e inicializar Set:

JavaScript
    
      const set = new Set();
    
  

2. Adicionar elementos:

O método add é usado para adicionar novos valores ao Set.

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

3. Verificar a existência de valor:

O método has verifica se um valor existe no 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. Remover elementos:

O método delete remove um valor do 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. Limpar Set:

O método clear remove todos os elementos do Set.

JavaScript
    
      const set = new Set();

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

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

6. Iterar sobre Set:

Você pode usar o loop for...of para iterar sobre o Set.

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

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

      // 1
      // 'value2'
    
  

3.3 Comparação entre Map e Set

Vantagens do Map:

  1. Chaves arbitrárias: em um Map, as chaves podem ser de qualquer tipo, incluindo objetos e funções, ao contrário de objetos, onde as chaves só podem ser strings ou símbolos.
  2. Elementos ordenados: os elementos em Map mantêm a ordem de inserção, o que facilita a iteração sobre eles na ordem de inserção.
  3. Tamanho da coleção: o método size permite obter rapidamente o número de elementos em um Map.

Vantagens do Set:

  1. Valores únicos: Set garante automaticamente que todos os seus elementos sejam únicos.
  2. Elementos ordenados: os elementos em Set mantêm a ordem de inserção, o que facilita a iteração sobre eles na ordem de inserção.
  3. Operações otimizadas: Set oferece métodos otimizados para adição, remoção e verificação da existência de elementos.

Exemplos práticos

Exemplo de uso de Map para armazenar informações sobre usuários:

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
    
  

Exemplo 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
    
  
Comentários
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION