Alfabetizando matrizes, objetos e matrizes de objetos - CSS-Tricks

Uma matriz:

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

Você pode classificar isso em ordem alfabética tão fácil quanto:

fruits.sort();

Mas observe a caixa inconsistente na matriz ... os caracteres maiúsculos serão todos classificados antes dos caracteres minúsculos (estranhamente), então será um pouco mais 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

As coisas ficam mais complicadas ainda se o que você está tentando classificar estiver aninhado nos objetos. Pode ser facilmente o caso de trabalhar com uma API JSON.

let fruits = ( ( fruit: `Bananas` ), ( fruit: `apples` ), ( fruit: `Oranges` ) );

Poderíamos fazer uma função de classificação personalizada para isso, mas um pequeno passo adiante é fazer uma função mais genérica que usa a chave para classificar como um parâmetro.

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

Agora podemos usá-lo para classificar:

fruits.sort(propComparator(`fruit`)); console.log(fruits); /* ( (fruit: "apples"), (fruit: "Bananas"), (fruit: "Oranges") ) */

Apenas um objeto

Se apenas tivermos um objeto ...

let fruits = ( Bananas: true, apples: false, Oranges: true );

Ainda precisamos reduzir o valor dessas chaves, mas podemos classificar uma matriz das chaves e, em seguida, fazer um novo objeto a partir dessa nova matriz de chaves classificada.

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 classificar na chave

let fruits = ( ( Bananas: true ), ( Apples: false ), ( oranges: true ) );

Este é provavelmente o mais complicado de todos, mas deve haver informações suficientes acima para resolvê-lo. Pegue.

Live Code

Veja Pen Alphabetizing Arrays de Chris Coyier (@chriscoyier) no CodePen.