Direct naar de hoofdinhoud
Module 6 · Les 4 van 424/32 in de cursus~12 min
Modulelessen (4/4)

sorteren

Het sorteren van een array in JavaScript heeft een grote valkuil: sort() muteert de originele array en wordt standaard gesorteerd als tekenreeksen.

De val

JS
const nums = [10, 2, 1, 20];
nums.sort();
// [1, 10, 2, 20]   ← !? sorted as strings: "1" < "10" < "2"

Voor numerieke sortering moet u een comparator (a, b) => number doorgeven:

  • a - b < 0 → a komt op de eerste plaats
  • a - b > 0 → b staat op de eerste plaats
  • a - b === 0 → bestelling ongewijzigd
JS
const nums = [10, 2, 1, 20];
nums.sort((a, b) => a - b);
// [1, 2, 10, 20]    ← ascending order

nums.sort((a, b) => b - a);
// [20, 10, 2, 1]    ← descending

Objecten sorteren op een veld

JS
const utenti = [
  { nome: 'Anna', eta: 30 },
  { nome: 'Luca', eta: 12 },
  { nome: 'Sara', eta: 18 },
];

utenti.sort((a, b) => a.eta - b.eta);
// [{Luca,12}, {Sara,18}, {Anna,30}]

Voor strings kun je ze vergelijken met localeCompare:

JS
const nomi = ['Bruno', 'aurora', 'Carlo'];
nomi.sort((a, b) => a.localeCompare(b));
// ['aurora', 'Bruno', 'Carlo']

Het origineel niet muteren

Twee opties:

JS
// 1) copy + sort
const copia = [...nums].sort((a, b) => a - b);

// 2) toSorted (modern, ES2023)
const ordinati = nums.toSorted((a, b) => a - b);

Probeer het

Oefening#js.m6.l4.e1
Pogingen: 0Laden…

Definieer `sortAscending(nums)`: retourneer een NIEUWE kopie van de array, gesorteerd in oplopende volgorde als getallen. Het origineel mag niet veranderen.

Editor laden…
Toon hint

[...nums].sort((a, b) => a - b)

Oplossing beschikbaar na 3 pogingen

Oefening beoordelen

Oefening#js.m6.l4.e2
Pogingen: 0Laden…

Definieer `sortByAgeAscending(people)`: gegeven een array van { name, age }, retourneert u een nieuwe kopie gesorteerd op oplopend naar leeftijd. Het origineel mag niet veranderen.

Editor laden…
Toon hint

[...mensen].sort((a, b) => a.leeftijd - b.leeftijd)

Oplossing beschikbaar na 3 pogingen