Alphabetisieren von Arrays, Objekten und Arrays von Objekten - CSS-Tricks

Anonim

Eine Anordnung:

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

Sie können das so einfach alphabetisieren wie:

fruits.sort();

Beachten Sie jedoch das inkonsistente Gehäuse im Array. Großbuchstaben werden alle vor Kleinbuchstaben sortiert (seltsamerweise), sodass es etwas komplizierter wird:

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

Array von Objekten

Noch schwieriger wird es, wenn das, was Sie sortieren möchten, in Objekten verschachtelt ist. Bei einer JSON-API kann dies leicht der Fall sein.

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

Wir könnten hierfür eine benutzerdefinierte Sortierfunktion erstellen, aber ein kleiner Schritt weiter besteht darin, eine allgemeinere Funktion zu erstellen, die den Schlüssel zum Sortieren als Parameter verwendet.

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

Jetzt können wir damit sortieren:

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

Nur ein Objekt

Wenn wir nur ein Objekt haben ...

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

Wir müssen diese Schlüssel immer noch in Kleinbuchstaben schreiben, aber wir können ein Array der Schlüssel sortieren und dann aus diesem neu sortierten Array von Schlüsseln ein neues Objekt erstellen.

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 von Objekten, die nach Schlüssel sortiert werden sollen

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

Dies ist wahrscheinlich die schwierigste von allen, aber es sollten oben genügend Informationen vorhanden sein, um sie zu klären. Kapiert.

Live-Code

Siehe die Stift-Alphabetisierungs-Arrays von Chris Coyier (@chriscoyier) auf CodePen.