Mapas JavaScript

Índice

    Mostrar índice

Um mapa contém pares de valores-chave onde as chaves podem ser de qualquer tipo de dados.

Um mapa lembra a ordem de inserção original das chaves.

Métodos de mapa essenciais

new Map()

Cria um novo mapa

set()

Define o valor de uma chave em um mapa

get()

Obtém o valor de uma chave em um mapa

delete()

Remove um elemento Map especificado pela chave

has()

Retorna verdadeiro se existir uma chave em um mapa

forEach()

Chama uma função para cada par chave/valor em um mapa

entries()

Retorna um iterador com os pares [chave, valor] em um mapa

size

Retorna o número de elementos em um Mapa

Como criar um mapa

Você pode criar um mapa JavaScript:

  • Passando um array para new Map()

  • Crie um mapa e use Map.set()

O método new Map()

Você pode criar um Mapa passando um Array para o construtor new Map():

Exemplo

// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Creating a Map from an Array:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

O método set()

Você pode adicionar elementos a um mapa com o método set():

Exemplo

// Create a Map
const fruits = new Map();

// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.set():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map();

// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

O método set() também pode ser usado para alterar valores existentes do mapa:

Exemplo

fruits.set("apples", 200);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.set():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

fruits.set("apples", 200);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

O método get()

O método get() obtém o valor de uma chave em um mapa:

Exemplo

fruits.get("apples");    // Returns 500

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.get():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

A propriedade tamanho

A propriedade size retorna o número de elementos em um mapa:

Exemplo

fruits.size;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.size:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.size;
</script>

</body>
</html>

O método delete()

O método delete() remove um elemento Map:

Exemplo

fruits.delete("apples");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Deleting Map elements:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

// Delete an Element
fruits.delete("apples");

document.getElementById("demo").innerHTML = fruits.size;
</script>

</body>
</html>

O método has()

O método has() retorna verdadeiro se existir uma chave em um mapa:

Exemplo

fruits.has("apples");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.has():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.has("apples");
</script>

</body>
</html>

Experimente isto:

fruits.delete("apples");
fruits.has("apples");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.has():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

// Delete an Element
fruits.delete("apples");

document.getElementById("demo").innerHTML = fruits.has("apples");
</script>

</body>
</html>

Objetos JavaScript versus mapas

Diferenças entre objetos JavaScript e mapas:

Objeto

Iterável: não diretamente iterável

Tamanho: não possui uma propriedade de tamanho

Tipos de chave: As chaves devem ser Strings (ou Símbolos)

Ordem das chaves: As chaves não estão bem ordenadas

Padrões: Tem chaves padrão

Mapa

Iterável: diretamente iterável

Tamanho: Tenha uma propriedade de tamanho

Tipos de chave: As chaves podem ser qualquer tipo de dados

Ordem das chaves: As chaves são ordenadas por inserção

Padrões: Não possuem chaves padrão

O método forEach()

O método forEach() chama uma função para cada par chave/valor em um mapa:

Exemplo

// List all entries
let text = "";
fruits.forEach (function(value, key) {
  text += key + ' = ' + value;
})

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.forEach():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

let text = "";
fruits.forEach (function(value, key) {
  text += key + ' = ' + value + "<br>"
})

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

O método entries()

O método entries() retorna um objeto iterador com a [chave, valores] em um mapa:

Exemplo

// List all entries
let text = "";
for (const x of fruits.entries()) {
  text += x;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.entries():</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

let text = "";
for (const x of fruits.entries()) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Suporte ao navegador

Os mapas JavaScript são suportados em todos os navegadores, exceto no Internet Explorer:

Chrome Edge Firefox Safari Opera