Alfabetowanie tablic, obiektów i tablic obiektów - CSS-Tricks

Anonim

Tablica:

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

Możesz posortować alfabetycznie tak łatwo, jak:

fruits.sort();

Ale zwróć uwagę na niespójną wielkość liter w tablicy… wszystkie wielkie litery będą sortowane przed małymi (co jest dziwne), więc będzie to trochę bardziej skomplikowane:

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

Tablica obiektów

Sprawy stają się jeszcze trudniejsze, jeśli to, co próbujesz posortować, jest zagnieżdżone w obiektach. Łatwo może być w przypadku pracy z JSON API.

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

Moglibyśmy w tym celu stworzyć niestandardową funkcję sortowania, ale jednym drobnym krokiem dalej jest zrobienie bardziej ogólnej funkcji, która pobiera klucz do sortowania jako parametr.

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

Więc teraz możemy go użyć do sortowania:

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

Po prostu obiekt

Jeśli mamy tylko przedmiot…

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

Nadal musimy zmniejszyć te klucze, ale możemy posortować tablicę kluczy, a następnie utworzyć nowy obiekt z tej nowo posortowanej tablicy kluczy.

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

Tablica obiektów do sortowania według klucza

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

Jest to prawdopodobnie najtrudniejszy z nich wszystkich, ale powyżej powinno być wystarczająco dużo informacji, aby to rozwiązać. Zdobyć.

Kod na żywo

Zobacz tablice alfabetyczne pisaków autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.