Array van objecten sorteren in JavaScript (comparator-builder) | We.Inc
Bouw een comparator met klikken: sorteer objecten op een getal, tekst, datum of twee keys, met localeCompare-opties, en zie resultaat en code naast elkaar.
Een array van objecten sorteren in JavaScript
Geef sort een compare-functie die kijkt naar de property waar het om gaat. Voor getallen retourneert u a.price - b.price. Voor tekst retourneert u a.name.localeCompare(b.name). Voor datums trekt u de timestamps van elkaar af. Een negatief resultaat zet a eerst, een positief zet b eerst. Gebruik toSorted in plaats van sort als de oorspronkelijke volgorde bewaard moet blijven.
(a, b) => Date.parse(a.joined) - Date.parse(b.joined)
a en b omwisselen
Boolean (true eerst)
(a, b) => Number(b.active) - Number(a.active)
a en b omwisselen
Objecten sorteren gaat om drie redenen vaak mis: de standaard sort vergelijkt alles als tekst, hoofdletters komen bij een gewone kleiner-dan-vergelijking vóór kleine letters, en sort herschrijft de array die u meegeeft. Met de builder hieronder zet u elk van die schakelaars om op een kleine teamlijst en ziet u de volgorde veranderen, met de bijbehorende comparator klaar om te kopiëren.
Kies de property om op te sorteren: naam, leeftijd, startdatum of een ticketcode met letters en cijfers door elkaar.
Kies oplopend of aflopend, en kies voor tekst-keys een gewone vergelijking of localeCompare met de numeric-optie.
Voeg een tweede key toe om gelijke waarden te scheiden, bijvoorbeeld eerst team, dan naam.
Kopieer de gegenereerde code. De tabel toont de volgorde die uw comparator op dit moment oplevert.
Roep sort() nooit zonder functie aan op getallen of objecten. Zonder comparator wordt elke waarde een string, dus 10 komt vóór 9 en objecten worden allemaal [object Object].
Retourneer een getal, niet true of false. Een boolean wordt omgezet naar 1 of 0 en geeft een onbetrouwbare volgorde.
Een lange lijst sorteren met localeCompare? Maak één Intl.Collator en geef de compare-methode daarvan mee; MDN merkt op dat dat sneller is voor grote arrays.
Zet records met een ontbrekende waarde bewust achteraan, bijvoorbeeld door op null te testen voordat u aftrekt, zodat ze niet door de lijst verspreid raken.
Veelgestelde vragen
Hoe sorteer ik een array van objecten op een property?
Roep people.sort((a, b) => a.age - b.age) aan voor een numerieke property of people.sort((a, b) => a.name.localeCompare(b.name)) voor een string. Wissel a en b om om de richting om te draaien.
Hoe sorteer ik op twee velden?
Vergelijk het eerste veld en ga alleen door naar het tweede als het eerste gelijk is: (a, b) => a.team.localeCompare(b.team) || a.age - b.age. De || werkt omdat gelijkspel 0 retourneert, wat als false telt.
Is sort in JavaScript stabiel?
Ja. Sinds ECMAScript 2019 moet sort stabiel zijn, dus items die als gelijk worden vergeleken houden hun eerdere volgorde. Daarom geeft eerst op naam en daarna op team sorteren een lijst gegroepeerd per team, met de namen op volgorde binnen elke groep.
Verandert sort de oorspronkelijke array?
Ja. sort herschikt de array ter plekke en retourneert diezelfde array. toSorted neemt dezelfde compare-functie maar retourneert een nieuwe array en laat de oorspronkelijke volgorde ongemoeid. Het is sinds juli 2023 beschikbaar in alle grote browsers.
Waarom worden namen met een kleine letter na namen met een hoofdletter gesorteerd?
Een gewone < of > vergelijkt tekencodes, en elke hoofdletter heeft een lagere code dan elke kleine letter. localeCompare volgt in plaats daarvan het alfabet van de taal, en met { sensitivity: 'base' } behandelt het ook accenten en hoofdletters als gelijk.
Wat de compare-functie echt retourneert
sort kijkt alleen naar het teken van het getal dat u retourneert. Onder nul betekent dat a vóór b komt, boven nul dat b eerst komt, en nul dat ze blijven staan zoals ze staan. De grootte van het getal doet er niet toe, daarom werkt aftrekken voor getallen en datums.
Aftrekken werkt niet voor tekst, want 'b' - 'a' is NaN. localeCompare retourneert een negatief getal, nul of een positief getal voor strings, dus het past direct in hetzelfde patroon.
Datums, ontbrekende waarden en gemengde types
Date-objecten van elkaar aftrekken levert een aantal milliseconden op, dus a.joined - b.joined sorteert de oudste eerst. Datums die als tekst in ISO-formaat (2026-10-14) zijn opgeslagen, sorteren ook correct met localeCompare omdat het jaar vooraan staat, maar andere formaten zoals 14/10/2026 niet.
Undefined elementen worden altijd naar het einde verplaatst en nooit aan uw functie doorgegeven. Een property die undefined is op een object is iets anders: het object komt nog steeds bij uw comparator aan, dus controleer dat zelf.
Waarom een gewone sort() getallen verkeerd sorteert
Zonder compare-functie wordt elk element omgezet naar een string en vergeleken op UTF-16-code-units, dus het eerste teken wint.
Standaardvolgorde tegenover een numerieke comparator
De standaard zet 100 vóór 25 omdat de tekst '1' vóór '2' komt.
Sorteren op meerdere keys, taalbewust en zonder mutatie
Team van A tot Z, daarna oudste eerst, zonder het origineel aan te raken
De ||-keten gaat alleen naar de volgende key als de vorige vergelijking 0 is. toSorted retourneert een nieuwe array.
Eén Intl.Collator voor een lange lijst
numeric: true zet T-2 vóór T-10, en sensitivity: 'base' negeert hoofdletters en accenten.
Een herbruikbare sortBy-helper
Geef de namen van de keys op volgorde mee. Een minteken voor een key sorteert die key aflopend.
Comparator-builder
Kies hoe de voorbeeldlijst van het team gesorteerd wordt, en tabel en code werken samen bij.
Sorteren op
Daarna op (bij gelijkspel)
Niets
Richting
Oplopend
Aflopend
Tekstvergelijking
Gewone < en >
localeCompare
localeCompare, numeriek en hoofdletterongevoelig
Voorbeeldlijst voor de comparator-builder (oorspronkelijke volgorde)