« Ritorna al blog
Ritorna alla lista completa degli articoli
Come ordinare un array di dati in JavaScript?
JAVASCRIPT - maggio 17, 2021Nella carriera di sviluppatore avrai sicuramente incontrato l'utilizzo degli array. Esistono molti modi per ordinare i dati utilizzando algoritmi diversi. In questo articolo esploreremo la funzione JavaScript[].sort e vedremo come utilizzarla.
Iniziamo dalla sintassi di base che è la seguente:
Array.sort([comparer]) Un esempio potrebbe essere il seguente:
const numeri = [99,2000,30,2,41,600];
document.write(numeri.sort()); L'output generato sarebbe il seguente:
2,2000,30,41,600,99
Questo risultato non è corretto in quanto non vi è nessun ordinamento che abbia senso per noi in quanto JavaScript ordina rispetto alla tabella dei caratteri UTF-16 e non al ragionamento matematico e alle sue regole.
Possiamo scrivere la regola di confronto anche in un modo più leggibile:
// Esempio con i numeri
const numeriB = [50,170,240,21,5,270];
numeriB.sort(function(a, b) {
return a - b;
});
var arr_format_asc = JSON.stringify(numeriB,null,4);
document.write("<p>Ordinamento numerico (ASC)</p>");
document.write('<pre>' + arr_format_asc + '</pre>');
numeriB.sort(function(a, b) {
return b - a;
});
var arr_format_des = JSON.stringify(numeriB,null,4);
document.write("<p>Ordinamento numerico (DES)</p>");
document.write('<pre>' + arr_format_des + '</pre>');
/* - Output
Ordinamento numerico (ASC)
[
5,
21,
50,
170,
240,
270
]
Ordinamento numerico (DES)
[
270,
240,
170,
50,
21,
5
]
*/Se vogliamo usare invece una sintassi più corta dovremo ricorrere allo standard ES6:
// Esempio alternativo sempre con i numeri
const numeriC = [500, 600, 300, 10, 41, 750];
// ES6
const ascNum = (a, b) => (a - b);
const desNum = (a, b) => (b - a);
document.write("<p>Ordinamento numerico (ASC)</p>");
numeriC.sort(ascNum);
var arr_format_asc = JSON.stringify(numeriC,null,4);
document.write('<pre>' + arr_format_asc + '</pre>');
document.write("<p>Ordinamento numerico (DES)</p>");
numeriC.sort(desNum);
var arr_format_des = JSON.stringify(numeriC,null,4);
document.write('<pre>' + arr_format_des + '</pre>');
/* Output
Ordinamento numerico (ASC)
[
10,
41,
300,
500,
600,
750
]
Ordinamento numerico (DES)
[
750,
600,
500,
300,
41,
10
]
*/Ordinamento con stringhe e parole accentate
// Esempio con stringhe
const nomi = ['Luca', 'Giovanni', 'Angelo', 'Café'];
const ascStr = (a, b) => a.localeCompare(b);
const desStr = (a, b) => b.localeCompare(a);
document.write("<p>Ordinamento stringhe (ASC)</p>");
nomi.sort(ascStr);
var arr_format_asc = JSON.stringify(nomi,null,4);
document.write('<pre>' + arr_format_asc + '</pre>');
document.write("<p>Ordinamento stringhe (DES)</p>");
nomi.sort(desStr);
var arr_format_des = JSON.stringify(nomi,null,4);
document.write('<pre>' + arr_format_des + '</pre>');
/* Output
Ordinamento stringhe (ASC)
[
"Angelo",
"Café",
"Giovanni",
"Luca"
]
Ordinamento stringhe (DES)
[
"Luca",
"Giovanni",
"Café",
"Angelo"
]
*/Ordinamento con le date
// Esempio con date
const date = [new Date(1981, 11, 12), new Date(1981, 11, 11), new Date(1982, 01, 30)];
const ascDate = (a, b) => (a - b);
const desDate = (a, b) => (b - a);
document.write("<p>Ordinamento con le date (ASC)</p>");
date.sort(ascDate);
var arr_format_asc = JSON.stringify(date,null,4);
document.write('<pre>' + arr_format_asc + '</pre>');
document.write("<p>Ordinamento con le date (DES)</p>");
date.sort(desDate);
var arr_format_des = JSON.stringify(date,null,4);
document.write('<pre>' + arr_format_des + '</pre>');
/* Output
Ordinamento con le date (ASC)
[
"1981-12-10T23:00:00.000Z",
"1981-12-11T23:00:00.000Z",
"1982-03-01T23:00:00.000Z"
]
Ordinamento con le date (DES)
[
"1982-03-01T23:00:00.000Z",
"1981-12-11T23:00:00.000Z",
"1981-12-10T23:00:00.000Z"
]
*/Ordinamento di oggetti
// Esempio con gli oggetti
const anagrafica = [
{
nome: "Paolo Rossi",
eta: 40,
nascita: new Date(1981, 11, 12)
},
{
nome: "Giulio Poggi",
eta: 61,
nascita: new Date(1960, 05, 20)
},
{
nome: "Michael Ronchi",
eta: 46,
nascita: new Date(1975, 06, 11)
},
{
nome: "Paolo Acidellare",
eta: 31,
nascita: new Date(1990, 06, 11)
},
];
function ConfrontaOggetti(key, ordinamento = "asc"){
return (a,b) => {
if(typeof a[key] === "number" && typeof b[key] === "number"){
return ordinamento === "asc" ? a[key] - b[key] : b[key] - a[key];
}
else if(typeof a[key] === "object" && typeof b[key] === "object"){
if(a[key] instanceof Date && b[key] instanceof Date){
return ordinamento === "asc" ? a[key] - b[key] : b[key] - a[key];
}
}
else if(typeof a[key] === "string" && typeof b[key] === "string"){
return ordinamento == "asc" ? a[key].localeCompare(b[key]) : b[key].localeCompare(a[key]);
}
}
}
document.write("<p>Anagrafica - Ordina per età (ASC)</p>");
anagrafica.sort(ConfrontaOggetti("eta","asc"));
var arr_format_asc = JSON.stringify(anagrafica,null,4);
document.write('<pre>' + arr_format_asc + '</pre>');
document.write("<p>Anagrafica - Ordina per età (DES)</p>");
anagrafica.sort(ConfrontaOggetti("eta","des"));
var arr_format_des = JSON.stringify(anagrafica,null,4);
document.write('<pre>' + arr_format_des + '</pre>');
document.write("<p>Anagrafica - Ordina per data di nascita (ASC)</p>");
anagrafica.sort(ConfrontaOggetti("nascita","asc"));
var arr_format_asc = JSON.stringify(anagrafica,null,4);
document.write('<pre>' + arr_format_asc + '</pre>');
document.write("<p>Anagrafica - Ordina per data di nascita (DES)</p>");
anagrafica.sort(ConfrontaOggetti("nascita","des"));
var arr_format_des = JSON.stringify(anagrafica,null,4);
document.write('<pre>' + arr_format_des + '</pre>');
document.write("<p>Anagrafica - Ordina per nome (ASC)</p>");
anagrafica.sort(ConfrontaOggetti("nome","asc"));
var arr_format_asc = JSON.stringify(anagrafica,null,4);
document.write('<pre>' + arr_format_asc + '</pre>');
document.write("<p>Anagrafica - Ordina per nome (DES)</p>");
anagrafica.sort(ConfrontaOggetti("nome","des"));
var arr_format_des = JSON.stringify(anagrafica,null,4);
document.write('<pre>' + arr_format_des + '</pre>');
/* Output
Anagrafica - Ordina per età (ASC)
[
{
"nome": "Paolo Acidellare",
"eta": 31,
"nascita": "1990-07-10T22:00:00.000Z"
},
{
"nome": "Paolo Rossi",
"eta": 40,
"nascita": "1981-12-11T23:00:00.000Z"
},
{
"nome": "Michael Ronchi",
"eta": 46,
"nascita": "1975-07-10T22:00:00.000Z"
},
{
"nome": "Giulio Poggi",
"eta": 61,
"nascita": "1960-06-19T23:00:00.000Z"
}
]
Anagrafica - Ordina per età (DES)
[
{
"nome": "Giulio Poggi",
"eta": 61,
"nascita": "1960-06-19T23:00:00.000Z"
},
{
"nome": "Michael Ronchi",
"eta": 46,
"nascita": "1975-07-10T22:00:00.000Z"
},
{
"nome": "Paolo Rossi",
"eta": 40,
"nascita": "1981-12-11T23:00:00.000Z"
},
{
"nome": "Paolo Acidellare",
"eta": 31,
"nascita": "1990-07-10T22:00:00.000Z"
}
]
Anagrafica - Ordina per data di nascita (ASC)
[
{
"nome": "Giulio Poggi",
"eta": 61,
"nascita": "1960-06-19T23:00:00.000Z"
},
{
"nome": "Michael Ronchi",
"eta": 46,
"nascita": "1975-07-10T22:00:00.000Z"
},
{
"nome": "Paolo Rossi",
"eta": 40,
"nascita": "1981-12-11T23:00:00.000Z"
},
{
"nome": "Paolo Acidellare",
"eta": 31,
"nascita": "1990-07-10T22:00:00.000Z"
}
]
Anagrafica - Ordina per data di nascita (DES)
[
{
"nome": "Paolo Acidellare",
"eta": 31,
"nascita": "1990-07-10T22:00:00.000Z"
},
{
"nome": "Paolo Rossi",
"eta": 40,
"nascita": "1981-12-11T23:00:00.000Z"
},
{
"nome": "Michael Ronchi",
"eta": 46,
"nascita": "1975-07-10T22:00:00.000Z"
},
{
"nome": "Giulio Poggi",
"eta": 61,
"nascita": "1960-06-19T23:00:00.000Z"
}
]
Anagrafica - Ordina per nome (ASC)
[
{
"nome": "Giulio Poggi",
"eta": 61,
"nascita": "1960-06-19T23:00:00.000Z"
},
{
"nome": "Michael Ronchi",
"eta": 46,
"nascita": "1975-07-10T22:00:00.000Z"
},
{
"nome": "Paolo Acidellare",
"eta": 31,
"nascita": "1990-07-10T22:00:00.000Z"
},
{
"nome": "Paolo Rossi",
"eta": 40,
"nascita": "1981-12-11T23:00:00.000Z"
}
]
Anagrafica - Ordina per nome (DES)
[
{
"nome": "Paolo Rossi",
"eta": 40,
"nascita": "1981-12-11T23:00:00.000Z"
},
{
"nome": "Paolo Acidellare",
"eta": 31,
"nascita": "1990-07-10T22:00:00.000Z"
},
{
"nome": "Michael Ronchi",
"eta": 46,
"nascita": "1975-07-10T22:00:00.000Z"
},
{
"nome": "Giulio Poggi",
"eta": 61,
"nascita": "1960-06-19T23:00:00.000Z"
}
]
*/