Азбучен ред на масиви, обекти и масиви от обекти - CSS-трикове

Anonim

Масив:

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

Можете да подредите азбуката си толкова лесно, колкото:

fruits.sort();

Но обърнете внимание на несъвместимите букви в масива ... всички главни букви ще бъдат сортирани преди малките букви (достатъчно странно), така че ще бъде малко по-сложно:

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

Масив от обекти

Нещата стават все по-сложни, ако това, което се опитвате да сортирате, е вложено в обекти. Лесно може да бъде случаят при работа с JSON API.

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

Можем да направим персонализирана функция за сортиране за това, но една малка стъпка по-нататък е да направим по-обща функция, която приема ключа за сортиране като параметър.

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

Така че сега можем да го използваме за сортиране:

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

Просто обект

Ако просто имаме обект ...

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

Все още трябва да намалим тези ключове, но можем да сортираме масив от ключове и след това да направим нов обект от новия сортиран масив от ключове.

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

Масив от обекти за сортиране по Key

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

Това е може би най-сложният от всички, но по-горе трябва да има достатъчно информация, за да се подреди. Вземи го.

Код на живо

Вижте Масивите на азбучните писалки от Крис Койер (@chriscoyier) на CodePen.