Ordenar alfabéticamente matrices, objetos y matrices de objetos | Programar Plus

Una matriz:

let fruits = [`bananas`, `Apples`, `Oranges`];

Puede ordenarlo alfabéticamente tan fácil como:

fruits.sort();

Pero fíjate en las mayúsculas y minúsculas de la matriz… todos los caracteres en mayúsculas se ordenarán antes que los minúsculas (por extraño que parezca), así que será un poco más complicado:

let fruits = [`bananas`, `Apples`, `Oranges`];
fruits.sort((a, b) => {
  return a.toLowerCase().localeCompare(b.toLowerCase());
})
console.log(fruits);

// ["Apples", "bananas", "Oranges"]

Matriz de objetos

Las cosas se complican aún más si lo que está tratando de ordenar está anidado dentro de los objetos. Fácilmente podría ser el caso de trabajar con una API JSON.

let fruits = [
  {
    fruit: `Bananas`
  },
  {
    fruit: `apples`
  },
  {
    fruit: `Oranges`
  }
];

Podríamos hacer una función de clasificación personalizada para esto, pero un pequeño paso más es hacer una función más genérica que tome la clave para ordenar como un parámetro.

const propComparator = (propName) =>
  (a, b) => a[propName].toLowerCase() == b[propName].toLowerCase() ? 0 : a[propName].toLowerCase() < b[propName].toLowerCase() ? -1 : 1

Así que ahora podemos usarlo para ordenar:

fruits.sort(propComparator(`fruit`));
console.log(fruits);

/*
[
  {fruit: "apples"},
  {fruit: "Bananas"},
  {fruit: "Oranges"}
]
*/

solo un objeto

Si solo tenemos un objeto…

let fruits = {
  Bananas: true,
  apples: false,
  Oranges: true
};

Todavía necesitamos reducir esas claves, pero podemos ordenar una matriz de claves y luego crear un nuevo objeto a partir de esa matriz de claves recién ordenada.

let sortedFruits = {};
Object.keys(fruits).sort((a, b) => {
  return a.toLowerCase().localeCompare(b.toLowerCase());
}).forEach(function(key) {
  sortedFruits[key] = fruits[key];
});
console.log(sortedFruits);

/*
{
  apples: false, 
  Bananas: true, 
  Oranges: true
}
*/

Matriz de objetos para ordenar por clave

let fruits = [
  {
    Bananas: true
  },
  {
    Apples: false
  },
  {
    oranges: true
  }
];

Este es probablemente el más complicado de todos, pero debería haber suficiente información arriba para resolverlo. Consíguelo.

Código en vivo

Vea las matrices de alfabetización de bolígrafos de Chris Coyier (@chriscoyier) en CodePen.