Come ordinare un array di oggetti in JavaScript

Blog

Come ordinare un array di oggetti in JavaScript

In questo articolo, ti mostrerò come ordinare una serie di oggetti in JavaScript senza problemi o fastidio.



Se hai una serie di oggetti che devi ordinare in un certo ordine, la tentazione potrebbe essere quella di utilizzare una libreria JavaScript . Prima di farlo, tuttavia, ricorda che puoi eseguire un ordinamento piuttosto accurato con la funzione Array.sort nativa.

Per seguire questo articolo, avrai bisogno di una conoscenza dei concetti JavaScript di base, come la dichiarazione di variabili, la scrittura di funzioni e le istruzioni condizionali. Userò anche la sintassi ES6.



Ordinamento di array di base

Per impostazione predefinita, JavaScript |_+_| la funzione converte ogni elemento nell'array da ordinare, in una stringa, e li confronta in Punto di codice Unicode ordine.

Array.sort

Forse ti starai chiedendo perché 30 viene prima di 4. Non è logico, eh? Beh, in realtà lo è. Ciò accade perché ogni elemento nell'array viene prima convertito in una stringa e |_+_| viene prima di |_+_| nell'ordine Unicode.



Vale anche la pena notare che, a differenza di molte altre funzioni di array JavaScript, |_+_| effettivamente cambia o muta l'array che ordina.

const foo = [8, 3, 5, 'whistle', 'fish']; foo.sort(); // returns [3, 5, 8, 'fish', 'whistle'] const bar = [4, 19, 30, function(){}, {key: 'value'}]; bar.sort(); // returns [ 19, 30, 4, { key: 'value' }, [Function] ]

Per evitare ciò, puoi creare una nuova istanza dell'array da ordinare e modificarla.

'30'

Notare l'uso del |_+_| operatore per creare una nuova istanza di |_+_|. Puoi leggere di più a riguardo qui .

deposito diretto in contanti app

Provalo

JS Bin su jsbin.com

Usando |_+_| da solo non sarebbe molto utile per ordinare un array di oggetti. Per fortuna, la funzione accetta un |_+_| . opzionale parametro, che fa sì che gli elementi dell'array vengano ordinati in base al valore restituito dalla funzione di confronto.

Utilizzo delle funzioni di confronto per ordinare

Diciamo che |_+_| e |_+_| sono i due elementi che vengono confrontati dalla funzione di confronto. Se il valore restituito dalla funzione di confronto è:

  1. minore di 0 — |_+_| viene prima di |_+_|
  2. maggiore di 0 — |_+_| viene prima di |_+_|
  3. uguale a 0 — |_+_| e |_+_| sono lasciati invariati l'uno rispetto all'altro

Diamo un'occhiata a un semplice esempio con un array di numeri:

'4'

Questo può essere rifattorizzato in qualche modo per ottenere il valore restituito sottraendo |_+_| da |_+_|:

Array.sort

Questo è ora un buon candidato per una funzione freccia:

const baz = ['hello world', 31, 5, 9, 12]; baz.sort(); // baz array is modified console.log(baz); // shows [12, 31, 5, 9, 'hello world']

Se non hai familiarità con le funzioni delle frecce, puoi leggere di più su di esse qui: Funzioni freccia ES6: sintassi grassa e concisa in JavaScript .

tv.fxnetworks com/activate

Ordina un array di oggetti in JavaScript

Ora diamo un'occhiata all'ordinamento di una serie di oggetti. Prendiamo una serie di oggetti banda:

const baz = ['hello world', 31, 5, 9, 12]; const newBaz = [...baz].sort(); // new instance of baz array is created and sorted console.log(baz); // 'hello world', 31, 5, 9, 12] console.log(newBaz); // [12, 31, 5, 9, 'hello world']

Possiamo usare il seguente |_+_| funzione per ordinare questo array di oggetti in base al genere:

spread

Per invertire l'ordinamento, puoi semplicemente invertire il valore restituito di |_+_| funzione:

usando scp per copiare i file
baz

Provalo

JS Bin su jsbin.com

Creazione di una funzione di ordinamento dinamico

Concludiamo rendendo questo più dinamico. Creiamo una funzione di ordinamento, che puoi usare per ordinare un array di oggetti, i cui valori sono stringhe o numeri. Questa funzione ha due parametri: la chiave in base alla quale vogliamo ordinare e l'ordine dei risultati (cioè crescente o decrescente).

Array.sort

Ed ecco come lo useresti:

compareFunction

Provalo

JS Bin su jsbin.com

Nel codice sopra, il hasOwnProperty metodo è usato per verificare se la proprietà specificata è definita su ogni oggetto e non è stata ereditato tramite la catena di prototipi . Se non è definito sugli oggetti, la funzione restituisce |_+_|, che fa sì che l'ordinamento rimanga così com'è (cioè gli oggetti rimangono invariati l'uno rispetto all'altro).

Il tipo di operatore viene utilizzato anche per verificare il tipo di dati del valore della proprietà. Ciò consente alla funzione di determinare il modo corretto per ordinare l'array. Ad esempio, se il valore della proprietà specificata è un |_+_|, un |_+_| viene utilizzato per convertire tutti i suoi caratteri in maiuscolo, quindi le maiuscole dei caratteri vengono ignorate durante l'ordinamento.

Puoi regolare la funzione sopra per adattarsi ad altri tipi di dati e qualsiasi altra peculiarità di cui il tuo script ha bisogno.

bot primo commento di youtube

String.prototype.localeCompare()

Nel nostro esempio sopra, vogliamo essere in grado di ordinare un array di oggetti, i cui valori sono stringhe o numeri. Se, tuttavia, sai che avrai a che fare solo con oggetti i cui valori sono stringhe, puoi riordinare un po' il codice usando |_+_| di JavaScript. metodo.

Questo metodo restituisce un numero che indica se una stringa viene prima, dopo o è uguale a una determinata stringa nell'ordinamento. Abilita un ordinamento di un array senza distinzione tra maiuscole e minuscole:

a

Per quanto riguarda il nostro |_+_| funzione, ciò significa che potremmo scrivere:

b

Puoi leggere di più su localeConfronta su MDN .

Conclusione

Ecco qua: una breve introduzione all'ordinamento di una serie di oggetti. Sebbene molte librerie JavaScript offrano questo tipo di capacità di ordinamento dinamico (ad es. Underscore.js , Lodash e Zucchero ), come dimostrato, non è poi così difficile implementare questo tipo di funzionalità da soli.

Se hai domande o commenti, sentiti libero di iniziare una conversazione.

Originariamente pubblicato da Olayinka Omole at sitepoint.com

#javascript