Cum se sortează o matrice de obiecte în JavaScript

Blog

Cum se sortează o matrice de obiecte în JavaScript

În acest articol, vă voi arăta cum să sortați o serie de obiecte în JavaScript, fără probleme sau probleme.

Dacă aveți o serie de obiecte pe care trebuie să le sortați într-o anumită ordine, tentația ar putea fi să căutați o bibliotecă JavaScript. Cu toate acestea, înainte de a face acest lucru, amintiți-vă că puteți face o sortare destul de îngrijită cu funcția nativă Array.sort.

Pentru a urma împreună cu acest articol, veți avea nevoie de cunoștințe despre conceptele de bază JavaScript, cum ar fi declararea variabilelor, funcțiile de scriere și declarațiile condiționale. De asemenea, voi folosi sintaxa ES6.

Sortare matrice de bază

În mod implicit, JavaScript Array.sort funcția convertește fiecare element din matrice pentru a fi sortat, într-un șir și le compară în Punct de cod Unicode Ordin.

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] ]

Poate vă întrebați de ce 30 vine înainte de 4. Nu este logic, nu? Ei bine, de fapt este. Acest lucru se întâmplă deoarece fiecare element din matrice este mai întâi convertit într-un șir și '30' vine înainte '4' în ordine Unicode.

De asemenea, merită remarcat faptul că, spre deosebire de multe alte funcții matrice JavaScript, Array.sort modifică de fapt sau mută matricea pe care o sortează.

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

Pentru a evita acest lucru, puteți crea o nouă instanță a matricei pentru a fi sortată și să o modificați în schimb.

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']

Rețineți utilizarea spread operator pentru a crea o nouă instanță a baz. Puteți citi mai multe despre asta Aici .

returnează două valori javascript

Încearcă

JS Bin pe jsbin.com

Folosind Array.sort singur nu ar fi foarte util pentru sortarea unui set de obiecte. Din fericire, funcția are un opțional compareFunction parametru, care determină sortarea elementelor matricei în funcție de valoarea returnată a funcției de comparare.

Utilizarea funcțiilor de comparare pentru sortare

Să spunem că a și b sunt cele două elemente comparate prin funcția de comparare. Dacă valoarea returnată a funcției de comparare este:

  1. mai puțin de 0 - a vine înainte b
  2. mai mare decât 0 - b vine înainte a
  3. egal cu 0 - a și b rămân neschimbate unul față de celălalt

Să vedem un exemplu simplu cu o serie de numere:

const arr = [1, 2, 30, 4]; function compare(a, b){ if (a > b) return 1; if (b > a) return -1; return 0; } arr.sort(compare); // => 1, 2, 4, 30

Acest lucru poate fi refactorizat oarecum pentru a obține valoarea returnată scăzând a de la b:

function compare(a, b){ return a - b; }

Acesta este acum un candidat bun pentru o funcție săgeată:

arr.sort((a, b) => a - b);

Dacă nu sunteți familiarizați cu funcțiile săgeată, puteți citi mai multe despre ele aici: Funcții săgeată ES6: sintaxă grasă și concisă în JavaScript .

serviciul de furnizare de vize ne

Sortează o matrice de obiecte în JavaScript

Să vedem acum să sortăm o serie de obiecte. Să luăm o serie de obiecte de bandă:

const bands = [ { genre: 'Rap', band: 'Migos', albums: 2}, { genre: 'Pop', band: 'Coldplay', albums: 4}, { genre: 'Rock', band: 'Breaking Benjamins', albums: 1} ];

Putem folosi următoarele compare funcție pentru a sorta această matrice de obiecte în funcție de gen:

