Masīvu, objektu un objektu masīvu alfabētiskā secība CSS-triki

Anonim

Masīvs:

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

Alfabētiskā secībā varat kārtot tikpat viegli kā:

fruits.sort();

Bet ievērojiet masīva nekonsekvento burtu ... visi lielie burti tiks sakārtoti pirms mazajiem burtiem (savādi), tāpēc tas būs nedaudz sarežģītāk:

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

Objektu masīvs

Lietas kļūst sarežģītākas, ja tas, ko mēģināt kārtot, ir ievietots objektos. Viegli tas varētu būt gadījums, kad strādā ar JSON API.

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

Mēs tam varētu izveidot pielāgotu šķirošanas funkciju, taču vēl viens neliels solis ir izveidot vispārīgāku funkciju, kuras taustiņu kārtot pēc parametra.

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

Tāpēc tagad mēs to varam izmantot, lai kārtotu:

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

Tikai objekts

Ja mums vienkārši ir kāds objekts ...

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

Mums joprojām ir jāsamazina šie taustiņi, taču mēs varam kārtot atslēgu masīvu un pēc tam no šī nesen sakārtotā atslēgu masīva izveidot jaunu objektu.

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

Objektu masīvs, lai kārtotu atslēgā

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

Tas, iespējams, ir vissarežģītākais no visiem, taču iepriekš vajadzētu būt pietiekami daudz informācijas, lai to sakārtotu. Dabūt to.

Live Code

Skatiet Krisa Koijera (@chriscoyier) pildspalvu alfabēta masīvus vietnē CodePen.