Abecedno postavljanje nizova, objekata i nizova objekata - CSS-trikovi

Anonim

Niz:

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

To možete razvrstati po abecedi jednostavno kao:

fruits.sort();

Ali primijetite nedosljedno slovo u nizu ... svi veliki slovi bit će sortirani prije malih slova (dovoljno čudno), pa će biti malo složenije:

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

Niz predmeta

Stvari postaju još zamršenije ako je ono što pokušavate razvrstati ugniježđeno unutar objekata. Lako može biti slučaj rada s JSON API-jem.

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

Za to bismo mogli izraditi prilagođenu funkciju sortiranja, ali jedan mali korak dalje je napraviti općenitiju funkciju koja uzima ključ za sortiranje kao parametar.

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

Dakle, sada ga možemo koristiti za sortiranje:

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

Samo objekt

Ako imamo samo objekt ...

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

Te ključeve još uvijek moramo smanjiti, ali možemo sortirati niz tipki i zatim iz tog novorazvrstanog niza ključeva napraviti novi objekt.

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

Niz objekata za razvrstavanje po ključu

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

Ovo je vjerojatno najlukaviji od svih, ali gore bi trebalo biti dovoljno podataka da se to riješi. Shvati.

Šifra uživo

Pogledajte nizove abecede olovke Chrisa Coyiera (@chriscoyier) na CodePenu.