Alfabetisering av matriser, objekter og matriser av objekter - CSS-triks

Anonim

En matrise:

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

Du kan sortere alfabetisering så enkelt som:

fruits.sort();

Men legg merke til det inkonsekvente tilfellet i matrisen ... store bokstaver blir alle sortert før små bokstaver (merkelig nok), så det blir litt mer komplisert:

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

Array of Objects

Ting blir vanskeligere fremdeles hvis det du prøver å sortere er nestet i objekter. Det kan lett være tilfelle å jobbe med en JSON API.

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

Vi kan lage en tilpasset sorteringsfunksjon for dette, men et lite skritt videre er å lage en mer generisk funksjon som tar nøkkelen til å sortere etter som param.

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

Så nå kan vi bruke den til å 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 må fremdeles bagatellisere disse nøklene, men vi kan sortere en matrise av tastene og deretter lage et nytt objekt fra den nylig sorterte nøkkelgruppen.

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

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

Dette er sannsynligvis den vanskeligste av dem alle, men det bør være nok informasjon ovenfor for å ordne opp. Skjønner.

Direkte kode

Se Pen Alphabetizing Arrays av Chris Coyier (@chriscoyier) på CodePen.