Tömbök, objektumok és objektumtömbök betűrendbe állítása CSS-trükkök

Anonim

Egy tömb:

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

Betűrendbe rendezheti ezt olyan egyszerű módon, mint:

fruits.sort();

De vegye észre a tömb inkonzisztens nagybetűjét ... a nagybetűs karaktereket a kisbetűs karakterek elé rendezik (elég furcsa módon), így egy kicsit bonyolultabb lesz:

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

Tárgyak tömbje

A dolgok még mindig bonyolultabbak lesznek, ha a rendezni próbált objektumok belsejében vannak. Könnyen előfordulhat, hogy JSON API-val dolgozunk.

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

Készíthetünk erre egyedi rendezési funkciót, de egy apró lépés tovább egy általánosabb funkció létrehozása, amely a kulcsot paraméternek rendezi.

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

Tehát most használhatjuk rendezésre:

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

Csak egy tárgy

Ha csak van egy tárgyunk ...

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

Még mindig le kell írnunk ezeket a kulcsokat, de rendezhetjük a kulcsok tömbjét, majd új objektumot készíthetünk az újonnan rendezett kulcsok tömbjéből.

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

Objektumok tömbje a kulcson rendezni

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

Valószínűleg ez a legtrükkösebb mind közül, de a fenti információknak elegendőnek kell lenniük a rendezéshez. Szerezd meg.

Élő kód

Lásd Chris Coyier (@chriscoyier) Pen Alphabetizing tömbjeit a CodePen-en.