JavaScript ECMAScript 6: Mapas

O Map é uma das novidades do ECMAScript 6, ele nos possibilita trabalhar com uma coleção de chave valor. Quem trabalha com .NET já viu algo parecido quando utilizou Dictionary.

Para que você possa ter um melhor entendimento, vamos criar uma lista com os 10 melhores filmes de todos os tempos. Lista retirada do site: imdb.

• 1. The Godfather
• 2. The Shawshank Redemption
• 3. Schindler’s List
• 4. Raging Bull
• 5. Casablanca
• 6. Citizen Kane
• 7. Gone with the Wind
• 8. The Wizard of Oz
• 9. One Flew Over the Cuckoo’s Nest
• 10. Lawrence of Arabia

O Map nos permite trabalhar com gets e sets para manipular os valores. Veja abaixo como podemos adicionar os itens da nossa lista em uma coleção com o set:

let movies = new Map();
movies.set(1, 'The Godfather');
movies.set(2, 'The Shawshank Redemption');
movies.set(3, 'Schindler’s List');
movies.set(4, 'Raging Bull');
movies.set(5, 'Casablanca');
movies.set(6, 'Citizen Kane');
movies.set(7, 'Gone with the Wind');
movies.set(8, 'The Wizard of Oz');
movies.set(9, 'One Flew Over the Cuckoo’s Nest');
movies.set(10, 'Lawrence of Arabia');

Nosso próximo passo será saber qual foi considerado o quinto melhor filme de todos os tempos. Para isso, nós iremos utilizar o get. Podemos ver o resultado dessa pesquisa na imagem abaixo:

Eu utilizei o repl.it no nosso exemplo acima, ele nós permite simular a console do nosso navegador.

Agora, e se precisarmos saber se um valor existe em nossa coleção? Para isso, podemos utilizar o has, ele nos retorna um valor booleano. Podemos ver abaixo um exemplo onde estamos verificando se a lista tem as keys 10 e 13:

O Map também permite saber a quantidade de itens de uma coleção. Para isso, podemos utilizar o size:

Agora, como podemos fazer para remover um ou mais valores? Para isso, veja abaixo dois exemplos: um demonstrando como deletar um item da coleção e outro de como podemos apagar todos os itens de uma vez.

Agora para finalizar, veja como podemos interagir com a nossa coleção. Para isso, iremos utilizar o for of.

Segue link do exemplo utilizado nesse artigo: Mapas ES6.

Com isso nós conseguimos conhecer mais uma das novidades do ECMAScript 6, espero que tenham gostado e até um próximo artigo.