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.
Crea un nuevo objeto de mapa.
Establece el valor de una clave en un mapa.
Obtiene el valor de una clave en un mapa.
Elimina todos los elementos de un mapa.
Elimina un elemento de mapa especificado por una clave
Devuelve verdadero si existe una clave en un mapa
Invoca una devolución de llamada para cada par clave/valor en un mapa
Devuelve un objeto iterador con los pares [clave, valor] en un mapa
Devuelve un objeto iterador con las claves en un Mapa
Devuelve un objeto iterador de los valores en un mapa.
Devuelve el número de elementos del mapa.
Puede crear un mapa de JavaScript mediante:
Pasar una matriz a new Map()
Cree un mapa y use Map.set()
Puedes crear un mapa pasando una matriz al constructor new Map()
:
// 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>
Puedes agregar elementos a un Mapa con el método set()
:
// 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:
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>
El método get()
obtiene el valor de una clave en un mapa:
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:
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()
elimina un elemento Map:
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 clear()
elimina todos los elementos de un mapa:
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>
El método has()
devuelve verdadero si existe una clave en un mapa:
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>
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>
typeof
devuelve el objeto:
// 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:
// 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>
Directamente iterable
Tener una propiedad de tamaño
Las claves pueden ser de cualquier tipo de datos.
Las claves se ordenan por inserción.
No tener claves predeterminadas
El método forEach()
invoca una devolución de llamada para cada par clave/valor en un mapa:
// 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()
devuelve un objeto iterador con la [clave,valores] en un mapa:
// 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>
El método keys()
devuelve un objeto iterador con las claves en un mapa:
// 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>
El método values()
devuelve un objeto iterador con los valores en un mapa:
// 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:
// 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>
Poder utilizar objetos como claves es una característica importante del Mapa.
// 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"):
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>
Los mapas JavaScript son compatibles con todos los navegadores, excepto Internet Explorer:
Chrome | Edge | Firefox | Safari | Opera |