Alfabetisering af arrays, objekter og arrays af objekter - CSS-tricks

Et array:

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

Du kan slags alfabetisere det så let som:

fruits.sort();

Men bemærk det inkonsekvente hylster i arrayet ... store bogstaver vil alle blive sorteret før små bogstaver (underligt nok), så det bliver lidt mere kompliceret:

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

Objektarray

Ting bliver stadig vanskeligere, hvis det, du prøver at sortere, er indlejret i objekter. Det kunne let være tilfældet med at arbejde med en JSON API.

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

Vi kunne lave en brugerdefineret sorteringsfunktion til dette, men et lille skridt videre er at lave en mere generisk funktion, der tager nøglen til at sortere 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 bruge det til at sortere:

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

Bare et objekt

Hvis vi bare har et objekt ...

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

Vi har stadig brug for at bagatellisere disse nøgler, men vi kan sortere en matrix af nøglerne og derefter oprette et nyt objekt fra det nyligt sorterede nøgleudvalg.

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 at sortere på Key

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

Dette er sandsynligvis den sværeste af dem alle, men der skal være nok oplysninger ovenfor til at ordne det. Få det.

Live kode

Se Pen Alfabetiserende Arrays af Chris Coyier (@chriscoyier) på CodePen.