Massiivide, objektide ja objektide massiivid tähestikulises järjekorras CSS-trikid

Anonim

Massiiv:

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

Võite järjestada tähestiku järgi nii lihtsalt kui:

fruits.sort();

Kuid pange tähele massiivi ebaühtlast suurtähte ... suured tähemärgid sorteeritakse kõik enne väiketähti (imelikult küll), nii et see on veidi keerulisem:

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

Objektide massiiv

Asi muutub ikka keerulisemaks, kui see, mida proovite sorteerida, on objektide sees. JSON-i API-ga töötamine võib olla lihtne.

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

Võiksime selle jaoks teha kohandatud sortimisfunktsiooni, kuid üks väike samm edasi on teha üldisem funktsioon, mille võtme järgi saab sortida võtmena.

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

Nüüd saame seda kasutada sortimiseks:

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

Lihtsalt objekt

Kui meil on lihtsalt objekt ...

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

Peame ikkagi need klahvid vähendama, kuid saame sortida võtmete massiivi ja seejärel teha uue objekti sellest äsja sorteeritud võtmemassiivist.

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

Objektide massiiv võtmel sorteerimiseks

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

See on ilmselt kõige keerukam neist kõigist, kuid selle korrastamiseks peaks ülal olema piisavalt teavet. Saage see kätte.

Reaalkood

Vaadake Chris Coyieri (@chriscoyier) pliiatsi tähestiku massiive CodePenis.