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.
Crea un nuevo mapa
Establece el valor de una clave en un mapa.
Obtiene el valor de una clave en un mapa.
Elimina un elemento de mapa especificado por la clave
Devuelve verdadero si existe una clave en un mapa
Llama a una función para cada par clave/valor en un mapa
Devuelve un iterador con los pares [clave, valor] en un mapa
Devuelve el número de elementos de un mapa.
Puede crear un mapa de JavaScript mediante:
Pasar una matriz a new Map()
Cree un mapa y use Map.set()
new Map()
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>
set()
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", 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>
get()
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>
size
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>
delete()
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>
has()
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>
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
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
forEach()
El método forEach()
llama a una función 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>
entries()
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>
Los mapas JavaScript son compatibles con todos los navegadores, excepto Internet Explorer:
Chrome | Edge | Firefox | Safari | Opera |