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.

Um Mapa possui uma propriedade que representa o tamanho do mapa.

Métodos de mapa

new Map(): Cria um novo objeto Mapa
set(): Define o valor de uma chave em um mapa
get(): Obtém o valor de uma chave em um mapa
clear(): Remove todos os elementos de um mapa
delete(): Remove um elemento Map especificado por uma chave
has(): Retorna verdadeiro se existir uma chave em um mapa
forEach(): Invoca um retorno de chamada para cada par chave/valor em um mapa
entries(): Retorna um objeto iterador com os pares [chave, valor] em um mapa
keys(): Retorna um objeto iterador com as chaves em um mapa
values(): Retorna um objeto iterador dos valores em um mapa

size: Retorna o número de elementos do mapa

Como criar um mapa

Você pode criar um mapa JavaScript:

Passando um array para new Map()
Crie um mapa e use Map.set()

`novo mapa()`

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>

`Map.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", 500);

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>

`Map.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>

`Map.size`

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>

`Map.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>

`Map.clear()`

O método clear() remove todos os elementos de um mapa:

Exemplo

fruits.clear();

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Clearing a Map:</p>

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

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

// Clear the Map
fruits.clear();

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

</body>
</html>

`Map.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>

Mapas são objetos

typeof retorna objeto:

Exemplo

// Returns object:
typeof fruits;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Map typeof:</p>

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

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

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

</body>
</html>

instanceof Map retorna verdadeiro:

Exemplo

// Returns true:
fruits instanceof Map;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Map instanceof:</p>

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

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

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

</body>
</html>

Objetos JavaScript versus mapas

Diferenças entre objetos JavaScript e mapas:

Not directly iterable: Diretamente iterável
Do not have a size property: Tenha uma propriedade de tamanho
Keys must be Strings (or Symbols): As chaves podem ser qualquer tipo de dados
Keys are not well ordered: As chaves são ordenadas por inserção
Have default keys: Não tem chaves padrão

`Map.forEach()`

O método forEach() invoca um retorno de chamada 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>

`Map.entries()`

O método entries() retorna um objeto iterador com [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>

`Map.keys()`

O método keys() retorna um objeto iterador com as chaves em um mapa:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.keys():</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.keys()) {
  text += x + "<br>";
}

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

</body>
</html>

`Map.values()`

O método values() retorna um objeto iterador com os valores em um Mapa:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.values():</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.values()) {
  text += x + "<br>";
}

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

</body>
</html>

Você pode usar o método values() para somar os valores em um mapa:

Exemplo

// Sum all values
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

Experimente você mesmo →

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

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

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

let total = 0;
for (const x of fruits.values()) {
  total += x;
}

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

</body>
</html>

Objetos como chaves

Ser capaz de usar objetos como chaves é um recurso importante do Mapa.

Exemplo

// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};

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

// Add new Elements to the Map
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>Being able to use objects as keys is an important Map feature:</p>

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

<script>
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};

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

// Add the Objects to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

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

</body>
</html>

Lembre-se: a chave é um objeto (maçãs), não uma string (“maçãs”):

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>

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

<script>
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};

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

// Add Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

document.getElementById("demo").innerHTML = fruits.get("apples");
</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