Ordenar matriz de objeto por propiedad en JavaScript

Este artículo discutirá cómo ordenar un array de objetos según los valores de las propiedades del objeto.

En JavaScript, usamos la función sort() para ordenar un array de objetos. La función sort() se utiliza para ordenar los elementos de un array alfabéticamente y no numéricamente. Para obtener los elementos en orden inverso, podemos usar el método reverse().

Sin embargo, la función tradicional sort() puede retrasarse en ocasiones para comparar un array de objetos en función de alguna propiedad. Entonces podemos crear una función de comparación definida por el usuario para usar con la función sort(). Este método compara las propiedades de los elementos de un array.

El siguiente ejemplo muestra cómo escribir su propia función de comparación.

let students = [
  {fname: 'Rohan', lname: 'Dalal', age: 19},

  {fname: 'Zain', lname: 'Ahmed', age: 17},

  {fname: 'Anadi', lname: 'Malhotra', age: 19}
];


function compare_lname(a, b) {
  if (a.lname.toLowerCase() < b.lname.toLowerCase()) {
    return -1;
  }
  if (a.lname.toLowerCase() > b.lname.toLowerCase()) {
    return 1;
  }
  return 0;
}

students.sort(compare_lname);
console.log(students)

Producción :

[
  { fname: 'Zain', lname: 'Ahmed', age: 17 },
  { fname: 'Rohan', lname: 'Dalal', age: 19 },
  { fname: 'Anadi', lname: 'Malhotra', age: 19 }
]

En el ejemplo anterior, primero, convierta lname a minúsculas y luego comparamos los nombres según la comparación de cadenas. Devuelve el array ordenada de objetos según el lname del objeto. Para orden descendente, podemos reemplazar la función sort() con reverse().

Si estamos tratando con cadenas, podemos eliminar la necesidad de crear una función de comparación y simplemente usar la función localeCompare() con la función sort() para obtener el resultado deseado.

Vea el código a continuación.

let students = [
  {fname: 'Rohan', lname: 'Dalal', age: 19},

  {fname: 'Zain', lname: 'Ahmed', age: 21},

  {fname: 'Anadi', lname: 'Malhotra', age: 16}
];


students.sort((a, b) => a.lname.localeCompare(b.lname));
console.log(students);

Producción :

[
  { fname: 'Zain', lname: 'Ahmed', age: 21 },
  { fname: 'Rohan', lname: 'Dalal', age: 19 },
  { fname: 'Anadi', lname: 'Malhotra', age: 16 }
]

localeCompare() funciona sólo para cadenas. No podemos usar esto para números.

Para obtener el array ordenada en función de alguna propiedad numérica, tenemos que proporcionar alguna función de comparación en el método sort() porque el método sort() normalmente tampoco funciona con números.

Vea el código a continuación.

let students = [
  {fname: 'Rohan', lname: 'Dalal', age: 19},

  {fname: 'Zain', lname: 'Ahmed', age: 21},

  {fname: 'Anadi', lname: 'Malhotra', age: 16}
];

students.sort((a, b) => {
  return a.age - b.age;
});
console.log(students);

El ejemplo anterior compara la edad de los objetos y los ordena según esta edad. La función de comparación es sólo una línea, por lo que se proporciona directamente con el método sort(). Para poner todo en orden descendente, use la función reverse().

Alternativamente, también podemos cambiar el orden en la función de comparación para obtener el resultado final en orden descendente.

Por ejemplo,

let students = [
  {fname: 'Rohan', lname: 'Dalal', age: 19},

  {fname: 'Zain', lname: 'Ahmed', age: 21},

  {fname: 'Anadi', lname: 'Malhotra', age: 16}
];

students.sort((a, b) => {
  return b.age - a.age;
});
console.log(students);

Producción :

[
  { fname: 'Zain', lname: 'Ahmed', age: 21 },
  { fname: 'Rohan', lname: 'Dalal', age: 19 },
  { fname: 'Anadi', lname: 'Malhotra', age: 16 }
]