Javascript: Map e Set

Sabemos que os objetos, são usados para armazenar coleções codificadas e arrays são usados para armazenar coleções ordenadas. Mas isso não é suficiente para a vida real. É por isso que aprenderemos sobre Map e Set.

Map

Map é uma coleção de itens de dados com chave, assim como um arquivo Object. Mas a principal diferença, é que Map permite chaves de qualquer tipo.

Métodos e propeidades são:

• new Map() - cria o map.
• map.set(key, value) - armazena o valor pela chave.
• map.get(key) - retorna o valor pela chave e undefined, caso a key não exista no map.
• map.has(key) - retorna true se a key existir, false caso contrário.
• map.delete(key) - remove o elemento (o par de chave/valor) pela chave.
• map.clear() - remove tudo do map.
• map.size - retorna a contagem do elemento atual.

Por exemplo:

let map = new Map()

`map.set('1', 'str1')` // uma key string
`map.set(1, 'num1')` // uma key numérica
`map.set(true, 'bool1')` // uma key booleana

// lembra do objeto regular? converteria as chaves em string
// O map mantém o tipo, então esses dois são diferentes:

alert( map.get(1)   ); // 'num1'
alert( map.get('1') ); // 'str1'

alert( map.size ); // 3

Como podemos ver, ao contrário dos objetos, as chaves não são convertidas em strings. Qualquer tipo de chave é possível.

map[key] não é a maneira certa de usar um Map

Embora map[key] também funcione, por exemplo, podemos definir map[key] = 2, isso é tratar o map como um objeto JavaScript simples, portanto, implica todas as limitações correspondentes (apenas chaves de strings/símbolo e assim por diante).

O map também pode usar objetos como chaves

Por exemplo:

let john = { name: "John" };

// para cada usuário, vamos armazenar a contagem de visitas
let visitsCountMap = new Map();

// john é a chave para o map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123

Usar objetos como chaves, é um dos recursos mais notáveis e importantes do Map. O mesmo não conta para Object. String como uma chave em Object está correto, mas não podemos usar outro Object como uma chave em Object.

Vamos tentar:

let john = { name: "John" };
let ben = { name: "Ben" };

let visitsCountObj = {}; // tente usar um objeto

visitsCountObj[ben] = 234; // tente usar o objeto ben como a chave
visitsCountObj[john] = 123; // tente usar o objeto john como a chave, o objeto ben será substituído

// Isso é o que está retornando!
alert( visitsCountObj["[object Object]"] ); // 123

Como visitsCountObj é um objeto, ele converte todas as chaves Object, como john e ben acima, na mesma string "[object Object]". Definitivamente não é o que queremos.

Iteração sobre o map

Para fazer um loop sobre um map, existem 3 métodos:

• map.keys() - retorna um iterável para chaves,
• map.values() - retorna um iterável para valores,
• map.entries() - retorna um iterável para [keys, value], é usado por padrão em for...of.

Por exemplo:

let recipeMap = new Map([
  ['cucumber', 500],
  ['tomatoes', 350],
  ['onion',    50]
]);

// iterar sobre chaves (vegetais)
for (let vegetable of recipeMap.keys()) {
  alert(vegetable); // cucumber, tomatoes, onion
}

// iterar sobre valores (quantidades)
for (let amount of recipeMap.values()) {
  alert(amount); // 500, 350, 50
}

// iterar sobre valores [key, value] 
for (let entry of recipeMap) { // o mesmo de recipeMap.entries()
  alert(entry); // pepino, 500 (e assim por diante)
}

A ordem de iserção é usada

A iteração ocorre na mesma ordem em que os valores foram inseridos. Map preserva essa ordem, ao contrário de um Object.

Além disso, Map possui um método forEach embutido, semelhante a um Array:

// executa a função para cada par (key, value)
recipeMap.forEach( (value, key, map) => {
  alert(`${key}: ${value}`); // pepino: 500 etc
});

Object.entries: Map from Object

Quando um Map é criado, podemos passar um array (ou outro iterável) com pares chave/valor para inicialização, assim:

// array of [key, value] pairs
let map = new Map([
  ['1',  'str1'],
  [1,    'num1'],
  [true, 'bool1']
]);

alert( map.get('1') ); // str1

Se tivermos um objeto simples e quisermos criar um Map a partir dele, podemos usar o método integrado Object.entries(obj) que retorna uma array de pares de chave/valor para um objeto exatamente nesse formato.

Assim, podemos criar um map a partir de um objeto como esse:

let obj = {
  name: "John",
  age: 30
};

let map = new Map(Object.entries(obj));

alert( map.get('name') ); // John

Aqui, Object.entries retorna o array de pares chave/valor: [ ["name","John"], ["age", 30] ]. Isso é o que Mapprecisa.

Object.fromEntries: Object from Map

Acabamos de ver como criar Map a partir de um objeto simples com Object.entries(obj). Existe o método Object.fromEntries que faz o contrário: dado um array de pares [chave, valor], ele cria um objeto a partir deles:

let prices = Object.fromEntries([
  ['banana', 1],
  ['orange', 2],
  ['meat', 4]
]);

