consdata.com
Blog techniczny Blog biznesowy Dział HR
EN
javascript

Czy wiesz, czym jest i jak używać Object.groupBy()?

author Piotr Grobelny
9 sierpnia 2024

Object.groupBy() to statyczna metoda pozwalająca grupować elementy. Jej składnia jest następująca:

Object.groupBy(items, callbackFn)

gdzie items jest listą, którą będziemy grupować, a callbackFn jest funkcją, którą będziemy wywoływać dla każdego elementu z listy. Funkcja ta będzie określać grupę, do której element ma trafić na nowej liście. Jako przykład posłuży nam poniższa lista książek:

const books = [
  {title: '1984', genre: 'Dystopian fiction', year: 1949},
  {title: 'To Kill a Mockingbird', genre: 'Classic literature', year: 1960},
  {title: 'The Great Gatsby', genre: 'Modernist novel', year: 1925},
  {title: 'The Catcher in the Rye', genre: 'Classic literature', year: 1951},
  {title: 'Pride and Prejudice', genre: 'Romance novel', year: 1813}
];

Chcąc stworzyć nową listę, w której pozycje będą pogrupowane gatunkami, wystarczy wywołać Object.groupBy w następujący sposób:

Object.groupBy(books, ({ genre }) => genre)

// wynik:
{
  "Dystopian fiction": [
      {"title": "1984", "genre": "Dystopian fiction", "year": 1949},
  ],
  "Classic literature": [
      {"title": 'To Kill a Mockingbird', "genre": 'Classic literature', "year": 1960},
      {"title": 'The Catcher in the Rye', "genre": 'Classic literature', "year": 1951},
  ],
  "Romance novel": [
      {"title": 'Pride and Prejudice', "genre": 'Romance novel', "year": 1813}
  ], 
  "Modernist novel": [
      {"title": "The Great Gatsby", "genre": "Modernist novel", "year": 1925}
  ]
}

Bardziej zaawansowanym przykładem może być podział listy na grupy obejmujące nowe książki (wydane po 1900 roku) i stare (pozostałe):

Object.groupBy(books, ({year}) => year > 1900 ? "new" : "old")

// wynik:
{
  "new": [
      {"title": "1984", "genre": "Dystopian fiction", "year": 1949},
      {"title": "The Great Gatsby", "genre": "Modernist novel", "year": 1925},
      {"title": 'To Kill a Mockingbird', "genre": 'Classic literature', "year": 1960},
      {"title": 'The Catcher in the Rye', "genre": 'Classic literature', "year": 1951},
  ],
  "old": [
      {"title": 'Pride and Prejudice', "genre": 'Romance novel', "year": 1813}
  ]
}

Przydatne linki

  • Kompatybilność z przeglądarkami: https://caniuse.com/?search=Object.groupBy
  • Dokumentacja: https://developer.mozilla.org/…/Object/groupBy
Najnowsze wpisy

  • Dostępność w PDF - dokumenty bez barier
  • Czy wiesz, że z pomocą @starting-style można animować elementy z display: none za pomocą samego CSS?
  • Czy wiesz, że w Angular 17 została wprowadzona alternatywa dla *ngSwitch?
Dołącz do nas

  • SENIOR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 14 900 - 20 590 PLN brutto
    B2B 19 680 - 27 220 PLN netto
  • REGULAR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 11 300 - 15 900 PLN brutto
    B2B 14 950 - 21 000 PLN netto
  • ZOBACZ WSZYSTKIE OGŁOSZENIA

newsletter

techniczny

Zapisz się

Podobne wpisy

post-image
WCAG

Dostępność w PDF - dokumenty bez barier

author
Kacper Hoffman 28 kwi 2025
post-image
angular

Czy wiesz, że z pomocą @starting-style można animować elementy z display: none za pomocą samego CSS?

author
Piotr Tatarski 7 kwi 2025
post-image
angular

Czy wiesz, że w Angular 17 została wprowadzona alternatywa dla *ngSwitch?

author
Dorian Mejer 10 mar 2025
Dołącz do nas

  • SENIOR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 14 900 - 20 590 PLN brutto
    B2B 19 680 - 27 220 PLN netto
  • REGULAR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 11 300 - 15 900 PLN brutto
    B2B 14 950 - 21 000 PLN netto
  • ZOBACZ WSZYSTKIE OGŁOSZENIA

Zapisz się na

newsletter

techniczny

consdata.com
  • Kontakt

    • sales@consdata.com
    • +48 61 41 51 000

  • Biuro

    • K9Office
      Krysiewicza 9/14
      61-825 Poznań
      Polska

  • Rozwiązania

    • Eximee
    • Kouncil
  • Blog Dołącz do nas
Copyright © 2024 Consdata. All rights reserved. Privacy Policy & Cookies
Chcemy używać plików cookie oraz skryptów podmiotów trzecich do polepszania funkcjonowania tej strony Zgadzam się