¿Qué es JavaScript Map y cómo usarlo?

En este artículo, discutiremos Mapa en JavaScript.

¿Qué es Mapa?

Es un objeto que contiene el par clave-valor. Es una colección de elementos en la que los elementos están presentes en pares clave-valor. El mapa recuerda el orden original de inserción de llaves. La clave y el valor en el mapa pueden ser cualquier objeto y valores primitivos. Lo proporciona ES6. Da los elementos en el mismo orden en que han sido insertados.

Sintaxis:

const x = new Map( [iterable_objects] );

Podemos crear un nuevo objeto con la ayuda de la sintaxis anterior. Toma parámetros como elementos iterables que se almacenarían como pares de clave y valor.

Si no le proporcionamos ningún elemento iterable, crearía un objeto vacío.

Crear un objeto vacío:

const x = new Map( );

Tipo de retorno: Devuelve un nuevo objeto de mapa.

Ejemplo de Map que toma como parámetro un elemento iterable:
 

<script>
  const company = new Map([
    ["name", "GFG"],
    ["no_of_employee", 200],
    ["category","education"]
  ]);
  function print(key,values) {
      console.log(values+"=>"+key);
  }
  company.forEach(print);
<script/>

Producción:

name=>GFG
no_of_employee=>200
category=>education

Ejemplo de Map que devuelve un objeto vacío.

<script>
  const company = new Map();
  company.set("name","GFG");
  company.set("no_of_employee",200);
  company.set("category","education");
  function print(key,values)
  {
      console.log(values+"=>"+key);
  }
  company.forEach(print);
<script/>

Producción:

name=>GFG
no_of_employee=>200
category=>education

Propiedades:

Map.prototype.size – Devuelve el número de elementos en un Mapa.

<script>
  const company = new Map();
  company.set("name","GFG");
  company.set("no_of_employee",200);
  company.set("category","education");
  console.log(company.size);
<script/>

Producción:

3

Métodos

1. Método Map.prototype[@@iterator](): devuelve una función de iterador de mapa, que es un método de entrada predeterminado

Sintaxis:

My_map[Symbol.iterator]

Valor devuelto: Devuelve una función de iterador de mapa.

Ejemplo:

<script>
  const company = new Map();
  company.set("name","GFG");
  company.set("no_of_employee",200);
  company.set("category","education");
  
  const iterator1 = company[Symbol.iterator]();
  
  for(const item of iterator1) {
    console.log(item);
  }
<script/>

Producción:

Array ["name", "GFG"]
Array ["no_of_employee", 200]
Array ["category","education"]

2. Método Map.prototype.clear(): Este método elimina todos los elementos del objeto Map.

Sintaxis:

clear()

Tipo de retorno: Indefinido

Ejemplo:

<script>
  const company = new Map();
  company.set("name","GFG");
  company.set("no_of_employee",200);
  company.set("category","education");
  
  company.clear();
  console.log(company.size);
<script/>

Producción:

0

3. Método Map.prototype.delete(): este método elimina el elemento especificado de un mapa como una clave.

Sintaxis:

delete(key)

Esto elimina la clave del objeto.

Tipo de devolución:

• True , si el elemento ha sido eliminado del objeto
• False , si el elemento no existe en el objeto

Ejemplo:

<script>
  const company = new Map();
  company.set("name","GFG");
  company.set("no_of_employee",200);
  company.set("category","education");
  
  company.delete('category');
  console.log(company.size);  
<script/>

Producción:

2

4. Método Map.prototype.entries(): Devuelve un objeto iterable. Y ese objeto contiene el par clave-valor de cada elemento.

Sintaxis:

entries()

Tipo de retorno: Devuelve un nuevo tipo de objeto iterable.

Ejemplo:

<script>
  const company = new Map();
  company.set("name","GFG");
  company.set("no_of_employee",200);
  company.set("category","education");
  
  const itr = company.entries();
  console.log(itr.next().value);
<script/>

Producción:

Array ["name","GFG"]

5. Método Map.prototype.forEach(): itera a través de cada elemento del objeto y ejecuta una función de devolución de llamada en cada elemento del objeto.

Sintaxis:

my_map.forEach(callback, ele);
my_map.forEach(callback);

Tipo de retorno: indefinido

Ejemplo:

<script>
  const company = new Map();
  company.set("name","GFG");
  company.set("no_of_employee",200);
  company.set("category","education");
  function print(key,value) {
      console.log(value + "=>" + key);
  }
  company.forEach(print);
<script/>

Producción:

name=>GFG
no_of_employee=>200
category=>education

6. Método Map.prototype.get(): Devuelve el valor de la clave.

Sintaxis:

get(key)

Tipo de devolución:

• Devuelve el valor si la clave está presente.
• indefinido si la clave no está presente.

Ejemplo:

<script>
  const company = new Map();
  company.set("name","GFG");
  company.set("no_of_employee",200);
  company.set("category","education");
  console.log( company.get("name") );
<script/>

Producción:

GFG

7. Método Map.prototype.has(): Devuelve un valor booleano dependiendo de si la clave está presente o no.

Sintaxis:

has(key)

Tipo de devolución:

• Cierto , si la clave está presente
• Falso , si la clave no está presente

Ejemplo:

<script>
  const company = new Map();
  company.set("name","GFG");
  company.set("no_of_employee",200);
  company.set("category","education");
  if(company.has("name")) {
      console.log("It is present");
  } else {
      console.log("It is not present");
  }
<script/>

Producción:

It is present

8. Método Map.prototype.keys(): Devuelve un objeto iterable que contiene la clave en el mismo orden de inserción.

Sintaxis:

keys()

Tipo de retorno: Devuelve un objeto iterable.

Ejemplo:

<script>
  const company = new Map();
  company.set("name","GFG");
  company.set("no_of_employee",200);
  company.set("category","education");
  const itr = company.keys();
  console.log(itr.next().value);
<script/>

Producción:

name

9. Método Map.prototype.set(): se utiliza para agregar claves y valores a los objetos del mapa.

Sintaxis:

set(key, value)

clave: clave del elemento que se agregará al mapa
valor: el valor de la clave que se agregará

Tipo de retorno: Devuelve el objeto Mapa.

Ejemplo:

<script>
  const company = new Map();
  company.set("name","GFG");
  company.set("no_of_employee",200);
  company.set("category","education");
  console.log(company.get("no_of_employee"));
<script/>

Producción:

200

10. Método Map.prototype.values(): Devuelve el objeto iterable que contiene los valores de cada elemento del mapa.

Sintaxis:

values()

Tipo de retorno: Devuelve el nuevo objeto Mapa.

Ejemplo:

<script>
  const company = new Map();
  company.set("name","GFG");
  company.set("no_of_employee",200);
  company.set("category","education");
  
  const itr = company.values();
  console.log(company.get("category"));
<script/>

Producción:

education