Cómo ordenar una matriz por fecha en JavaScript

En esta breve guía, aprenda a ordenar una matriz en JavaScript tanto para representaciones de cadenas como para objetos de fecha con una función de comparación personalizada y ejemplos prácticos de código.

Introducción

En esta breve guía, cubriremos todos los aspectos necesarios para ordenar una matriz por fecha en JavaScript.

La estructura de datos de matriz en JavaScript tiene un método sort() incorporado, pero no está diseñado para usarse para ordenar una matriz por fecha. Hay muchos formatos de fecha diferentes y debemos hacer que la clasificación funcione sin importar el formato utilizado para representar una fecha.

En primer lugar, analicemos algunos conceptos básicos y restricciones que debemos comprender para poder modificar el método sort() para que pueda ordenar los elementos de una matriz por fecha, y luego mostraremos algunos ejemplos prácticos que explican cómo funciona la ordenación por fechas.

{.icon aria-hidden=“true”}

Nota: En esta guía, ordenaremos una matriz de fechas, pero se aplican las mismas reglas en el caso de ordenar una matriz de objetos que contengan una propiedad de fecha.

Método sort() de JavaScript

Como se mencionó anteriormente, la estructura de datos Array en JavaScript tiene un método sort() integrado que se usa para ordenar los elementos de una matriz. El método sort() funciona convirtiendo los elementos en cadenas y clasificando esas representaciones de cadenas de elementos lexicográficamente en orden ascendente.

Otro hecho importante a tener en cuenta es que el método sort() ordena los elementos en el lugar, lo que significa que altera la matriz original:

1
2
3
4
const exampleArray = ['bbb', 'aa', 'ddd', 'c'];
exampleArray.sort();
console.log(exampleArray);
// Outputs: ['aa', 'bbb', 'c', 'ddd']

Obviamente, el método sort() está diseñado para funcionar con cadenas, pero no está diseñado para funcionar con fechas. Por ejemplo, supongamos que queremos ordenar la siguiente matriz de fechas:

1
2
3
const dates = ['Mar 16 2017', 'Jan 22 2021', 'Dec 31 2000'];
dates.sort();
console.log(dates);

El resultado deseado será una matriz ordenada por fechas en orden ascendente:

1
['Dec 31 2000', 'Mar 16 2017', 'Jan 22 2021']

Pero la salida real será:

1
['Dec 31 2000', 'Jan 22 2021', 'Mar 16 2017']

Esto sucede porque el método sort() funciona clasificando las representaciones de cadenas de los elementos, no los elementos reales.

Por ejemplo, “D” de “31 de diciembre de 2000” es lexicográficamente menor que “J” de “22 de enero de 2021” y así sucesivamente. Este comportamiento no deseado es el mismo sin importar el formato de fecha, por lo tanto, necesitamos encontrar una forma de alterar el método sort() para que sea adecuado para clasificar fechas.

Introducción a las fechas en JavaScript

Para saber cómo ordenar una matriz por fecha en JavaScript, en primer lugar, debemos comprender cómo JavaScript representa las fechas.

En resumen, la estructura utilizada para representar fechas en JavaScript es un objeto Fecha, lo hace almacenando un Número que representa la cantidad de milisegundos desde el 1 de enero de 1970.

Hay cuatro formas de crear un objeto Fecha, pero, en esencia, todas almacenan la fecha como Número, como se describió anteriormente:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// Blank constructor - the current date and time
const now = new Date();

// Date string as the argument
const exampleDate1 = new Date(dateString);

// Number of milliseconds since 1 Jan 1970 as the argument
const exampleDate2 = new Date(milliseconds);

// Year, month, ... as the argument
const exampleDate3 = new Date(year, month, day, hour, minute, second, millisecond);

Debido a la naturaleza del problema de ordenar una matriz por fecha, usaremos la segunda forma, pasando la representación de cadena de la fecha en el constructor Fecha. En términos generales, existen 3 formatos de cadenas que se utilizan para representar fechas:

Ejemplo de formato de nombre Independiente del navegador


Fecha ISO AAAA-MM-DD "2017-09-24" **Sí** (definido estrictamente por el estándar ISO) Fecha corta DD/MM/AAAA "24/09/2017" **No** (puede variar en diferentes navegadores) Fecha larga DD Mes AAAA "24 de septiembre de 2017" **No** (puede variar en diferentes navegadores)

