Como usar coleções JavaScript – mapear e definir

const map = new Map();

O que retorna um vazio Map:

Map(0) {}

Outra maneira de criar um Map está com valores iniciais. Veja como criar um Map com três pares de valores-chave:

const freeCodeCampBlog = new Map([
  ['name', 'freeCodeCamp'],
  ['type', 'blog'],
  ['writer', 'Tapas Adhikary'],
]);

Que retorna um Map com três elementos:

Map(3) {"name" => "freeCodeCamp", "type" => "blog", "writer" => "Tapas Adhikary"}

Como adicionar valores a um mapa

Para agregar valor a um mapa, use o set(key, value) método.

o set(key, value) método leva dois parâmetros, key e value, onde a chave e o valor podem ser de qualquer tipo, um primitivo (boolean, string, number, etc.) ou um objeto:

// create a map
const map = new Map();

// Add values to the map
map.set('name', 'freeCodeCamp');
map.set('type', 'blog');
map.set('writer', 'Tapas Adhikary');

Resultado:

Map(3) {"name" => "freeCodeCamp", "type" => "blog", "writer" => "Tapas Adhikary"}

Observe, se você usar a mesma chave para adicionar um valor a um Map várias vezes, ele sempre substituirá o valor anterior:

// Add a different writer
map.set('writer', 'Someone else!');

Portanto, a saída seria:

Map(3) 
{"name" => "freeCodeCamp", "type" => "blog", "writer" => "Someone else!"}

Como obter valores de um mapa

Para obter um valor de um Map, use o get(key) método:

map.get('name'); // returns freeCodeCamp

Tudo sobre as chaves do mapa

Map as chaves podem ser de qualquer tipo, primitivas ou objetos. Esta é uma das principais diferenças entre Map e objetos JavaScript regulares em que a chave só pode ser uma string:

// create a Map
const funMap = new Map();

funMap.set(360, 'My House Number'); // number as key
funMap.set(true, 'I write blogs!'); // boolean as key

let obj = {'name': 'tapas'}
funMap.set(obj, true); // object as key

console.log(funMap);

Aqui está o resultado:

Map(3) 
{
  360 => "My House Number", 
  true => "I write blogs!", 
  {…} => true
}

Um objeto JavaScript regular sempre trata a chave como uma string. Mesmo quando você passa um primitivo ou objeto, ele converte internamente a chave em uma string:

// Create an empty object
const funObj = {};

// add a property. Note, passing the key as a number.
funObj[360] = 'My House Number';

// It returns true because the number 360 got converted into the string '360' internally!
console.log(funObj[360] === funObj['360']);

Propriedades e métodos do mapa

JavaScript’s Map possui propriedades e métodos integrados que o tornam fácil de usar. Aqui estão alguns dos mais comuns:

• Use o size propriedade para saber quantos elementos estão em uma Map:

console.log('size of the map is', map.size);

• Pesquise um elemento com o has(key) método:

// returns true, if map has an element with the key, 'John'
console.log(map.has('John')); 


// returns false, if map doesn't have an element with the key, 'Tapas'
console.log(map.has('Tapas')); 

• Remova um elemento com o delete(key) método:

map.delete('Sam'); // removes the element with key, 'Sam'.

• Use o clear() método para remover todos os elementos do Map de uma vez só:

// Clear the map by removing all the elements
map.clear(); 

map.size // It will return, 0

MapIterator: keys (), values ​​() e entradas ()

Os métodos keys(), values() e entries() métodos retornam um MapIterator, o que é excelente porque você pode usar um for-of ou forEach faça um loop diretamente nele.

Primeiro, crie um simples Map:

const ageMap = new Map([
  ['Jack', 20],
  ['Alan', 34],
  ['Bill', 10],
  ['Sam', 9]
]);

console.log(ageMap.keys());

// Output:

// MapIterator {"Jack", "Alan", "Bill", "Sam"}

console.log(ageMap.values());

// Output

// MapIterator {20, 34, 10, 9}

• Obtenha todas as entradas (pares de valores-chave):

console.log(ageMap.entries());

// Output

// MapIterator {"Jack" => 20, "Alan" => 34, "Bill" => 10, "Sam" => 9}

Como iterar em um mapa

Você pode usar o forEach ou for-of loop para iterar sobre um Map:

