Alfabetizzazione di matrici, oggetti e matrici di oggetti - Trucchi CSS

Un array:

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

Puoi ordinarlo in ordine alfabetico facile come:

fruits.sort();

Ma nota l'incoerenza delle maiuscole nell'array ... i caratteri maiuscoli saranno tutti ordinati prima dei caratteri minuscoli (abbastanza stranamente) quindi sarà un po 'più complicato:

let fruits = (`bananas`, `Apples`, `Oranges`); fruits.sort((a, b) => ( return a.toLowerCase().localeCompare(b.toLowerCase()); )) console.log(fruits); // ("Apples", "bananas", "Oranges")

Matrice di oggetti

Le cose diventano ancora più complicate se ciò che stai cercando di ordinare è annidato all'interno di oggetti. Potrebbe essere facilmente il caso di lavorare con un'API JSON.

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

Potremmo creare una funzione di ordinamento personalizzata per questo, ma un piccolo passo avanti è creare una funzione più generica che prenda la chiave per ordinare come parametro.

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

Quindi ora possiamo usarlo per ordinare:

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

Solo un oggetto

Se abbiamo solo un oggetto ...

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

Abbiamo ancora bisogno di ridurre le chiavi, ma possiamo ordinare un array di chiavi e quindi creare un nuovo oggetto da quell'array di chiavi appena ordinato.

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 ) */

Matrice di oggetti da ordinare in base alla chiave

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

Questo è probabilmente il più complicato di tutti, ma dovrebbero esserci abbastanza informazioni sopra per risolverlo. Prendilo.

Codice live

Vedere le matrici alfabetiche delle penne di Chris Coyier (@chriscoyier) su CodePen.