Taulukot, objektit ja objektijoukot aakkosjärjestyksessä CSS-temppuja

Anonim

Taulukko:

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

Voit lajitella aakkosjärjestyksen niin helposti kuin:

fruits.sort();

Mutta huomaa matriisin epäjohdonmukainen kirjain ... isot kirjaimet lajitellaan ennen pieniä kirjaimia (oudosti kyllä), joten se on hieman monimutkaisempi:

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

Objektijoukko

Asiat muuttuvat yhä hankalammiksi, jos lajittelemasi kohde on sisällä. Helposti voisi olla tapaus työskennellä JSON-sovellusliittymän kanssa.

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

Voisimme tehdä tälle mukautetun lajittelutoiminnon, mutta yksi pieni askel eteenpäin on tehdä yleisempi toiminto, joka ottaa avaimen lajittelemaan param-parametrina.

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

Joten nyt voimme käyttää sitä lajittelemaan:

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

Vain esine

Jos meillä on vain esine ...

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

Meidän on silti pienennettävä näitä avaimia, mutta voimme lajitella joukon avaimia ja tehdä sitten uuden objektin juuri järjestetystä avainryhmästä.

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

Objektiryhmä lajiteltavissa avaimella

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

Tämä on luultavasti vaikein niistä kaikista, mutta yllä pitäisi olla tarpeeksi tietoa sen lajittelemiseksi. Hanki se.

Live-koodi

Katso Chris Coyierin (@chriscoyier) kynän aakkosjärjestelmät CodePenissä.