Objeto de mapa JavaScript

Resumo : neste tutorial, você aprenderá sobre o objeto JavaScript Map que mapeia uma chave para um valor.

Introdução ao objeto JavaScript Map

Antes do ES6, frequentemente usávamos um objeto para emular um mapa mapeando uma chave para um valor de qualquer tipo. Mas usar um objeto como mapa tem alguns efeitos colaterais:

1. Um objeto sempre possui uma chave padrão como o protótipo .
2. A chave de um objeto deve ser uma string ou um símbolo ; você não pode usar um objeto como chave.
3. Um objeto não possui uma propriedade que represente o tamanho do mapa.

ES6 fornece um novo tipo de coleção chamado Mapque aborda essas deficiências.

Por definição, um Mapobjeto contém pares de valores-chave. As chaves são únicas na coleção de um mapa. Em outras palavras, uma chave em um objeto Map aparece apenas uma vez.

Chaves e valores de um mapa podem ser quaisquer valores.

Ao iterar um Mapobjeto, cada iteração retorna uma matriz de 2 membros [key, value]. A ordem de iteração segue a ordem de inserção que corresponde à ordem em que cada par chave-valor foi inserido pela primeira vez no Mapa pelo set()método.

Para criar um novo Map, você usa a seguinte sintaxe:

let map = new Map([iterable]);Linguagem de código:  JavaScript  ( javascript )

O aceita um objeto iterávelMap() opcional cujos elementos são pares de valores-chave.

Métodos úteis de mapa JavaScript

• clear()– remove todos os elementos do objeto do mapa.
•  delete(key)– remove um elemento especificado pela chave. Ele retorna se o elemento estiver no mapa ou falso se não estiver.
•  entries()– retorna um novo objeto Iterator que contém uma matriz de [key, value]para cada elemento no objeto map. A ordem dos objetos no mapa é igual à ordem de inserção.
•  forEach(callback[, thisArg])– invoca um retorno de chamada para cada par de valores-chave no mapa no pedido de inserção. O parâmetro opcional thisArg define o thisvalor de cada retorno de chamada.
•  get(key) – retorna o valor associado à chave. Se a chave não existir, ela retornará indefinido.
•  has(key) – retorna verdadeiro se existir um valor associado à chave ou falso caso contrário.
•  keys()– retorna um novo Iterador que contém as chaves dos elementos na ordem de inserção.
•  set(key, value)– define o valor da chave no objeto do mapa. Ele retorna o próprio objeto do mapa, portanto você pode encadear esse método com outros métodos.
•  values()retorna um novo objeto iterador que contém valores para cada elemento no pedido de inserção.

Exemplos de mapas JavaScript

Vejamos alguns exemplos de uso de um objeto Map.

Crie um novo objeto Mapa

Suponha que você tenha uma lista de userobjetos como segue:

let john = {name: 'John Doe'},
    lily = {name: 'Lily Bush'},
    peter = {name: 'Peter Drucker'};Linguagem de código:  JavaScript  ( javascript )

Supondo que você precise criar um mapa de usuários e funções. Nesse caso, você usa o seguinte código:

let userRoles = new Map();Linguagem de código:  JavaScript  ( javascript )

The userRolesé uma instância do Mapobjeto e seu tipo é um objeto conforme ilustrado no exemplo a seguir:

console.log(typeof(userRoles)); // object
console.log(userRoles instanceof Map); // trueLinguagem de código:  JavaScript  ( javascript )

Adicionar elementos a um mapa

Para atribuir uma função a um usuário, você usa o set()método:

userRoles.set(john, 'admin');Linguagem de código:  JavaScript  ( javascript )

O set()método mapeia o usuário johncom a adminfunção. Como o set()método pode ser encadeado, você pode economizar algumas digitações, conforme mostrado neste exemplo:

userRoles.set(lily, 'editor')
          .set(peter, 'subscriber');
Linguagem de código:  JavaScript  ( javascript )

Inicialize um mapa com um objeto iterável

Conforme mencionado anteriormente, você pode passar um objeto iterável para o Map()construtor:

let userRoles = new Map([
    [john, 'admin'],
    [lily, 'editor'],
    [peter, 'subscriber']
]);Linguagem de código:  JavaScript  ( javascript )

Obtenha um elemento de um mapa por chave

Se você quiser ver as funções de John, use o get()método:

userRoles.get(john); // adminLinguagem de código:  JavaScript  ( javascript )

Se você passar uma chave que não existe, o get()método retornará undefined.

let foo = {name: 'Foo'};
userRoles.get(foo); //undefinedLinguagem de código:  JavaScript  ( javascript )

Verifique a existência de um elemento por chave

Para verificar se existe uma chave no mapa, você usa o has()método.

userRoles.has(foo); // false
userRoles.has(lily); // trueLinguagem de código:  JavaScript  ( javascript )

Obtenha o número de elementos no mapa

A sizepropriedade retorna o número de entradas do objeto Map.

console.log(userRoles.size); // 3Linguagem de código:  JavaScript  ( javascript )