// now prices = { banana: 1, orange: 2, meat: 4 }

alert(prices.orange); // 2

Podemos usar Object.fromEntries para obter um objeto simples de Map. Por exemplo, armazenamos os dados em um map, mas precisamos passá-los para um código de terceiros que espera um objeto simples. Aqui vamos nós:

let map = new Map();
map.set('banana', 1);
map.set('orange', 2);
map.set('meat', 4);

let obj = Object.fromEntries(map.entries()); // make a plain object (*)

// done!
// obj = { banana: 1, orange: 2, meat: 4 }

alert(obj.orange); // 2

Uma chamada para map.entries() retorna um iterável de pares chave/valor, exatamente no formato correto para Object.fromEntries. Também poderíamos tornar a linha (*) mais curta:

let obj = Object.fromEntries(map); // omit .entries()

Isso é o mesmo, porque Object.fromEntries espera um objeto iterável como argumento. Não necessariamente uma array. E a iteração padrão para map, retorna os mesmos pares chave/valor de map.entries(). Assim, obtemos um objeto simples com os mesmos valores/chave do mapa.

Set

Uma Set é uma coleção de tipo especial – “conjunto de valores” (sem chaves), onde cada valor pode ocorrer apenas uma vez.

Seus principais métodos são:

• new Set([iterable]) – cria o conjunto e, se um objeto iterable for fornecido (geralmente um array), copia os valores dele para o conjunto.
• set.add(value) – adiciona um valor, retorna o próprio conjunto.
• set.delete(value) – remove o valor, retorna true se value existir no momento da chamada, caso contrário false.
• set.has(value) – retorna true se o valor existir no conjunto, caso contrário false.
• set.clear() – remove tudo do conjunto.
• set.size – é a contagem de elementos.

A principal característica é que chamadas repetidas de set.add(value) com o mesmo valor não fazem nada. É por isso que cada valor Set aparece apenas uma vez.

Por exemplo, temos visitantes chegando e gostaríamos de lembrar de todos. Mas visitas repetidas não devem levar a duplicatas. Um visitante deve ser “contado” apenas uma vez. Por exemplo;

let set = new Set();

let john = { name: "John" };
let pete = { name: "Pete" };
let mary = { name: "Mary" };

// visitas, alguns usuários vêm várias vezes
set.add(john);
set.add(pete);
set.add(mary);
set.add(john);
set.add(mary);

// set mantém apenas valores únicos
alert( set.size ); // 3

for (let user of set) {
  alert(user.name); // John (então Pete e Mary)
}

Uma alternativa a Set pode ser uma array de usuários e o código para verificar se há duplicatas em cada inserção usando arr.find. Mas o desempenho seria muito pior, porque esse método percorre todo o array verificando cada elemento. Set é muito melhor otimizado internamente para verificações de exclusividade.

Iteração sobre Conjunto

Podemos percorrer um conjunto com for..of ou usando forEach:

let set = new Set(["laranjas", "maçãs", "bananas"]);

for (let value of set) alert(value);

// o mesmo com forEach:
set.forEach((value, valueAgain, set) => {
  alert(value);
});

Observe uma coisa engraçada. A função de retorno de chamada de forEach possui 3 argumentos: um value, o mesmo valor valueAgain e, em seguida, o objeto de destino. De fato, o mesmo valor aparece nos argumentos duas vezes.

Isso é para compatibilidade com Map onde o callback passado forEach tem três argumentos. Parece um pouco estranho, com certeza. Mas isso pode ajudar a substituir Map com Set com facilidade em certos casos e vice-versa.

Os mesmos métodos Mappara iteradores também são suportados:

• set.keys() – retorna um objeto iterável para valores,
• set.values() – o mesmo que set.keys(), para compatibilidade com Map,
• set.entries() – retorna um objeto iterável para entradas [value, value], existe para compatibilidade com Map.

Resumo

Map – é uma coleção de valores chaveados.

Métodos e propriedades:

• new Map([iterable]) – cria o map, com opcional iterable(por exemplo, array) de pares [key,value] para inicialização.
• map.set(key, value) – armazena o valor pela chave, retorna o próprio map.
• map.get(key) – retorna o valor pela chave, undefined caso key não exista no map.
• map.has(key) – retorna true se a key existir, false caso contrário.
• map.delete(key) – remove o elemento pela chave, retorna true se key existe no momento da chamada, caso contrário false.
• map.clear() – remove tudo do map. -map.size – retorna a contagem do elemento atual.

As diferenças de um regular Object:

Quaisquer chaves, objetos podem ser chaves.
Métodos convenientes adicionais, uma propriedade size.
Set – é uma coleção de valores únicos.

Métodos e propriedades:

• new Set([iterable]) – cria o conjunto, com valores opcionais iterable(por exemplo, array) para inicialização.
• set.add(value) – adiciona um valor (não faz nada se value existir), retorna o próprio conjunto. set.delete(value) – remove o valor, retorna true se value existir no momento da chamada, caso contrário false.
• set.has(value) – retorna true se o valor existir no conjunto, caso contrário false.
• set.clear() – remove tudo do conjunto.
• set.size – é a contagem de elementos.