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.