Iterar sobre as chaves do mapa

Para obter as chaves de um Mapobjeto, você usa o keys()método. O keys()retorna um novo objeto iterador que contém as chaves dos elementos no mapa.

O exemplo a seguir exibe o nome de usuário dos usuários no userRolesobjeto de mapa.

let john = { name: 'John Doe' },
  lily = { name: 'Lily Bush' },
  peter = { name: 'Peter Drucker' };

let userRoles = new Map([
  [john, 'admin'],
  [lily, 'editor'],
  [peter, 'subscriber'],
]);

for (const user of userRoles.keys()) {
  console.log(user.name);
}Linguagem de código:  JavaScript  ( javascript )

Saída:

John Doe
Lily Bush
Peter Drucker

Iterar sobre os valores do mapa

Da mesma forma, você pode usar o values()método para obter um objeto iterador que contém valores para todos os elementos no mapa:

let john = { name: 'John Doe' },
  lily = { name: 'Lily Bush' },
  peter = { name: 'Peter Drucker' };

let userRoles = new Map([
  [john, 'admin'],
  [lily, 'editor'],
  [peter, 'subscriber'],
]);

for (let role of userRoles.values()) {
  console.log(role);
}Linguagem de código:  JavaScript  ( javascript )

Saída:

admin
editor
subscriber

Iterar sobre os elementos do mapa

Além disso, o entries()método retorna um objeto iterador que contém uma matriz de [key,value]cada elemento do Mapobjeto:

let john = { name: 'John Doe' },
  lily = { name: 'Lily Bush' },
  peter = { name: 'Peter Drucker' };

let userRoles = new Map([
  [john, 'admin'],
  [lily, 'editor'],
  [peter, 'subscriber'],
]);

for (const role of userRoles.entries()) {
  console.log(`${role[0].name}: ${role[1]}`);
}Linguagem de código:  JavaScript  ( javascript )

Para tornar a iteração mais natural, você pode usar a desestruturação da seguinte maneira:

let john = { name: 'John Doe' },
  lily = { name: 'Lily Bush' },
  peter = { name: 'Peter Drucker' };

let userRoles = new Map([
  [john, 'admin'],
  [lily, 'editor'],
  [peter, 'subscriber'],
]);

for (let [user, role] of userRoles.entries()) {
  console.log(`${user.name}: ${role}`);
}
Linguagem de código:  JavaScript  ( javascript )

Além do for...ofloop, você pode usar o forEach()método do objeto map:

let john = { name: 'John Doe' },
  lily = { name: 'Lily Bush' },
  peter = { name: 'Peter Drucker' };

let userRoles = new Map([
  [john, 'admin'],
  [lily, 'editor'],
  [peter, 'subscriber'],
]);

userRoles.forEach((role, user) => console.log(`${user.name}: ${role}`));Linguagem de código:  JavaScript  ( javascript )

Converter chaves ou valores de mapa em um array

Às vezes, você deseja trabalhar com um array em vez de um objeto iterável; neste caso, você pode usar o operador spread .

O exemplo a seguir converte as chaves de cada elemento em uma matriz de chaves:

var keys = [...userRoles.keys()];
console.log(keys);Linguagem de código:  JavaScript  ( javascript )

Saída:

[ { name: 'John Doe' },
  { name: 'Lily Bush' },
  { name: 'Peter Drucker' } ]Linguagem de código:  JavaScript  ( javascript )

O seguinte converte os valores dos elementos em uma matriz:

let roles = [...userRoles.values()];
console.log(roles);Linguagem de código:  JavaScript  ( javascript )

Saída

[ 'admin', 'editor', 'subscriber' ]Linguagem de código:  JSON/JSON com comentários  ( json )

Excluir um elemento por chave

Para excluir uma entrada no mapa, você usa o delete()método.

userRoles.delete(john);Linguagem de código:  CSS  ( css )

Exclua todos os elementos do mapa

Para excluir todas as entradas do Mapobjeto, você usa o clear()método:

userRoles.clear();Linguagem de código:  CSS  ( css )

Portanto, o tamanho do mapa agora é zero.

console.log(userRoles.size); // 0Linguagem de código:  JavaScript  ( javascript )

Mapa Fraco

A WeakMapé semelhante a a, Mapexceto pelas chaves de a que WeakMapdevem ser objetos. Isso significa que quando uma referência a uma chave (um objeto) está fora do escopo, o valor correspondente é automaticamente liberado da memória.

A WeakMappossui apenas métodos de subconjunto de um Mapobjeto:

•  get(key)
•  set(key, value)
•  has(key)
•  delete(key)

Aqui estão as principais diferenças entre a Mape a WeekMap:

• Os elementos de um WeakMap não podem ser iterados.
• Não é possível limpar todos os elementos de uma vez.
• Não é possível verificar o tamanho de um WeakMap.

Neste tutorial, você aprendeu como trabalhar com o objeto JavaScript Map e seus métodos úteis para manipular entradas no mapa.