Alfabetización de matrices, objetos y matrices de objetos - Trucos CSS

Una matriz:

let fruits = (`bananas`, `Apples`, `Oranges`);

Puede ordenar alfabéticamente eso tan fácil como:

fruits.sort();

Pero observe las mayúsculas y minúsculas inconsistentes en la matriz ... los caracteres en mayúscula se ordenarán antes que los caracteres en minúscula (por extraño que parezca), por lo 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 intenta 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 ordenación personalizada para esto, pero un pequeño paso más es crear 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

Entonces 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 lápiz de Chris Coyier (@chriscoyier) en CodePen.