Ordenar matriz de objetos por valor de propiedad de cadena

En este tutorial, aprenda a ordenar una matriz de objetos de JavaScript, en función de un valor de cadena de una propiedad, con un código práctico y un comparador personalizado mediante el método sort().

Introducción

Los objetos se utilizan para almacenar un conjunto de propiedades, cada una de las cuales puede considerarse como una relación entre un nombre (o clave) y un valor; por lo tanto, los objetos son una colección de pares clave-valor.

En esta guía, veremos cómo ordenar una matriz de objetos por el valor de una propiedad de cadena usando el método sort().

¡La clasificación de datos es uno de los usos principales del software! Podemos ordenar y filtrar datos en varias condiciones, y la ordenación por el valor de una propiedad de cadena es común. Por ejemplo, supongamos que tenemos una lista de estudiantes con su firstName y lastName:

1
2
3
4
5
6
7
const students = [
    { firstName: "John", lastName: "Doe", graduationYear: 2022 },
    { firstName: "Stephen", lastName: "Matt", graduationYear: 2023 },
    { firstName: "Abigail", lastName: "Susu", graduationYear: 2022 },
    { firstName: "Zara", lastName: "Kate", graduationYear: 2024 },
    { firstName: "Daniel", lastName: "Vic", graduationYear: 2023 }
];

Podríamos clasificar a estos estudiantes por su ’nombre’ o ‘apellido’. Podríamos escribir comparadores personalizados (como para comparar longitudes), clasificarlos lexicográficamente, clasificarlos por inclusión de una subcadena, etc.

Ordenar lista de objetos por cadena

Las listas de JavaScript implementan un método sort(), que además acepta una función de devolución de llamada que le permite implementar un comparador personalizado. Por defecto, el método sort() ordena lógicamente el tipo de datos dado. Para números enteros, la comparación es bastante sencilla (en orden ascendente) y las cadenas se ordenan lexicográficamente:

1
2
3
const names = ["john", "kate", "dan"];
// Sorting array of strings, lexicographically
console.log(names.sort()); // ["dan","john","kate"]

Dado que queremos ordenar una matriz de objetos, en función de una propiedad subyacente, querremos definir una función de devolución de llamada personalizada para ordenar. La función de devolución de llamada acepta dos parámetros: dos elementos para comparar en un momento dado. Según la comparación, devolverá -1, 0 o 1, que indica el resultado de la comparación. Si se devuelve -1, a se considera menor que b. 0 significa igualdad. 1 significa que b es mayor que a:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
let sortedStudents = students.sort((a, b) => {
    if (a.firstName < b.firstName) {
        return -1;
    }
    if (a.firstName > b.firstName) {
        return 1;
    }
    return 0;
});

console.log(sortedStudents);

{.icon aria-hidden=“true”}

Nota: Podemos comprimir las declaraciones if al no usar las llaves.

Esto daría como resultado:

1
2
3
4
5
6
7
[
    { firstName: "Abigail", lastName: "Susu", graduationYear: 2022 },
    { firstName: "Daniel", lastName: "Vic", graduationYear: 2023 },
    { firstName: "John", lastName: "Doe", graduationYear: 2022 },
    { firstName: "Stephen", lastName: "Matt", graduationYear: 2023 },
    { firstName: "Zara", lastName: "Kate", graduationYear: 2024 }
];

{.icon aria-hidden=“true”}

Nota: Al comparar cadenas, las letras mayúsculas tienen un peso diferente al de las letras minúsculas y, por ejemplo, “A” se colocaría después de “b”. En general, se considera una buena práctica ecualizar las cadenas en minúsculas o en mayúsculas (más comúnmente, en minúsculas, debido a la eficiencia).

Expliquemos el caso, y acortemos/compactemos las sentencias if usando un operador coalescente nulo:

1
2
3
let sortedStudents = students.sort((a,b) => (a.firstName.toLowerCase() < b.firstName.toLowerCase()) ? -1 : ((b.firstName.toLowerCase() > a.firstName.toLowerCase()) ? 1 : 0));

console.log(sortedStudents);

Esto resulta en:

1
2
3
4
5
6
7
const students = [
    { firstName: "John", lastName: "Doe", graduationYear: "2021" },
    { firstName: "Stephen", lastName: "Matt", graduationYear: "2026" },
    { firstName: "Abigail", lastName: "Susu", graduationYear: "2022" },
    { firstName: "Zara", lastName: "Kate", graduationYear: "2024" },
    { firstName: "Daniel", lastName: "Vic", graduationYear: "2023" }
];

Aunque los años son cadenas aquí, también podemos ordenarlos fácilmente:

1
2
3
let sortedStudents = students.sort((a,b) => (a.graduationYear < b.graduationYear) ? -1 : ((b.graduationYear > a.graduationYear) ? 1 : 0))

console.log(sortedStudents);

Esto resulta en:

1
2
3
4
5
6
7
[
    { firstName: "John", lastName: "Doe", graduationYear: "2021" },
    { firstName: "Abigail", lastName: "Susu", graduationYear: "2022" },
    { firstName: "Daniel", lastName: "Vic", graduationYear: "2023" },
    { firstName: "Zara", lastName: "Kate", graduationYear: "2024" },
    { firstName: "Stephen", lastName: "Matt", graduationYear: "2026" }
];

Conclusión

En este breve artículo, echamos un vistazo a la clasificación de una matriz de objetos en función de una propiedad de cadena, utilizando el método sort() en JavaScript.