Entonces, si queremos crear un objeto Date para el 24 de septiembre de 2017, lo haremos de una de las siguientes maneras:

1
2
3
4
5
const date = new Date("2017-09-24");
// Or
const date = new Date("09/24/2017");
// Or
const date = new Date("24 September 2017");

Todos estos representarán exactamente la misma fecha (el mismo número de milisegundos desde el 1 de enero de 1970).

Cómo ordenar una matriz por fecha en JavaScript (representación de cadena)

Ahora que sabemos cómo funcionan el objeto Date y el método sort(), podemos explicar cómo usar el método sort() para ordenar una matriz por fecha.

En primer lugar, supongamos que necesitamos ordenar una matriz de fechas:

1
2
//            ['16 March 2017', '22 January 2021', '31 December 2000']
const dates = ['16 March 2017', '01/22/2021', '2000-12-31'];

Como podemos ver, los elementos de la matriz dates son representaciones de cadenas de algunas fechas. Como hemos discutido antes, simplemente usar el método sort() en dates no producirá el resultado deseado, por lo que debemos modificarlo para que sea adecuado para clasificar las fechas. Lo haremos creando una función de comparación personalizada apropiada y pasándola al método sort().

{.icon aria-hidden=“true”}

Una función de comparación, en términos simples, es una función que acepta dos argumentos (números) y devuelve valores positivos, negativos o cero. Se utiliza para definir el orden de clasificación en un método sort().

Por ejemplo, la siguiente función de comparación se utilizará para ordenar elementos en orden ascendente:

1
2
3
function(a, b){
    return a - b;
}

Las siguientes reglas se aplican al orden de clasificación según el valor de retorno de una función de comparación:

Valor de retorno Orden de clasificación


B positiva antes de a cero igual Negativo a antes de b

La función de comparación que podrá ordenar las fechas primero debe convertir las representaciones de cadenas de fechas en objetos Fecha y luego comparar dos fechas de la manera deseada. Afortunadamente, el constructor Date acepta una amplia variedad de formatos y puede traducirlos a un formato fácilmente comparable:

1
2
3
4
5
6
7
function(a, b){
    // Convert string dates into `Date` objects
    const date1 = new Date(a);
    const date2 = new Date(b);
    
    return date1 - date2;
}

Para clasificar en orden descendente, el único cambio que debemos hacer es intercambiar los lugares de fecha1 y fecha2 en la declaración de devolución:

1
return date2 - date1;

Cuando hayamos creado la función de comparación adecuada, lo único que queda por hacer es pasarla al método sort() para que pueda ordenar las fechas:

1
2
3
4
5
6
dates.sort(function(a, b){
    const date1 = new Date(a)
    const date2 = new Date(b)
    
    return date1 - date2;
})

Alternativamente, puede definir la función como una función no anónima y pasarla de esa manera:

1
2
3
4
5
6
7
8
9
function dateComparison(a, b) {
    const date1 = new Date(a)
    const date2 = new Date(b)
    
    return date1 - date2;
}

dates.sort(dateComparison);
console.log(dates);

Ahora, la matriz dates está ordenada en orden ascendente:

1
['2000-12-31', '16 March 2017', '01/22/2021']

Cómo ordenar una matriz por fecha en JavaScript (objetos de fecha)

La versión más simple de este problema es el caso en el que la matriz dates ya es una matriz de objetos Date. En ese caso, la función de comparación más simple hará el trabajo:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const date1 = new Date('16 March 2017');
const date2 = new Date('01/22/2021');
const date3 = new Date('2000-12-31');
const dates = [date1, date2, date3];

dates.sort(function(a, b){
    return a - b 
});

console.log(dates);

La salida será:

1
['2000-12-31', '16 March 2017', '01/22/2021']

Conclusión

En esta guía, hemos discutido los hechos importantes acerca de ordenar una matriz por fecha. Al terminarlo, debe tener el conocimiento de ordenar arreglos, objetos Fecha, y puede combinar lo que ha aprendido para ordenar un arreglo de fechas en el orden deseado. o.