Por outro lado, arrays são uma coleção ordenada que pode conter dados de qualquer tipo. Em JavaScript, os arrays são criados com colchetes [...] e permitir elementos duplicados.

Até ES6 (ECMAScript 2015), JavaScript objects e arrays foram as estruturas de dados mais importantes para lidar com coleções de dados. A comunidade de desenvolvedores não tinha muitas opções fora disso. Mesmo assim, uma combinação de objetos e matrizes foi capaz de manipular dados em muitos cenários.

No entanto, havia algumas deficiências,

  • Chaves de objeto só podem ser do tipo string.
  • Os objetos não mantêm a ordem dos elementos inseridos neles.
  • Os objetos não possuem alguns métodos úteis, o que os torna difíceis de usar em algumas situações. Por exemplo, você não pode calcular o tamanho (length) de um objeto facilmente. Além disso, enumerar um objeto não é tão simples.
  • Arrays são coleções de elementos que permitem duplicatas. O suporte a matrizes que possuem apenas elementos distintos requer lógica e código extras.

Com a introdução do ES6, temos duas novas estruturas de dados que abordam as deficiências mencionadas acima, Map e Set. Neste artigo, examinaremos ambos de perto e entenderemos como usá-los em diferentes situações.

Mapa

Map é uma coleção de pares de valores-chave em que a chave pode ser de qualquer tipo. Map lembra a ordem de inserção original de seus elementos, o que significa que os dados podem ser recuperados na mesma ordem em que foram inseridos.

Em outras palavras, Map tem características de ambos Object e Array:

  • Como um objeto, ele suporta a estrutura do par de valores-chave.
  • Como uma matriz, ele se lembra da ordem de inserção.

Como criar e inicializar um mapa

Um novo Map pode ser criado assim:

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 mapconst map = new Map();// Add values to the mapmap.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 writermap.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 Mapconst funMap = new Map();funMap.set(360, 'My House Number'); // number as keyfunMap.set(true, 'I write blogs!'); // boolean as keylet obj = {'name': 'tapas'}funMap.set(obj, true); // object as keyconsole.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 objectconst 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 elementsmap.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 forEachageMap.forEach((value, key) => {   console.log(`${key} is ${value} years old!`);});// with for-offor(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 - saladSetconst saladSet = new Set();// Add some vegetables to itsaladSet.add('🍅'); // tomatosaladSet.add('🥑'); // avocadosaladSet.add('🥕'); // carrotsaladSet.add('🥒'); // cucumberconsole.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 trueconsole.log('Does the salad have a carrot?', saladSet.has('🥕'));// The salad doesn't have a 🥦, so returns falseconsole.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 Setconst houseNos = new Set([360, 567, 101]);// Get the SetIterator using the `values()` methodconsole.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 forEachhouseNos.forEach((value) => {   console.log(value);});// with for-offor(const value of houseNos) {   console.log(value); }

O resultado de ambos é:

360567101

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. Além disso, 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 fruitsconst mixedFruit = ['🍉', '🍎', '🍉', '🍈', '🍏', '🍎', '🍈',];// Pass the array to create a set of unique fruitsconst 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 objectconst person = {   'name': 'Alex',   'age': 32 };// Create a set and add the object to itconst pSet = new Set();pSet.add(person);console.log(pSet);

Resultado:

image 113

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 personperson.name="Bob";// Add the person object to the set againpSet.add(person);console.log(pSet);

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

Aqui está o resultado:

image 114

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.