Αλφαβητικοί πίνακες, αντικείμενα και πίνακες αντικειμένων - 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` ) );

Θα μπορούσαμε να κάνουμε μια προσαρμοσμένη λειτουργία ταξινόμησης για αυτό, αλλά ένα μικρό βήμα παραπέρα είναι να κάνουμε μια πιο γενική συνάρτηση που παίρνει το κλειδί για ταξινόμηση ως param.

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 ) );

Αυτό είναι πιθανώς το πιο δύσκολο από όλα, αλλά θα πρέπει να υπάρχουν αρκετές παραπάνω πληροφορίες για να τα λύσουμε. Πάρτε το.

Ζωντανός κώδικας

Δείτε τους Πίνακες Αλφαβητισμού Πένας του Chris Coyier (@chriscoyier) στο CodePen.