Array.prototype.groupBy의 Agrupamento

Foto de capa por Markus Spiske no Unsplash

Desde quando eu comecei a programar, semper me peguei em situações onde eu precisava utilizar uma função simples, mas ao mesmo tempo inexistente nas linguagens que eu estava trabalhando.

Isso não foi diferente quando eu tive que trabalhar com JavaScript e exacti fazer uma simples ação de agrupamento, ou seja, eu tinha que separar meu objeto ou array em pequenos grupos de acordo com o tipo de item que eu tinha neles.

Felizmente, uma das salvações de todo dev quando precisa utilizar funções muito comuns é apelar para bibliotecas de utilidades, a mais famosa hoje é o LoDash , quecoincidentementepossui um método chamado groupBy .

Mas a época de baixar bibliotecas externas para essas funções simples está acabando porque agora podemos ter o nosso própriogroupBy , só que nativo.

아그루파멘토

As funções de agrupamento entram em uma classe de funções que eu gosto de chamar de incríveis e preguiçosas, porque essas funções são extremamente úteis para praticamente todo o tipo de coisa que a gente pode fazer em desenvolvimento, ao mesmo tempo que elas são rápidas e simples De Implementer, mas elas são tão simples que, ao mesmo tempo, não vale a pena escrever algo do zero.

Por isso muitas pessoas recorrem a baixar uma biblioteca externa como o LoDash para poder ter o problema resolvido de forma simples e prática.

Eu nunca fui um grande fã de ter que baixar uma biblioteca e criar uma dependsência de um código externo para uma função tão simples, 특히 se eu vou usar ela uma única vez no meu código. Então eu prefiro fazer essas funções na mão.

Existem infinitas formas de você realizar um agrupamento simples, e por agrupamento simples eu estou dizendo ter a capacidade de pegar uma série de itens dentro de um array e organizá-los em categorias, por exemplo, separar usuários dentro de um sistema por seu nível de 답변:

const usuarios = [
    { name: 'Lucas', role: 'admin' },
    { name: 'Ana', role: 'reader' },
    { name: 'Erick', role: 'reader' },
    { name: 'Beatriz', role: 'writer' },
    { name: 'Carla', role: 'admin' }
]

A saída que eu quero é algo assim:

const groups = {
    admin: [
        {name: 'Lucas', role: 'admin'}, 
        {name: 'Carla', role: 'admin'}
    ],
    reader: [
        { name: 'Ana', role: 'reader' },
        { name: 'Erick', role: 'reader' },
    ],
    writer: [
        { name: 'Beatriz', role: 'writer' }
    ]
}

Então como a gente faz uma função desse tipo? A forma mais simples que eu consigo pensar é com um reduce:

function groupBy (array, key) {
    return array.reduce((acc, item) => {
        if (!acc[item[key]]) acc[item[key]] = []
        acc[item[key]].push(item)
        return acc
    }, {})
}

Existe uma outra forma de agrupar se a gente simplificar um pouco mais o reduce para usar o spread operator:

function groupBy (array, key) {
    return array.reduce((acc, item) => ({
      ...acc,
      [item[key]]: [...(acc[item[key]] ?? []), item],
    }),
  {})
}

Mas existemalguns artigos que comentam que talvez usar o spread para este caso possa ser uma má ideia, já que vamos ter um loop "escondido"que pode tornar a nossa função uma função decomplexidade exponencial .

Então temos o lodash.groupBy que é quase a mesma implementação, porém com alguns tipos para compatibilidade e alguns controles de erros mais estritos. Função que, junto com outras como o intersect e o difference , são incríveis e preguiçosas.

솔루션 네이티브

최근comitê TC39, a organização que mantém e dirige o JavaScript, anunciou que uma de suaspropostas , a que vai incluir o novo métodogroupBy dentro doArray.prototype , já chegou no estágio 3!

Se você não sabe como funciona o processo de publicação e evolução do JavaScript, vai te ajudar a entender tudo.

Isso significa que logo mais podemos ver uma implementação exatamente como esta aqui nos códigos de sistemas pelo mundo:

const usuarios = [
    { name: 'Lucas', role: 'admin' },
    { name: 'Ana', role: 'reader' },
    { name: 'Erick', role: 'reader' },
    { name: 'Beatriz', role: 'writer' },
    { name: 'Carla', role: 'admin' }
]

const grouped = usuarios.groupBy(({role}) => role)

A ideia é que essa funcionalidade seja lançada como parte do ES2022 durante este ano e entre como parte integrante dos browsers daqui a um tempo.

Mas se você é que nem eu e quer testar essa funcionalidade o mais rápido possível, então você precisa de um shim de implementação ou então esperar para usar o babel 사전 설정 없음 stage-3 para poder codar da mesma forma que você já faz 호제!