Sortowanie tablicy obiektów w JavaScript (kreator komparatora) | We.Inc
Zbuduj komparator kliknięciami: sortuj obiekty według liczby, tekstu, daty lub dwóch kluczy, z opcjami localeCompare, i zobacz wynik oraz kod obok siebie.
Sortowanie tablicy obiektów w JavaScript
Przekaż do sort funkcję porównującą, która patrzy na interesującą Cię właściwość. Dla liczb zwróć a.price - b.price. Dla tekstu zwróć a.name.localeCompare(b.name). Dla dat odejmij znaczniki czasu. Wynik ujemny stawia a pierwsze, dodatni stawia pierwsze b. Użyj toSorted zamiast sort, gdy oryginalna kolejność musi zostać zachowana.
(a, b) => Date.parse(a.joined) - Date.parse(b.joined)
zamień a i b
Boolean (true najpierw)
(a, b) => Number(b.active) - Number(a.active)
zamień a i b
Sortowanie obiektów sprawia ludziom kłopot z trzech powodów: domyślne sortowanie porównuje wszystko jako tekst, przy zwykłym porównaniu mniejsze niż wielkie litery trafiają przed małe, a sort nadpisuje przekazaną tablicę. Kreator poniżej pozwala przełączać każdy z tych przełączników na małej liście zespołu i obserwować zmianę kolejności, z pasującym komparatorem gotowym do skopiowania.
Wybierz właściwość do sortowania: imię, wiek, datę rozpoczęcia lub kod zgłoszenia łączący litery i cyfry.
Wybierz kierunek rosnący lub malejący, a dla kluczy tekstowych zwykłe porównanie albo localeCompare z opcją numeric.
Dodaj drugi klucz, aby rozstrzygać remisy, na przykład najpierw zespół, potem imię.
Skopiuj wygenerowany kod. Tabela pokazuje kolejność, jaką Twój komparator daje w tej chwili.
Nigdy nie wywołuj sort() bez funkcji na liczbach lub obiektach. Bez komparatora każda wartość zamieniana jest na tekst, więc 10 ląduje przed 9, a wszystkie obiekty stają się [object Object].
Zwracaj liczbę, a nie true lub false. Wynik logiczny jest zamieniany na 1 lub 0 i daje niepewną kolejność.
Sortujesz długą listę z localeCompare? Utwórz jeden Intl.Collator i przekaż jego metodę compare; MDN zauważa, że przy dużych tablicach jest to szybsze.
Celowo umieszczaj rekordy z brakującą wartością na końcu, na przykład sprawdzając null przed odejmowaniem, aby nie rozsypały się po całej liście.
Najczęściej zadawane pytania
Jak posortować tablicę obiektów według właściwości?
Wywołaj people.sort((a, b) => a.age - b.age) dla właściwości liczbowej lub people.sort((a, b) => a.name.localeCompare(b.name)) dla tekstowej. Zamień a i b, aby odwrócić kierunek.
Jak sortować według dwóch pól?
Porównaj pierwsze pole i przejdź do drugiego tylko wtedy, gdy pierwsze daje remis: (a, b) => a.team.localeCompare(b.team) || a.age - b.age. || działa, bo remis zwraca 0, które liczy się jako false.
Czy sort w JavaScript jest stabilne?
Tak. Od ECMAScript 2019 sort musi być stabilne, więc elementy uznane za równe zachowują wcześniejszą kolejność. Dlatego sortowanie najpierw po imieniu, a potem po zespole daje listę pogrupowaną według zespołów z imionami w kolejności w każdej grupie.
Czy sort zmienia oryginalną tablicę?
Tak. sort zmienia kolejność tablicy w miejscu i zwraca tę samą tablicę. toSorted przyjmuje tę samą funkcję porównującą, ale zwraca nową tablicę i nie rusza oryginalnej kolejności. Jest dostępne we wszystkich głównych przeglądarkach od lipca 2023.
Dlaczego imiona z małej litery są sortowane po tych z wielkiej?
Zwykłe porównanie < lub > porównuje kody znaków, a każda wielka litera ma niższy kod niż każda mała. localeCompare stosuje zamiast tego alfabet danego języka, a z { sensitivity: 'base' } traktuje też akcenty i wielkość liter jako równe.
Co naprawdę zwraca funkcja porównująca
sort patrzy tylko na znak zwróconej liczby. Poniżej zera oznacza, że a idzie przed b, powyżej zera, że pierwsze idzie b, a zero oznacza pozostawienie ich bez zmian. Wielkość liczby nie ma znaczenia, dlatego odejmowanie działa dla liczb i dat.
Odejmowanie nie działa dla tekstu, bo 'b' - 'a' to NaN. localeCompare zwraca liczbę ujemną, zero lub dodatnią dla tekstów, więc pasuje wprost do tego samego wzorca.
Daty, brakujące wartości i mieszane typy
Odejmowanie obiektów Date daje liczbę milisekund, więc a.joined - b.joined sortuje od najstarszych. Daty zapisane jako tekst w formacie ISO (2026-10-14) też sortują się poprawnie z localeCompare, bo rok jest pierwszy, ale inne formaty, takie jak 14/10/2026, już nie.
Elementy undefined są zawsze przenoszone na koniec i nigdy nie trafiają do Twojej funkcji. Właściwość undefined w obiekcie to co innego: obiekt nadal trafia do komparatora, więc sprawdź to samodzielnie.
Dlaczego zwykłe sort() źle sortuje liczby
Bez funkcji porównującej każdy element jest zamieniany na tekst i porównywany według jednostek kodu UTF-16, więc wygrywa pierwszy znak.
Domyślna kolejność kontra komparator liczbowy
Domyślnie 100 ląduje przed 25, bo tekst '1' jest przed '2'.
Sortowanie po wielu kluczach, z uwzględnieniem języka i bez mutacji
Zespół od A do Z, potem od najstarszych, bez ruszania oryginału
Łańcuch || przechodzi do następnego klucza tylko wtedy, gdy poprzednie porównanie daje 0. toSorted zwraca nową tablicę.
Jeden Intl.Collator dla długiej listy
numeric: true ustawia T-2 przed T-10, a sensitivity: 'base' ignoruje wielkość liter i akcenty.
Pomocnicza funkcja sortBy do wielokrotnego użycia
Przekaż nazwy kluczy w kolejności. Minus przed kluczem sortuje ten klucz malejąco.
Kreator komparatora
Wybierz sposób sortowania przykładowej listy zespołu, a tabela i kod zaktualizują się razem.
Sortuj według
Następnie według (przy remisie)
Nic
Kierunek
Rosnąco
Malejąco
Porównanie tekstu
Zwykłe < i >
localeCompare
localeCompare, numeryczne i bez rozróżniania wielkości liter
Przykładowa lista używana przez kreator komparatora (oryginalna kolejność)