Introducción a los mapas en JavaScript

Los mapas son una nueva estructura de datos en JavaScript que le permite crear colecciones de pares clave-valor. Se introdujeron con ES6 (también llamado ES2015) junto con Sets en JavaScript. Un objeto de mapa puede almacenar tanto objetos como primitivos como claves y valores.

Los mapas son similares a los objetos que también se utilizan para almacenar datos de clave-valor. Pero la principal diferencia es que las claves del mapa pueden ser de cualquier tipo y no se limitan solo a cadenas y símbolos. A diferencia de los objetos, también es más fácil obtener el tamaño del mapa.

Inicializar un mapa

Al igual que los conjuntos, puedes usar Map() constructor para crear un mapa vacío:

const items = new Map(); 

También puede pasar un iterable (como una matriz) al constructor para inicializar el mapa:

const items = new Map([['🦅', 'Eagle'], ['🐶', 'Dog']]); 

Métodos de mapa

Los principales métodos y propiedades son set() , get() , has() , size , delete() y clear() . Aquí hay un ejemplo simple de un mapa que muestra el uso de estos métodos:

const items = new Map();

// add items
items.set('🐶', 'Dog');
items.set('🦅', 'Eagle');
items.set('🚄', 'Train');
items.set(45, 'Number');
items.set(true, 'Boolean');

// get item
items.get(45); // Number
items.get('🐶'); // Dog
items.get('🐺'); // undefined

// check if key exists
items.has('🚄'); // true
items.has('🐺'); // false

// get items count
items.size; // 5

// delete item
items.delete('🦅'); // true
items.delete('🦅'); // false - already removed

// delete all items
items.clear();

Al igual que los conjuntos, las claves de mapa también son únicas. Llamando a set() más de una vez con la misma clave no agregará varios pares clave-valor. En cambio, la parte del valor se reemplaza con el valor más nuevo:

const animals = new Map();

animals.set('🐺', 'Wolf');
animals.set('🐺', 'Wolf Face');

console.log(animals); // Map(1) {"🐺" => "Wolf Face"}

Objetos en el Mapa

Dado que los mapas nos permiten almacenar cualquier tipo de datos como clave o valor, podemos almacenar objetos complejos como objetos literales, matrices e incluso funciones:

const props = {
    browser: 'Chrome',
    os: 'Ubuntu 19.04'
};

const hamburger = () => '🍔'; 

const things = new Map();

things.set('birds', ['🦉', '🦅']);
things.set('user', {name: 'John Doe', planet: 'Earth'});
things.set(props, 59);
things.set(hamburger, 'What is the food?');

things.get(props); // 59
things.get(hamburger); // What is the food?

Iterando sobre mapas

A diferencia de los objetos, cuando iteramos sobre el mapa, los pares clave-valor se devuelven en el mismo orden en que se insertaron. Podemos usar for...of bucle para iterar sobre todos los pares clave-valor:

const foods = new Map([
    ['🍌', 'Banana'],
    ['🍕', 'Pizza'],
    ['🥒', 'Cucumber'],
    ['🌽', 'Maize'],
]);

for (const [key, value] of foods) {
    console.log(`${key}: ${value}`);
}

// 🍌: Banana
// 🍕: Pizza
// 🥒: Cucumber
// 🌽: Maize

Del mismo modo, también podemos usar el forEach() incorporado método para iterar sobre todos los elementos:

foods.forEach((key, value) => {
    console.log(`${key}: ${value}`);
});

Claves y valores

Los mapas proporcionan keys() y values() métodos para acceder a las claves y valores únicamente. Estos métodos devuelven un nuevo objeto iterable que también se puede usar para iterar sobre todas las claves o valores:

for (const key of foods.keys()) {
    console.log(key);
}

for (const value of foods.values()) {
    console.log(value);
}

El Map el objeto también tiene el entries() método que devuelve un iterable para las entradas [key, value] . Este método se usa por defecto en for...of círculo. He aquí un ejemplo:

for (const [key, value] of foods.entries()) {
    console.log(`${key}: ${value}`);
}

Similar a los conjuntos, puede llamar al next() método en el iterable devuelto por el entries() método para recorrer los pares clave-valor uno por uno:

const entries = foods.entries();

console.log(entries.next()); // {value: ["🍌", "Banana"], done: false}

Conclusión

Un mapa es una colección de pares clave-valor, que nos permite almacenar objetos y primitivas como claves y valores. A diferencia de los objetos, las claves de mapa pueden ser de cualquier tipo:objetos, arreglos, funciones o incluso otro mapa. Similar a los conjuntos, las claves son únicas; solo pueden ocurrir una vez en todo el mapa. Cuando iteramos sobre un objeto de mapa, los pares clave-valor se devuelven en el mismo orden en que se insertaron en el mapa.

Si está interesado en obtener más información, consulte nuestra guía sobre conjuntos en JavaScript.