Arrays, objecten en arrays van objecten alfabetiseren - CSS-trucs

Een array:

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

Je kunt dat zo eenvoudig alfabetiseren als:

fruits.sort();

Maar let op de inconsistente hoofdletters in de array ... hoofdletters worden allemaal gesorteerd voor kleine letters (vreemd genoeg), dus het zal iets gecompliceerder zijn:

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

Array van objecten

Het wordt nog lastiger als wat u probeert te sorteren, in objecten is genest. Het zou gemakkelijk kunnen zijn om met een JSON API te werken.

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

We zouden hiervoor een aangepaste sorteerfunctie kunnen maken, maar een kleine stap verder is het maken van een meer generieke functie die de sleutel nodig heeft om op te sorteren als een parameter.

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

Dus nu kunnen we het gebruiken om te sorteren:

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

Gewoon een object

Als we maar een object hebben ...

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

We moeten die sleutels nog steeds terughalen, maar we kunnen een reeks sleutels sorteren en vervolgens een nieuw object maken van die nieuw gesorteerde reeks sleutels.

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

Array van objecten om op sleutel te sorteren

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

Dit is waarschijnlijk de lastigste van allemaal, maar er zou hierboven genoeg informatie moeten zijn om het op te lossen. Snap je.

Live code

Zie de Pen Alfabetiseringsmatrices door Chris Coyier (@chriscoyier) op CodePen.