Classement alphabétique des tableaux, des objets et des tableaux d'objets - Astuces CSS

Anonim

Un tableau:

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

Vous pouvez classer par ordre alphabétique aussi simple que:

fruits.sort();

Mais notez la casse incohérente dans le tableau ... les caractères majuscules seront tous triés avant les caractères minuscules (assez bizarrement) donc ce sera un peu plus compliqué:

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

Tableau d'objets

Les choses deviennent encore plus délicates si ce que vous essayez de trier est imbriqué dans des objets. Cela pourrait facilement être le cas en travaillant avec une API JSON.

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

Nous pourrions créer une fonction de tri personnalisée pour cela, mais une légère étape supplémentaire consiste à créer une fonction plus générique qui prend la clé pour trier comme paramètre.

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

Alors maintenant, nous pouvons l'utiliser pour trier:

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

Juste un objet

Si nous avons juste un objet ...

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

Nous devons toujours réduire ces clés, mais nous pouvons trier un tableau de clés, puis créer un nouvel objet à partir de ce tableau de clés nouvellement trié.

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

Tableau d'objets à trier par clé

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

C'est probablement le plus délicat de tous, mais il devrait y avoir suffisamment d'informations ci-dessus pour le résoudre. Tu piges.

Code en direct

Voir les tableaux alphabétiques des stylos de Chris Coyier (@chriscoyier) sur CodePen.