10 métodos de mapa JavaScript que você deve dominar hoje

Um Mapa JavaScript é uma coleção que armazena cada um de seus elementos como um par de valores-chave. Esse tipo de dados também é conhecido como array associativo ou dicionário.

Você pode usar qualquer tipo de dados (primitivos e objetos) como uma chave ou um valor. O objeto Map lembra a ordem original de inserção, embora você normalmente acesse os valores por sua chave.

Neste artigo, você aprenderá sobre dez métodos de mapa de JavaScript que você deve dominar hoje.

1. Como criar um novo mapa em JavaScript

Você pode criar um novo objeto de mapa usando o Mapa() construtor. Este construtor aceita um parâmetro: um objeto iterável cujos elementos são pares chave-valor.

deixe mapObj = new Map ([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman Forever'],
[2005, 'Batman Begins'],
[2008, 'The Dark Knight'],
[2012, 'The Dark Knight Rises']
]);
console.log (mapObj);

Saída:

Mapa (7) {
1966 => 'Batman: o filme',
1989 => 'Batman',
1992 => 'Retorno do Batman',
1995 => 'Batman para sempre',





instagram viewer


2005 => 'Batman Begins',
2008 => 'O Cavaleiro das Trevas',
2012 => 'The Dark Knight Rises'
}

Se você não fornecer o parâmetro, o JavaScript criará um novo mapa vazio.

deixe mapObj = new Map ();
console.log (mapObj);

Saída:

Mapa (0) {}

Se você tentar criar um mapa com chaves duplicadas, cada chave repetida sobrescreverá o valor anterior com o novo valor.

deixe mapObj = new Map ([
['chave1', 'valor1'],
['chave2', 'valor2'],
['key2', 'newValue2']
]);
console.log (mapObj);

Saída:

Mapa (2) {
'key1' => 'valor1',
'key2' => 'newValue2'
}

Aqui, o valor armazenado em relação ao chave2 chave é newValue2, não o anterior valor2.

Você também pode criar um objeto Map que contém pares de valores-chave usando tipos de dados mistos.

deixe mapObj = new Map ([
["string1", 1],
[2, "string2"],
["string3", 433,234],
[23.56, 45]
]);
console.log (mapObj);

Saída:

Mapa (4) {
'string1' => 1,
2 => 'string2',
'string3' => 433,234,
23.56 => 45
}

2. Adicionar novos elementos a um objeto de mapa

Você pode adicionar um novo elemento ao objeto Mapa usando o definir() método. Este método aceita uma chave e um valor e adiciona um novo elemento ao objeto Map. O método então retorna o novo objeto Map com o valor adicionado. Se a chave já existe no mapa, o novo valor substituirá o valor existente.

deixe mapObj = new Map ();
mapObj.set (1966, 'Batman: The Movie');
mapObj.set (1989, 'Batman');
mapObj.set (1992, 'Batman Returns');
mapObj.set (1995, 'Batman Forever');
console.log (mapObj);

Saída:

Mapa (4) {
1966 => 'Batman: o filme',
1989 => 'Batman',
1992 => 'Retorno do Batman',
1995 => 'Batman para sempre'
}

Você também pode usar variáveis ​​ou constantes como chaves ou valores:

const year1 = 1966;
const movieName1 = 'Batman: o filme';
deixe ano2 = 1989;
var movieName2 = 'Batman';
deixe mapObj = new Map ();
mapObj.set (ano1, nome do filme1);
mapObj.set (ano2, nome do filme2);
console.log (mapObj);

Saída:

Mapa (2) {
1966 => 'Batman: o filme',
1989 => 'Batman'
}

o definir() método suporta encadeamento.

deixe mapObj = new Map ();
mapObj.set (1966, 'Batman: The Movie')
.set (1989, 'Batman')
.set (1992, 'Batman Returns')
.set (1995, 'Batman Forever');
console.log (mapObj);

Saída:

Mapa (4) {
1966 => 'Batman: o filme',
1989 => 'Batman',
1992 => 'Retorno do Batman',
1995 => 'Batman para sempre'
}

3. Remover todos os elementos de um objeto de mapa

Você pode remover todos os elementos de um objeto Mapa usando o Claro() método. Este método sempre retorna Indefinido.

deixe mapObj = new Map ([
[1966, 'Batman: The Movie'],
[1989, 'Batman']
]);
console.log ("Tamanho do objeto Mapa:" + mapObj.size);
console.log (mapObj);
mapObj.clear ();
console.log ("Tamanho do objeto Mapa após limpar os elementos:" + mapObj.size);
console.log (mapObj);

Saída:

Tamanho do objeto Mapa: 2
Mapa (2) {1966 => 'Batman: o filme', 1989 => 'Batman'}
Tamanho do objeto Mapa após limpar os elementos: 0
Mapa (0) {}

4. Excluir um elemento específico de um mapa

Você pode remover um elemento específico de um objeto Mapa usando o excluir() método. Este método aceita a chave do elemento a ser excluído do Mapa. Se a chave existe, o método retorna verdade. Caso contrário, ele retorna falso.

deixe mapObj = new Map ([
[1966, 'Batman: The Movie'],
[1989, 'Batman']
]);
console.log ("Mapa inicial:");
console.log (mapObj);
mapObj.delete (1966);
console.log ("Mapear após deletar o elemento com a chave como 1966");
console.log (mapObj);

Saída:

Mapa inicial:
Mapa (2) {1966 => 'Batman: o filme', 1989 => 'Batman'}
Mapeie após excluir o elemento com a chave como 1966
Mapa (1) {1989 => 'Batman'}

