{"id":783,"date":"2017-11-20T13:54:40","date_gmt":"2017-11-20T12:54:40","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/ordinamento-in-javascript-array-sort\/"},"modified":"2017-11-20T13:54:40","modified_gmt":"2017-11-20T12:54:40","slug":"ordinamento-in-javascript-array-sort","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/ordinamento-in-javascript-array-sort\/","title":{"rendered":"Di cosa parlo quando parlo di ordinamento: districare Array#sort"},"content":{"rendered":"

La classificazione delle cose \u00e8 una parte fondamentale della nostra vita quotidiana: \u00e8 qualcosa che facciamo ogni giorno per rendere pi\u00f9 facile la nostra vita, seguendo ogni tipo di criterio. Che stiate cercando il numero di telefono di una persona, la posizione del vostro libro preferito, o addirittura di abbinare i vostri calzini <\/a>, l’ordinamento ci permette di trovare quello che cerchiamo in un modo pi\u00f9 veloce ed efficace.<\/p>\n

Lo stesso succede nel mondo dello sviluppo web. Ma se pensate di sapere esattamente come funziona Array#sort di JavaScript sotto il cofano, pensaci due volte.<\/p>\n

\n

Esaminare superficialmente<\/h2>\n

Indipendentemente dal vostro livello di abilit\u00e0, se siete JavaScript developer, ad un certo punto avrete probabilmente incontrato il metodo Array#sort. Vi ricordate la prima volta che avete provato a riordinare i numeri in JavaScript? Probabilmente sarete rimasti sorpresi dallo scoprire (proprio come tutti noi) che il metodo sort NON riordina le cose esattamente come ci aspetteremmo. Non sapete di cosa sto parlando? Tuffiamoci in un po’ codice:<\/p>\n

const myArray =<\/span> [<\/span>33<\/span>,<\/span> 2<\/span>,<\/span> 98<\/span>,<\/span> 25<\/span>,<\/span> 4<\/span>]<\/span>\nmyArray.<\/span>sort(<\/span>)<\/span> \/\/ [ 2, 25, 33, 4, 98 ]<\/span><\/code><\/pre>\n
Aspetta, cosa?? JavaScript \u00e8 impazzito? In che mondo 25 e 33 sono pi\u00f9 piccoli di 4? Prima di cominciare a ripensare a tutta la nostra vita, vediamo di capirci qualcosa.<\/p>\n<\/div>\n
\n
Ordinamento lessicografico<\/h2>\n
Ci\u00f2 che sta realmente accadendo \u00e8 che JavaScript sta riordinano il nostro array numerico in maniera lessicografica: pensate all’ordine alfabetico, dove ogni valore viene trattato come una stringa.<\/p>\n
L’inghippo qui \u00e8 che Array#sort pu\u00f2 ricevere una funzione di confronto come parametro, ma se non gliela si d\u00e0, \u201cgli elementi vengono riordinati convertendoli in stringhe e confrontando le stringhe nell’ordine dell’Unicode code point<\/em>\u201d (secondo gli MDN docs<\/a>). Questo significa che JavaScript tratter\u00e0 il seguente array in maniera simile quando chiamer\u00e0 il metodo sort:<\/p>\n
const numbers =<\/span> [<\/span>80<\/span>,<\/span> 9<\/span>]<\/span>\nnumbers.<\/span>sort(<\/span>)<\/span> \/\/ [80, 9]\n<\/span>\nconst strings =<\/span> [<\/span>'80'<\/span>,<\/span> '9'<\/span>]<\/span>\nstrings.<\/span>sort(<\/span>)<\/span> \/\/ ['80', '9']<\/span><\/code><\/pre>\n
In questo caso, \u201c80\u201d viene prima di \u201c9\u201d perch\u00e9 ha uno Unicode code point pi\u00f9 piccolo. Se non mi credete, date un’occhiata al valore del code point del primo carattere di ciascuno di questi:<\/p>\n
\"8\"<\/span>.<\/span>codePointAt(<\/span>0<\/span>)<\/span>  \/\/ 56\n<\/span>\"9\"<\/span>.<\/span>codePointAt(<\/span>0<\/span>)<\/span>  \/\/ 57<\/span><\/code><\/pre>\n
A questo punto, il seguente codice non dovrebbe stupire nessuno perch\u00e9 adesso sappiamo che JavaScript sta semplicemente convertendo in stringhe tutti gli elementi in quegli array e sta confrontando i loro valori Unicode. (S\u00ec, anche le Emojis<\/a> hanno dei valori di Unicode code point).<\/p>\n
const emojis =<\/span> [<\/span>\"<\/p>\n","protected":false},"excerpt":{"rendered":"
Array#sort di Javascript pu\u00f2 diventare un potente strumento nella vostra cassetta degli attrezzi, ma senza una pianificazione appropriata e una conoscenza pi\u00f9 approfondita dei suoi punti di forza e di debolezza pu\u00f2 anche ingannarvi. Claudia Hern\u00e1ndez esplora il funzionamento del sorting in vari engine, in che modo creare funzioni di sorting personalizzare e ci aiuta a migliorare le nostre abilit\u00e0 di ordinamento.<\/p>\n","protected":false},"author":818,"featured_media":7000826,"comment_status":"open","ping_status":"open","template":"","categories":[271,199],"tags":[],"coauthors":[517],"class_list":["post-783","article","type-article","status-publish","has-post-thumbnail","hentry","category-javascript","category-numero-221-1-ottobre-2017"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/783","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=783"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000826"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=783"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=783"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=783"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=783"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Praticamente, la funzione codePointAt()<\/code> \u00e8 semplicemente un metodo<\/a> dell’oggetto String che viene usato per ottenere il valore dello Unicode code point di ciascun carattere a un dato indice.<\/p>\n