// with forEach
ageMap.forEach((value, key) => {
   console.log(`${key} is ${value} years old!`);
});

// with for-of
for(const [key, value] of ageMap) {
  console.log(`${key} is ${value} years old!`);
}

O resultado será o mesmo em ambos os casos:

Jack is 20 years old!
Alan is 34 years old!
Bill is 10 years old!
Sam is 9 years old!

Como converter um objeto em um mapa

Você pode encontrar uma situação em que precise converter um object para um Mapcomo estrutura. Você pode usar o método, entries do Object fazer isso:

const address = {
  'Tapas': 'Bangalore',
  'James': 'Huston',
  'Selva': 'Srilanka'
};

const addressMap = new Map(Object.entries(address));

Como converter um mapa em um objeto

Se você quiser fazer o inverso, pode usar o fromEntries método:

Object.fromEntries(map)

Como converter um mapa em uma matriz

Existem algumas maneiras de converter um mapa em uma matriz:

const map = new Map();
map.set('milk', 200);
map.set("tea", 300);
map.set('coffee', 500);

console.log(Array.from(map));

• Usando o operador de propagação:

console.log([...map]);

Mapa x objeto: quando você deve usá-los?

Map tem características de ambos object e array. Contudo, Map é mais como um object do que array devido à natureza do armazenamento de dados no key-value formato.

A semelhança com os objetos termina aqui. Como você viu, Map é diferente de várias maneiras. Então, qual você deve usar e quando? Como você decide?

Usar Map quando:

• Suas necessidades não são tão simples. Você pode querer criar chaves que não sejam strings. Armazenar um objeto como chave é uma abordagem muito poderosa. Map oferece essa capacidade por padrão.
• Você precisa de uma estrutura de dados onde os elementos possam ser ordenados. Objetos regulares não mantêm a ordem de suas entradas.
• Você está procurando flexibilidade sem depender de uma biblioteca externa como lodash. Você pode acabar usando uma biblioteca como lodash porque não encontramos métodos como has(), values(), delete(), ou uma propriedade como size com um objeto regular. Map torna isso fácil para você, fornecendo todos esses métodos por padrão.

Use um objeto quando:

• Você não tem nenhuma das necessidades listadas acima.
• Você confia em JSON.parse() como um Map não pode ser analisado com ele.

UMA Set é uma coleção de elementos exclusivos que podem ser de qualquer tipo. Set também é uma coleção ordenada de elementos, o que significa que os elementos serão recuperados na mesma ordem em que foram inseridos.

UMA Set em JavaScript se comporta da mesma maneira que um conjunto matemático.

Como criar e inicializar um conjunto

Um novo Set pode ser criado assim:

const set = new Set();
console.log(set);

E a saída será um vazio Set:

Set(0) {}

Veja como criar um Set com alguns valores iniciais:

const fruteSet = new Set(['🍉', '🍎', '🍈', '🍏']);
console.log(fruteSet);

Resultado:

Set(4) {"🍉", "🍎", "🍈", "🍏"}

Definir propriedades e métodos

Set possui métodos para adicionar um elemento a ele, excluir elementos dele, verificar se um elemento existe nele e limpá-lo completamente:

• Use o size propriedade para saber o tamanho do Set. Ele retorna o número de elementos nele:

set.size

• Use o add(element) método para adicionar um elemento ao Set:

// Create a set - saladSet
const saladSet = new Set();

// Add some vegetables to it
saladSet.add('🍅'); // tomato
saladSet.add('🥑'); // avocado
saladSet.add('🥕'); // carrot
saladSet.add('🥒'); // cucumber

console.log(saladSet);


// Output

// Set(4) {"🍅", "🥑", "🥕", "🥒"}

Eu amo pepinos! Que tal adicionar mais um?

Oh não, eu não posso – Set é uma coleção de único elementos:

saladSet.add('🥒');
console.log(saladSet);

A saída é a mesma de antes – nada foi adicionado ao saladSet.

• Use o has(element) método para pesquisar se temos uma cenoura (🥕) ou brócolis (🥦) no Set:

// The salad has a 🥕, so returns true
console.log('Does the salad have a carrot?', saladSet.has('🥕'));

// The salad doesn't have a 🥦, so returns false
console.log('Does the salad have broccoli?', saladSet.has('🥦'));

• Use o delete(element) método para remover o abacate (🥑) do Set:

