Abeceda polí, objektov a polí objektov Triky CSS

Anonim

Pole:

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

Môžete abecedne zoradiť tak ľahko, ako:

fruits.sort();

Všimnite si však nekonzistentné veľké a malé písmená v poli ... veľké písmená budú zoradené pred malými písmenami (dosť zvláštne), takže to bude o niečo komplikovanejšie:

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

Pole objektov

Veci sa stále komplikujú, ak je to, čo sa snažíte zoradiť, vnorené do objektov. Ľahko by to mohol byť prípad práce s rozhraním JSON API.

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

Mohli by sme pre to vytvoriť vlastnú funkciu triedenia, ale o malý krok ďalej je vytvoriť všeobecnejšiu funkciu, ktorá berie kľúč na zoradenie ako parameter.

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

Teraz ho teda môžeme použiť na triedenie:

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

Iba objekt

Keby sme len mali objekt ...

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

Stále musíme tieto kľúče označiť malými písmenami, ale môžeme triediť pole kľúčov a potom vytvoriť nový objekt z tohto novo triedeného poľa kľúčov.

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

Pole objektov na triedenie podľa kľúča

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

Toto je pravdepodobne najkomplikovanejšia zo všetkých, ale hore by malo byť dostatok informácií na ich vyriešenie. Získajte to.

Živý kód

Pozrite si polia s abecedou pera od Chrisa Coyiera (@chriscoyier) na stránke CodePen.