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.

Métodos de mapas esenciales

new Map()

Crea un nuevo mapa

set()

Establece el valor de una clave en un mapa.

get()

Obtiene el valor de una clave en un mapa.

delete()

Elimina un elemento de mapa especificado por la clave

has()

Devuelve verdadero si existe una clave en un mapa

forEach()

Llama a una función para cada par clave/valor en un mapa

entries()

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

size

Devuelve el número de elementos de un 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()


El método new Map()

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>


El método 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", 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([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

fruits.set("apples", 200);

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

</body>
</html>


El método 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>



La propiedad size

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>


El método 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>


El método 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>


Objetos JavaScript versus mapas

Diferencias entre objetos JavaScript y mapas:

Objeto

Iterable: No es iterable directamente

Tamaño:No tiene una propiedad de tamaño

Tipos de claves: Las claves deben ser cadenas (o símbolos)

Orden de claves: Las claves no están bien ordenadas

Valores predeterminados: tener claves predeterminadas

Mapa

Iterable: Directamente iterable

Tamaño:Tiene una propiedad de tamaño

Tipos de claves: Las claves pueden ser de cualquier tipo de datos

Orden de claves: Las claves se ordenan por inserción

Valores predeterminados: No tiene claves predeterminadas


El método forEach()

El método forEach() llama a una función 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>

El método entries()

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>

Soporte del navegador

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

Chrome Edge Firefox Safari Opera