Abeceda polí, objektů a polí objektů - Triky CSS

Anonim

Pole:

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

Můžete třídit abecedu tak snadno, jako:

fruits.sort();

Všimněte si však nekonzistentních velkých a malých písmen v poli ... velká písmena budou tříděna před malými písmeny (kupodivu), takže to bude trochu komplikovanější:

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

Pole objektů

Věci budou stále komplikovanější, pokud je to, co se snažíte třídit, vnořeno do objektů. Snadno to může být případ práce s JSON API.

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

Mohli bychom k tomu vytvořit vlastní třídicí funkci, ale o malý krok dále je vytvořit obecnější funkci, která vezme klíč k třídění podle jako param.

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

Nyní jej tedy můžeme použít k třídění:

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

Jen objekt

Pokud máme jen předmět ...

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

Stále potřebujeme tyto klíče zmenšit, ale můžeme řadit pole klíčů a poté z tohoto nově seřazeného pole klíčů vytvořit nový objekt.

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

Pole objektů pro třídění podle klíče

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

Toto je pravděpodobně nejsložitější ze všech, ale výše by mělo být dostatek informací, které by to vyřešily. Pochopit to.

Živý kód

Podívejte se na pole Alphabetizing Array od Chrisa Coyiera (@chriscoyier) na CodePen.