function compare(a, b) { // Use toUpperCase() to ignore character casing const genreA = a.genre.toUpperCase(); const genreB = b.genre.toUpperCase(); let comparison = 0; if (genreA > genreB) { comparison = 1; } else if (genreA

Pentru a inversa ordinea de sortare, puteți inversa pur și simplu valoarea returnată a compare funcţie:

dactilografiat în 5 minute
function compare(a, b) { ... //invert return value by multiplying by -1 return comparison * -1; }

Încearcă

JS Bin pe jsbin.com

Crearea unei funcții de sortare dinamică

Să terminăm făcând acest lucru mai dinamic. Să creăm o funcție de sortare, pe care o puteți utiliza pentru a sorta o serie de obiecte, ale căror valori sunt șiruri sau numere. Această funcție are doi parametri - cheia pe care dorim să o sortăm și ordinea rezultatelor (adică crescătoare sau descendentă).

const bands = [ { genre: 'Rap', band: 'Migos', albums: 2}, { genre: 'Pop', band: 'Coldplay', albums: 4, awards: 13}, { genre: 'Rock', band: 'Breaking Benjamins', albums: 1} ]; // function for dynamic sorting function compareValues(key, order='asc') { return function(a, b) { if(!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) { // property doesn't exist on either object return 0; } const varA = (typeof a[key] === 'string') ? a[key].toUpperCase() : a[key]; const varB = (typeof b[key] === 'string') ? b[key].toUpperCase() : b[key]; let comparison = 0; if (varA > varB) { comparison = 1; } else if (varA

Și acesta este modul în care l-ați folosi:

// array is sorted by band, in ascending order by default bands.sort(compareValues('band')); // array is sorted by band in descending order bands.sort(compareValues('band', 'desc')); // array is sorted by albums in ascending order bands.sort(compareValues('albums'));

Încearcă

JS Bin pe jsbin.com

În codul de mai sus, metoda hasOwnProperty este folosit pentru a verifica dacă proprietatea specificată este definită pentru fiecare obiect și nu a fost moștenit prin intermediul lanțului prototip . Dacă nu este definită pe obiecte, funcția returnează 0, ceea ce face ca ordinea de sortare să rămână așa cum este (adică obiectele rămân neschimbate una față de cealaltă).

The tip de operator este, de asemenea, utilizat pentru a verifica tipul de date al valorii proprietății. Aceasta permite funcției să determine modul corect de sortare a matricei. De exemplu, dacă valoarea proprietății specificate este a string, a toUpperCase metoda este utilizată pentru a converti toate caracterele sale în majuscule, astfel încât carcasa caracterelor este ignorată la sortare.

Puteți regla funcția de mai sus pentru a se potrivi cu alte tipuri de date și orice altă particularitate de care are nevoie scriptul.

google sheet api nodejs

String.prototype.localeCompare ()

În exemplul nostru de mai sus, dorim să putem sorta o serie de obiecte, ale căror valori sunt șiruri sau numere. Cu toate acestea, dacă știți că veți avea de-a face doar cu obiecte ale căror valori sunt șiruri, puteți ordona puțin codul folosind JavaScript | | + + | metodă.

Această metodă returnează un număr care indică dacă un șir apare înainte, după sau este același cu un șir dat în ordinea de sortare. Permite un tip de matrice care nu face sensibilitatea la majuscule și minuscule:

localeCompare

În ceea ce privește ['motorhead', 'Motorhead', 'Mötorhead'].sort(); // ['Motorhead', 'Mötorhead', 'motorhead'] ['motorhead', 'Motorhead', 'Mötorhead'].sort((a, b) => a.localeCompare(b)); // ['motorhead', 'Motorhead', 'Mötorhead'] funcție, asta înseamnă că am putea scrie:

compareValues

Puteți citi mai multe despre locale Comparați peste MDN .

Concluzie

Așa că o aveți - o scurtă introducere pentru sortarea unei matrice de obiecte. Deși multe biblioteci JavaScript oferă acest tip de capacitate de sortare dinamică (de ex. Underscore.js , Lodash și Zahăr ), după cum s-a demonstrat, nu este atât de greu să implementezi singur acest tip de funcționalitate.

Dacă aveți întrebări sau comentarii, nu ezitați să începeți o conversație.

Publicat inițial de Olayinka Omole la sitepoint.com

#javascript