5. Verifique se existe um elemento em um mapa

Você pode verificar se um elemento existe em um objeto Map usando o tem() método. Este método aceita a chave do elemento como um parâmetro para testar a presença no objeto Mapa. Este método retorna verdade se a chave existe. Caso contrário, ele retorna falso.

deixe mapObj = new Map ([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman Forever'],
[2005, 'Batman Begins'],
[2008, 'The Dark Knight'],
[2012, 'The Dark Knight Rises']
]);
console.log (mapObj.has (1966));
console.log (mapObj.has (1977));

Saída:

verdade
falso

Um elemento com chave 1966 existe no objeto Map, então o método retornado verdade. Mas, uma vez que não há nenhum elemento com chave 1977 no objeto Map, o método retornado falso a partir da segunda chamada.

Relacionado: O que é JavaScript e como funciona?

6. Acessando o valor de uma chave específica

o pegue() método retorna um elemento específico do objeto Map. Este método aceita a chave do elemento como parâmetro. Se a chave existe no objeto Map, o método retorna o valor do elemento. Caso contrário, ele retorna Indefinido.

deixe mapObj = new Map ([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman Forever'],
[2005, 'Batman Begins'],
[2008, 'The Dark Knight'],
[2012, 'The Dark Knight Rises']
]);
console.log (mapObj.get (1966));
console.log (mapObj.get (1988));

Saída:

Batman: o filme
Indefinido

Um elemento com chave 1966 existe no objeto Map, então o método retornou o valor do elemento. Não há nenhum elemento com chave 1988 no objeto Map, então o método retornou Indefinido.

7. Acesse as entradas de um mapa por meio de um iterador

De acordo com o oficial MDN Web Docs:

O método entries () retorna um novo objeto Iterator que contém os pares [chave, valor] para cada elemento no objeto Map na ordem de inserção. Nesse caso específico, esse objeto iterador também é iterável, portanto, o loop for-of pode ser usado. Quando o protocolo [Symbol.iterator] é usado, ele retorna uma função que, quando chamada, retorna o próprio iterador.

Você pode acessar cada elemento do Mapa usando este iterador e um para de demonstração:

deixe mapObj = new Map ([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman Forever'],
[2005, 'Batman Begins'],
[2008, 'The Dark Knight'],
[2012, 'The Dark Knight Rises']
]);
para (permitir a entrada de mapObj.entries ()) {
console.log (entrada);
}

Saída:

[1966, 'Batman: The Movie']
[1989, 'Batman']
[1992, 'Batman Returns']
[1995, 'Batman Forever']
[2005, 'Batman Begins']
[2008, 'The Dark Knight']
[2012, 'The Dark Knight Rises']

Ou você pode usar o recurso de atribuição de destruição ES6 para acessar cada chave e valor:

deixe mapObj = new Map ([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns'],
[1995, 'Batman Forever'],
[2005, 'Batman Begins'],
[2008, 'The Dark Knight'],
[2012, 'The Dark Knight Rises']
]);
para (deixe [chave, valor] de mapObj.entries ()) {
console.log ("Chave:" + chave + "Valor:" + valor);
}

Saída:

Chave: 1966 Valor: Batman: o filme
Chave: 1989 Valor: Batman
Chave: Valor de 1992: Retorno do Batman
Chave: Valor de 1995: Batman para sempre
Chave: Valor de 2005: Batman Begins
Chave: Valor de 2008: O Cavaleiro das Trevas
Chave: Valor de 2012: The Dark Knight Rises

8. Como iterar os valores de um mapa

o valores () método retorna um Iterator objeto que contém todos os valores em um mapa e faz isso na ordem de inserção.

deixe mapObj = new Map ([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns']
]);
const iteratorObj = mapObj.values ​​();
para (deixe o valor de iteratorObj) {
console.log (valor);
}

Saída:

Batman: o filme
homem Morcego
Batman Returns

9. Iterar sobre as chaves de um mapa

o chaves() método retorna um Iterator objeto que contém todas as chaves em um mapa e faz isso na ordem de inserção.

deixe mapObj = new Map ([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns']
]);
const iteratorObj = mapObj.keys ();
for (let key of iteratorObj) {
console.log (chave);
}

Saída:

1966
1989
1992

Relacionado: As funções de seta do JavaScript podem torná-lo um desenvolvedor melhor

10. Iterar sobre os elementos em um mapa usando um retorno de chamada

o para cada() método invoca uma função de retorno de chamada para cada elemento do objeto Map. A função de retorno de chamada tem dois parâmetros: a chave e o valor.

function printKeyValue (chave, valor) {
console.log ("Chave:" + chave + "Valor:" + valor);
}
deixe mapObj = new Map ([
[1966, 'Batman: The Movie'],
[1989, 'Batman'],
[1992, 'Batman Returns']
]);
mapObj.forEach (printKeyValue);

Saída:

Chave: Batman: The Movie Value: 1966
Chave: Batman Value: 1989
Chave: Valor de retorno do Batman: 1992

Agora você sabe sobre mapas em JavaScript

Agora você tem conhecimento suficiente para dominar o conceito de Maps em JavaScript. A estrutura de dados do mapa é amplamente usada em muitas tarefas de programação. Depois de dominá-lo, você pode passar para outros objetos JavaScript nativos como Sets, Arrays e assim por diante.

15 métodos de array JavaScript que você deve dominar hoje

Quer entender os arrays JavaScript, mas não consegue entendê-los? Verifique nossos exemplos de array de JavaScript para orientação.

Leia a seguir

Sobre o autor