Alfabetizarea matricelor, obiectelor și matricilor de obiecte - CSS-Tricks

Cuprins

O matrice:

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

Puteți sorta în ordine alfabetică la fel de ușor ca:

fruits.sort();

Dar observați carcasa inconsistentă din matrice ... caracterele majuscule vor fi toate sortate înainte de caractere mici (destul de ciudat), așa că va fi puțin mai complicat:

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

Matrice de obiecte

Lucrurile devin tot mai complicate dacă ceea ce încercați să sortați este cuibărit în obiecte. Cu ușurință ar putea fi cazul lucrul cu un API JSON.

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

Am putea face o funcție de sortare personalizată pentru acest lucru, dar un pas ușor mai departe este să creăm o funcție mai generică care să ia cheia de sortat ca param.

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

Deci, acum îl putem folosi pentru a sorta:

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

Doar un obiect

Dacă avem doar un obiect ...

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

Încă trebuie să descărcăm aceste chei, dar putem sorta o matrice de chei și apoi să facem un obiect nou din acea matrice de chei nou sortată.

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

Matrice de obiecte de sortat pe cheie

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

Acesta este probabil cel mai dificil dintre toate, dar ar trebui să existe suficiente informații de mai sus pentru a le rezolva. Ia-l.

Cod live

Vedeți Tablourile Alfabetizante Pen de Chris Coyier (@chriscoyier) pe CodePen.

Articole interesante...