Ordenar un mapa ES6 en JavaScript

Saad Aslam 12 octubre 2023
  1. Una descripción general del mapa ES6 en JavaScript
  2. Utilice el método .sort() para ordenar un mapa ES6 en JavaScript
  3. Ordenar un mapa ES6 por claves de cadena en JavaScript
  4. Ordenar un mapa ES6 por claves numéricas en JavaScript
Ordenar un mapa ES6 en JavaScript

Este artículo detalla los pasos esenciales para ordenar un mapa ES6 usando JavaScript y demuestra esos procedimientos.

Una descripción general del mapa ES6 en JavaScript

El uso de un objeto como mapa tiene varios inconvenientes que se solucionan con el nuevo tipo de colección llamado Mapa, que se introdujo en ES6.

El objeto de mapa almacena pares clave-valor por definición y se pueden usar valores de cualquier tipo para las claves o los valores de los pares que almacena. Además, un objeto Mapa recordará la secuencia original en la que se insertaron las claves en el Mapa.

Utilice el método .sort() para ordenar un mapa ES6 en JavaScript

Si quiere ordenar las claves en un Mapa, puede usar el método .sort() para hacerlo; por ejemplo, var waqarMap = new Map([...mapA].sort()). Usando el operador Spread (...), podemos obtener todas las entradas del Mapa en una matriz, que luego ordenaremos usando la técnica de clasificación.

Para ordenar los miembros de la matriz, la función sort() utiliza la siguiente lógica:

  • Si el valor de retorno de la función de comparación es mayor que 0, la matriz debe ordenarse con b antes de a.
  • Si el valor de retorno de la función de comparación es menor que 0, entonces a debe ir antes de b en el orden de clasificación.
  • Si el resultado devuelto por la función de comparación es igual a 0, el orden de a y b debe permanecer igual que antes.

Organizaremos el Mapa de dos maneras: primero, en función de que las claves sean cadenas, y segundo, en función de que las claves sean números.

Comencemos primero con los componentes clave de cadena.

Ordenar un mapa ES6 por claves de cadena en JavaScript

Cree una nueva variable llamada waqarMap e inicialícela produciendo un objeto de la clase Map().

var waqarMap = new Map();

Ahora, agregaremos algunos valores al Mapa usando la función .set(), que toma dos parámetros. El primer parámetro es la clave utilizada para realizar la clasificación y el segundo parámetro es el valor de la clave que se imprimirá en la consola junto a la clave.

En este punto, tenemos nuestro Mapa en la mano y está preparado para ser ordenado.

waqarMap.set('c', 'three');
waqarMap.set('e', 'five');
waqarMap.set('d', 'four');
waqarMap.set('b', 'two');
waqarMap.set('f', 'six');
waqarMap.set('a', 'one');

El simple uso de la función ordenar () es todo lo que se requiere para ordenar un mapa cuyas claves son valores de cadena.

var sortedMap = new Map([...waqarMap].sort());

Ahora que el Mapa ha sido ordenado, necesitamos imprimirlo en la consola.

console.log(sortedMap);

Código fuente para ordenar un mapa ES6 por claves de cadena en orden ascendente

var waqarMap = new Map();

waqarMap.set('c', 'three');
waqarMap.set('e', 'five');
waqarMap.set('d', 'four');
waqarMap.set('b', 'two');
waqarMap.set('f', 'six');
waqarMap.set('a', 'one');

var sortedMap = new Map([...waqarMap].sort());

console.log(sortedMap);

Salida en orden ascendente:

Map {
  'a' => 'one',
  'b' => 'two',
  'c' => 'three',
  'd' => 'four',
  'e' => 'five',
  'f' => 'six' }

Cuando aplicamos el método .sort(), aquí se debe usar otra función, denominada .reverse().. Esto es necesario para ordenar el Mapa en orden descendente.

El resto de los pasos son los mismos excepto este.

var sortedMap = new Map([...waqarMap].sort().reverse());

Salida en orden descendente:

Map {
  'f' => 'six',
  'e' => 'five',
  'd' => 'four',
  'c' => 'three',
  'b' => 'two',
  'a' => 'one' }

Ordenar un mapa ES6 por claves numéricas en JavaScript

Crea una nueva variable llamada numberMap,, y luego inicialízala produciendo un objeto de la clase Map(). Añade los valores al mapa usando la función .set().

var numberMap = new Map();

numberMap.set('3', 'Nabeel');
numberMap.set('1', 'Saad');
numberMap.set('6', 'Khan');
numberMap.set('5', 'Sindhu');
numberMap.set('2', 'Aslam');
numberMap.set('4', 'Zeeshan');

Aquí, las claves del mapa son números, entonces el método sort() requiere que le proporciones una función como argumento. Una función determina el orden de clasificación enviado como argumento para el procedimiento.

var sortedMap = new Map([...numberMap.entries()].sort());
console.log(sortedMap);

Código fuente para ordenar un mapa ES6 por teclas numéricas en orden ascendente

var numberMap = new Map();

numberMap.set('3', 'Nabeel');
numberMap.set('1', 'Saad');
numberMap.set('6', 'Khan');
numberMap.set('5', 'Sindhu');
numberMap.set('2', 'Aslam');
numberMap.set('4', 'Zeeshan');

var sortedMap = new Map([...numberMap.entries()].sort());

console.log(sortedMap);

Salida en orden ascendente:

Map {
  '1' => 'Saad',
  '2' => 'Aslam',
  '3' => 'Nabeel',
  '4' => 'Zeeshan',
  '5' => 'Sindhu',
  '6' => 'Khan' }

Necesitamos usar otra función llamada .reverse() si queremos ordenar nuestros datos en el orden opuesto al que fueron ordenados. Debido a que este paso es necesario para ordenar el Mapa en orden descendente y el resto son idénticos, esta es la única diferencia entre los dos procedimientos.

var sortedMap = new Map([...numberMap.entries()].sort().reverse());

Salida en orden descendente:

Map {
  '6' => 'Khan',
  '5' => 'Sindhu',
  '4' => 'Zeeshan',
  '3' => 'Nabeel',
  '2' => 'Aslam',
  '1' => 'Saad' }
Autor: Saad Aslam
Saad Aslam avatar Saad Aslam avatar

I'm a Flutter application developer with 1 year of professional experience in the field. I've created applications for both, android and iOS using AWS and Firebase, as the backend. I've written articles relating to the theoretical and problem-solving aspects of C, C++, and C#. I'm currently enrolled in an undergraduate program for Information Technology.

LinkedIn

Artículo relacionado - JavaScript Map