Ordinare un array di oggetti in JavaScript (generatore di comparatori) | We.Inc
Crea un comparatore con pochi clic: ordina oggetti per numero, stringa, data o due chiavi, con le opzioni di localeCompare, e vedi il risultato e il codice fianco a fianco.
Ordinare un array di oggetti in JavaScript
Passa a sort una funzione di confronto che guardi la proprietà che ti interessa. Per i numeri, restituisci a.price - b.price. Per il testo, restituisci a.name.localeCompare(b.name). Per le date, sottrai i timestamp. Un risultato negativo mette prima a, uno positivo mette prima b. Usa toSorted invece di sort quando l'ordine originale deve restare intatto.
(a, b) => Date.parse(a.joined) - Date.parse(b.joined)
scambia a e b
Booleano (prima true)
(a, b) => Number(b.active) - Number(a.active)
scambia a e b
Ordinare oggetti mette in difficoltà per tre motivi: il sort predefinito confronta tutto come testo, con un semplice confronto minore di le maiuscole finiscono prima delle minuscole, e sort riscrive l'array che gli passi. Il generatore qui sotto ti permette di attivare ciascuno di questi interruttori su una piccola lista di un team e vedere l'ordine cambiare, con il comparatore corrispondente pronto da copiare.
Scegli la proprietà per cui ordinare: nome, età, data di inizio o un codice ticket che mescola lettere e cifre.
Scegli crescente o decrescente e, per le chiavi di testo, il confronto semplice o localeCompare con l'opzione numeric.
Aggiungi una seconda chiave per risolvere i pareggi, per esempio prima il team, poi il nome.
Copia il codice generato. La tabella mostra l'ordine che il tuo comparatore produce in questo momento.
Non chiamare mai sort() senza funzione su numeri o oggetti. Senza comparatore ogni valore viene trasformato in stringa, quindi 10 finisce prima di 9 e tutti gli oggetti diventano [object Object].
Restituisci un numero, non true o false. Un risultato booleano viene convertito in 1 o 0 e produce un ordine inaffidabile.
Ordini una lista lunga con localeCompare? Crea un unico Intl.Collator e passa il suo metodo compare; MDN fa notare che è più veloce per gli array grandi.
Metti di proposito in fondo i record con un valore mancante, per esempio controllando null prima di sottrarre, così non si sparpagliano nella lista.
Domande frequenti
Come ordino un array di oggetti per una proprietà?
Chiama people.sort((a, b) => a.age - b.age) per una proprietà numerica oppure people.sort((a, b) => a.name.localeCompare(b.name)) per una stringa. Scambia a e b per invertire la direzione.
Come ordino per due campi?
Confronta il primo campo e passa al secondo solo quando il primo è in pareggio: (a, b) => a.team.localeCompare(b.team) || a.age - b.age. Il || funziona perché un pareggio restituisce 0, che vale come false.
Il sort di JavaScript è stabile?
Sì. Da ECMAScript 2019 sort deve essere stabile, quindi gli elementi considerati uguali mantengono il loro ordine precedente. Per questo ordinare prima per nome e poi per team dà una lista raggruppata per team con i nomi in ordine all'interno di ogni gruppo.
sort modifica l'array originale?
Sì. sort riordina l'array sul posto e restituisce quello stesso array. toSorted accetta la stessa funzione di confronto ma restituisce un nuovo array e lascia invariato l'ordine originale. È disponibile in tutti i principali browser da luglio 2023.
Perché i nomi in minuscolo vengono ordinati dopo quelli in maiuscolo?
Un semplice confronto con < o > confronta i codici dei caratteri, e ogni lettera maiuscola ha un codice più basso di ogni lettera minuscola. localeCompare segue invece l'alfabeto della lingua, e con { sensitivity: 'base' } tratta anche accenti e maiuscole come equivalenti.
Cosa restituisce davvero la funzione di confronto
sort guarda solo il segno del numero che restituisci. Sotto zero significa che a va prima di b, sopra zero che b va prima, e zero significa lasciarli come sono. La grandezza del numero non conta, ed è per questo che la sottrazione funziona per numeri e date.
La sottrazione non funziona con il testo, perché 'b' - 'a' è NaN. localeCompare restituisce un numero negativo, zero o positivo per le stringhe, quindi si inserisce direttamente nello stesso schema.
Date, valori mancanti e tipi misti
Sottraendo due oggetti Date si ottiene un numero di millisecondi, quindi a.joined - b.joined ordina dal più vecchio. Anche le date salvate come testo in formato ISO (2026-10-14) si ordinano correttamente con localeCompare, perché l'anno viene per primo, ma altri formati come 14/10/2026 no.
Gli elementi undefined vengono sempre spostati in fondo e mai passati alla tua funzione. Una proprietà undefined su un oggetto è un'altra cosa: l'oggetto arriva comunque al tuo comparatore, quindi devi controllarla tu.
Perché il semplice sort() sbaglia con i numeri
Senza funzione di confronto ogni elemento viene convertito in stringa e confrontato per unità di codice UTF-16, quindi vince il primo carattere.
Ordine predefinito a confronto con un comparatore numerico
Il predefinito mette 100 prima di 25 perché il testo '1' viene prima di '2'.
Ordinamenti multi-chiave, sensibili alla lingua e non distruttivi
Team dalla A alla Z, poi dal più anziano, senza toccare l'originale
La catena di || passa alla chiave successiva solo quando il confronto precedente vale 0. toSorted restituisce un nuovo array.
Un unico Intl.Collator per una lista lunga
numeric: true mette T-2 prima di T-10, e sensitivity: 'base' ignora maiuscole e accenti.
Un helper sortBy riutilizzabile
Passa i nomi delle chiavi in ordine. Un segno meno davanti a una chiave la ordina in modo decrescente.
Generatore di comparatori
Scegli come ordinare la lista di esempio del team: tabella e codice si aggiornano insieme.
Ordina per
Poi per (in caso di pareggio)
Niente
Direzione
Crescente
Decrescente
Confronto del testo
Semplice < e >
localeCompare
localeCompare, numerico e senza distinzione tra maiuscole e minuscole
Lista di esempio usata dal generatore di comparatori (ordine originale)