Alfabetiserande arrayer, objekt och arrays av objekt - CSS-tricks

En matris:

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

Du kan sortera alfabetisk så enkelt som:

fruits.sort();

Men lägg märke till det inkonsekventa höljet i arrayen ... stora bokstäver kommer att sorteras före små bokstäver (konstigt nog) så det blir lite mer komplicerat:

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

Objektarray

Saker blir fortfarande svårare om det du försöker sortera är kapslat i objekt. Det kan lätt vara fallet med ett JSON API.

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

Vi kan göra en anpassad sorteringsfunktion för detta, men ett litet steg längre är att skapa en mer generisk funktion som tar nyckeln att sortera efter som param.

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

Så nu kan vi använda den för att sortera:

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

Bara ett objekt

Om vi ​​bara har ett objekt ...

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

Vi behöver fortfarande lägga ned dessa nycklar, men vi kan sortera en matris av nycklarna och sedan skapa ett nytt objekt från den nyligen sorterade nyckelgruppen.

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

Array of Objects att sortera på Key

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

Det här är förmodligen det svåraste av dem alla, men det borde finnas tillräckligt med information ovan för att reda ut det. Förstår.

Live-kod

Se Pen Alfabetiserande Arrayer av Chris Coyier (@chriscoyier) på CodePen.