Mapas JavaScript


Tabla de contenido

    Mostrar tabla de contenidos

Un mapa contiene pares clave-valor donde las claves pueden ser de cualquier tipo de datos.

Un mapa recuerda el orden de inserción original de las claves.

Un mapa tiene una propiedad que representa el tamaño del mapa.

Métodos de mapa

new Map()

Crea un nuevo objeto de mapa.

set()

Establece el valor de una clave en un mapa.

get()

Obtiene el valor de una clave en un mapa.

clear()

Elimina todos los elementos de un mapa.

delete()

Elimina un elemento de mapa especificado por una clave

has()

Devuelve verdadero si existe una clave en un mapa

forEach()

Invoca una devolución de llamada para cada par clave/valor en un mapa

entries()

Devuelve un objeto iterador con los pares [clave, valor] en un mapa

keys()

Devuelve un objeto iterador con las claves en un Mapa

values()

Devuelve un objeto iterador de los valores en un mapa.

size

Devuelve el número de elementos del mapa.


Cómo crear un mapa

Puede crear un mapa de JavaScript mediante:

  • Pasar una matriz a new Map()

  • Cree un mapa y use Map.set()


nuevo mapa()

Puedes crear un mapa pasando una matriz al constructor new Map():

Ejemplo

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

Pruébelo usted mismo →

<!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>


Mapa.set()

Puedes agregar elementos a un Mapa con el método set():

Ejemplo

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

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

Pruébelo usted mismo →

<!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>

El método set() también se puede utilizar para cambiar los valores del mapa existentes:

Ejemplo

fruits.set("apples", 500);

Pruébelo usted mismo →

<!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()

El método get() obtiene el valor de una clave en un mapa:

Ejemplo

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

Pruébelo usted mismo →

<!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>



Mapa.tamaño

La propiedad tamaño devuelve el número de elementos en un mapa:

Ejemplo

fruits.size;

Pruébelo usted mismo →

<!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>


Mapa.delete()

El método delete() elimina un elemento Map:

Ejemplo

fruits.delete("apples");

Pruébelo usted mismo →

<!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>


Mapa.clear()

El método clear() elimina todos los elementos de un mapa:

Ejemplo

fruits.clear();

Pruébelo usted mismo →

<!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>


Mapa.has()

El método has() devuelve verdadero si existe una clave en un mapa:

Ejemplo

fruits.has("apples");

Pruébelo usted mismo →

<!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>

Prueba esto:

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

Pruébelo usted mismo →

<!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>


Los mapas son objetos

typeof devuelve el objeto:

Ejemplo

// Returns object:
typeof fruits;

Pruébelo usted mismo →

<!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 El mapa devuelve verdadero:

Ejemplo

// Returns true:
fruits instanceof Map;

Pruébelo usted mismo →

<!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

Diferencias entre objetos JavaScript y mapas:

Not directly iterable

Directamente iterable

Do not have a size property

Tener una propiedad de tamaño

Keys must be Strings (or Symbols)

Las claves pueden ser de cualquier tipo de datos.

Keys are not well ordered

Las claves se ordenan por inserción.

Have default keys

No tener claves predeterminadas


Mapa.forEach()

El método forEach() invoca una devolución de llamada para cada par clave/valor en un mapa:

Ejemplo

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

Pruébelo usted mismo →

<!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>

Mapa.entradas()

El método entries() devuelve un objeto iterador con la [clave,valores] en un mapa:

Ejemplo

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

Pruébelo usted mismo →

<!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>

Mapa.keys()

El método keys() devuelve un objeto iterador con las claves en un mapa:

Ejemplo

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

Pruébelo usted mismo →

<!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>

Mapa.valores()

El método values() devuelve un objeto iterador con los valores en un mapa:

Ejemplo

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

Pruébelo usted mismo →

<!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>

Puede utilizar el método values() para sumar los valores en un mapa:

Ejemplo

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

Pruébelo usted mismo →

<!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 claves

Poder utilizar objetos como claves es una característica importante del Mapa.

Ejemplo

// 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);

Pruébelo usted mismo →

<!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>

Recuerde: la clave es un objeto (manzanas), no una cadena ("manzanas"):

Ejemplo

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

Pruébelo usted mismo →

<!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>


Soporte del navegador

Los mapas JavaScript son compatibles con todos los navegadores, excepto Internet Explorer:

Chrome Edge Firefox Safari Opera