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:
- Um objeto sempre possui uma chave padrão como o protótipo .
- A chave de um objeto deve ser uma string ou um símbolo ; você não pode usar um objeto como chave.
- Um objeto não possui uma propriedade que represente o tamanho do mapa.
ES6 fornece um novo tipo de coleção chamado Map
que aborda essas deficiências.
Por definição, um Map
objeto 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 Map
objeto, 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 othis
valor 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 user
objetos 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 Map
objeto e seu tipo é um objeto conforme ilustrado no exemplo a seguir:
console.log(typeof(userRoles)); // object
console.log(userRoles instanceof Map); // true
Linguagem 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 john
com a admin
funçã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); // admin
Linguagem 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); //undefined
Linguagem 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); // true
Linguagem de código: JavaScript ( javascript )
Obtenha o número de elementos no mapa
A size
propriedade retorna o número de entradas do objeto Map.
console.log(userRoles.size); // 3
Linguagem de código: JavaScript ( javascript )
Iterar sobre as chaves do mapa
Para obter as chaves de um Map
objeto, 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 userRoles
objeto 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 Map
objeto:
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...of
loop, 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 Map
objeto, 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); // 0
Linguagem de código: JavaScript ( javascript )
Mapa Fraco
A WeakMap
é semelhante a a, Map
exceto pelas chaves de a que WeakMap
devem 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 WeakMap
possui apenas métodos de subconjunto de um Map
objeto:
-
get(key)
-
set(key, value)
-
has(key)
-
delete(key)
Aqui estão as principais diferenças entre a Map
e 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.