"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > #LearnedToday: Object.groupBy()

#LearnedToday: Object.groupBy()

Publicado em 01/11/2024
Navegar:355

#LearnedToday: Object.groupBy()

? Finalmente saiu! Não há mais necessidade de escrever código feio para agrupar uma matriz de objetos por um valor específico de um campo!

Desde o final de 2023, existe um método estático oficial para Object chamado groupBy() que faz isso por nós!
Aceita um Iterable, como um Array, e uma função, que é executada para cada elemento e deve retornar a "categoria" daquele elemento específico.
O método retorna um novo Objeto onde cada chave é uma categoria diferente que contém uma matriz de objetos pertencentes a essa categoria específica.

NOTA: Os elementos no objeto retornado e no iterável original são os mesmos (não cópias profundas!). A alteração da estrutura interna dos elementos será refletida tanto no iterável original quanto no objeto retornado.

Exemplo

Vamos dar um exemplo prático para ver como é fácil agrupar todos os personagens das Tartarugas Ninja por idade.

A matriz inicial

const ninjaTurtlesCharacters = [
  { age: 16, name: 'Michelangelo' },
  { age: 16, name: 'Raffaello' },
  { age: 16, name: 'Donatello' },
  { age: 16, name: 'Leonardo' },
  { age: 91, name: 'Splinter' },
  { age: 25, name: 'Casey Jones' },
  { age: 25, name: 'April O\'Neil' }
];

O bom e velho jeito (com redução)

const ninjaTurtlesCharactersByAge = ninjaTurtlesCharacters.reduce(
  (groupedPeople, item) => ({
    ...groupedPeople,
    [item.age]: groupedPeople[item.age]
      ? [...groupedPeople[item.age], item]
      : [item],
  }),
  {}
);

O jeito MODERNO

const ninjaTurtlesCharactersByAgeNew = Object.groupBy(
  ninjaTurtlesCharacters,
  ({ age }) => age
);

Dica: use Map.groupBy() se quiser retornar um Mapa em vez de um Objeto

O resultado

{
  "16": [
    { age: 16, name: 'Michelangelo' },
    { age: 16, name: 'Raffaello' },
    { age: 16, name: 'Donatello' },
    { age: 16, name: 'Leonardo' }
  ],
  "25": [
    { age: 25, name: 'Casey Jones' },
    { age: 25, name: 'April O\'Neil' }
  ],
  "91": [
    { age: 91, name: 'Splinter' }
  ]
}

Demonstração

??‍? Como sempre, criei um projeto Stackblitz simples para brincar com o código.

? Documentos: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy

ℹ Suporte ao navegador: https://caniuse.com/mdn-javascript_builtins_object_groupby

Declaração de lançamento Este artigo é reproduzido em: https://dev.to/danielzotti/learnedtoday-objectgroupby-4kl9?1 Se houver alguma infração, entre em contato com [email protected] para excluí-lo.
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3