Абеткові масиви, об’єкти та масиви об’єктів - 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 ) */

Масив об’єктів для сортування за ключем

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

Це, мабуть, найскладніше з усіх, але вище повинно бути достатньо інформації, щоб це розібратися. Отримайте.

Живий код

Перегляньте алфавітні масиви пера Кріса Койєра (@chriscoyier) на CodePen.