saladSet.delete('🥑');
console.log('I do not like 🥑, remove from the salad:', saladSet);

Agora nossa salada Set é o seguinte:

Set(3) {"🍅", "🥕", "🥒"}

• Use o clear() método para remover todos os elementos de um Set:

saladSet.clear();

Como iterar em um conjunto

Set tem um método chamado values() que retorna um SetIterator para obter todos os seus valores:

// Create a Set
const houseNos = new Set([360, 567, 101]);

// Get the SetIterator using the `values()` method
console.log(houseNos.values());

Resultado:

SetIterator {360, 567, 101}

Podemos usar um forEach ou for-of faça um loop para recuperar os valores.

Curiosamente, o JavaScript tenta fazer Set compatível com Map. É por isso que encontramos dois dos mesmos métodos que Map, keys() e entries().

Como Set não tem chaves, o keys() método retorna um SetIterator para recuperar seus valores:

console.log(houseNos.keys());

// Output

// console.log(houseNos.keys());

Com Map, a entries() método retorna um iterador para recuperar pares de valores-chave. Novamente, não há chaves em um Set, tão entries() retorna um SetIterator para recuperar os pares valor-valor:

console.log(houseNos.entries());

// Output

// SetIterator {360 => 360, 567 => 567, 101 => 101}

Como enumerar em um conjunto

Podemos enumerar sobre um conjunto usando forEach e for-of rotações:

// with forEach

houseNos.forEach((value) => {
   console.log(value);
});


// with for-of

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

O resultado de ambos é:

360
567
101

Conjuntos e matrizes

Uma matriz, como um Set, permite adicionar e remover elementos. Mas Set é bem diferente e não se destina a substituir matrizes.

A principal diferença entre um array e um Set é que os arrays permitem elementos duplicados. Ademais, alguns dos Set operações como delete() são mais rápidas do que operações de array como shift() ou splice().

Imagine Set como uma extensão de uma matriz regular, apenas com mais músculos. o Set estrutura de dados não é uma substituição do array. Ambos podem resolver problemas interessantes.

Como converter um conjunto em um array

Convertendo um Set em uma matriz é simples:

const arr = [...houseNos];
console.log(arr);

Valores únicos de uma matriz usando o Conjunto

Criando um Set é uma maneira realmente fácil de remover valores duplicados de uma matriz:

// Create a mixedFruit array with a few duplicate fruits
const mixedFruit = ['🍉', '🍎', '🍉', '🍈', '🍏', '🍎', '🍈',];

// Pass the array to create a set of unique fruits
const mixedFruitSet = new Set(mixedFruit);

console.log(mixedFruitSet);

Resultado:

Set(4) {"🍉", "🍎", "🍈", "🍏"}

Conjunto e objeto

UMA Set pode ter elementos de qualquer tipo, até mesmo objetos:

// Create a person object
const person = {
   'name': 'Alex',
   'age': 32
 };

// Create a set and add the object to it
const pSet = new Set();
pSet.add(person);
console.log(pSet);

Resultado:

Nenhuma surpresa aqui – o Set contém um elemento que é um objeto.

Vamos alterar uma propriedade do objeto e adicioná-la ao conjunto novamente:

// Change the name of the person
person.name="Bob";

// Add the person object to the set again
pSet.add(person);
console.log(pSet);

Qual você acha que será o resultado? Dois person objetos ou apenas um?

Aqui está o resultado:

Set é uma coleção de elementos únicos. Ao alterar a propriedade do objeto, não alteramos o próprio objeto. Conseqüentemente Set não permitirá elementos duplicados.

Set é uma ótima estrutura de dados para usar além de arrays JavaScript. No entanto, ele não tem uma grande vantagem sobre os arrays regulares.

Usar Set quando você precisa manter um conjunto distinto de dados para realizar operações definidas como union, intersection, difference, e assim por diante.

Em suma

Aqui está um repositório GitHub para encontrar todo o código-fonte usado neste artigo. Se você achou útil, mostre seu apoio dando uma estrela: https://github.com/atapas/js-collections-map-set

Você pode ler mais sobre os Map e Set estruturas de dados aqui:

Você também pode gostar de alguns dos meus outros artigos:

Se este artigo foi útil, compartilhe-o para que outras pessoas também possam lê-lo. Você pode me @ no Twitter (@tapasadhikary) com comentários ou fique à vontade para me seguir.