4

Possuo dois arrays de objeto:

let mergedScreensAllCompanies = [
    {
        id: 1,
        description: Cadastro de usuários,
    },
    {
        id: 2,
        description: Cadastro de filiais,
    }
]

let userScreens = [
    {
        id: 1,
        user_id: 1,
        screen_id: 1,
        allow_read: true,
        allow_create: true,
        allow_update: false,
        allow_delete: true,
    }
]

Preciso juntar esses dois arrays em apenas um, combinando as propriedades onde mergedScreensAllCompanies.id for igual a userScreens.screen_id tendo então o seguinte resultado:

merged = [{
        id: 1,
        description: Cadastro de usuários,
        user_id: 1,
        screen_id: 1,
        allow_read: true,
        allow_create: true,
        allow_update: false,
        allow_delete: true
    },
    {
        id: 2,
        description: Cadastro de filiais
    }
]

Eu tentei com o lodash:

let merged = _.merge(_.keyBy(userScreens , 'screen_id'), _.keyBy(mergedScreensAllCompanies , 'id'))

Porém dessa forma não juntou minhas propriedades da forma que eu esperava:

{
    "1": {
        "id": 1,
        "description": "Cadastro de usuários",
    },
    "2": {
        "id": 2,
        "description": "Cadastro de filiais",
    },
    "undefined": false
}
2
  • 1
    A solução precisa ser dada com lodash ou pode apenas usar os métodos nativos? Commented 23/03/2020 às 17:40
  • @AugustoVasques pode ser com lodash ou sem, é que com lodash acredito que o código fica mais reduzido, por isso tentei com ele Commented 23/03/2020 às 17:41

2 Respostas 2

8

Você não precisa nem necessariamente usar o Lodash. Vejamos algumas soluções com JavaScript puro.

const mergedScreensAllCompanies = [
  { id: 1, description: 'Cadastro de usuários' },
  { id: 2, description: 'Cadastro de filiais' }
];

const userScreens = [
  { id: 1, user_id: 1, screen_id: 1, foo: 'a' },
  { id: 2, user_id: 2, screen_id: 2, foo: 'b' }
];

const merged = userScreens.map((screen) => ({
  ...mergedScreensAllCompanies.find((o) => o.id === screen.screen_id),
  ...screen
}));

console.log(merged);

O problema é que tanto find quanto map possuem complexidade assintótica linear. E, como eles estão aninhados, trabalharão com complexidade quadrática. Conforme o número de elementos dessa operação aumentar, os resultados em termos de performance serão bastante degradantes.

Uma opção para contornar esse problema é eliminar o find, substituindo-o por algo que faça essencialmente a mesma coisa, mas de modo assintoticamente constante. Uma alternativa para isso é “indexar” o array mergedScreensAllCompanies em um Map para tornar a busca constante. Assim:

const mergedScreensAllCompanies = [
  { id: 1, description: 'Cadastro de usuários' },
  { id: 2, description: 'Cadastro de filiais' }
];

const userScreens = [
  { id: 1, user_id: 1, screen_id: 1, foo: 'a' },
  { id: 2, user_id: 2, screen_id: 2, foo: 'b' }
];

const mergedScreensIndex = new Map();
for (const obj of mergedScreensAllCompanies) {
  mergedScreensIndex.set(obj.id, obj);
}

const merged = userScreens.map((screen) => {
  return Object.assign(screen, mergedScreensIndex.get(screen.id) || {});
});

console.log(merged);

Desse modo você tem a mesma solução só que um pouco mais performática. A outra resposta também dá outras boas ideias nesse sentido.


Repare que o Lodash não foi utilizado em nenhuma das soluções que apresentei. Eu pessoalmente acho que incluir uma nova biblioteca para esse tipo de operação pode acabar criando mais dificuldades, já que é uma biblioteca a mais que o desenvolvedor tem que aprender.

Acho melhor usar as APIs nativas do JS do que buscar bibliotecas que não são mais tão necessárias quanto no passado.

3
  • 3
    "Eu pessoalmente acho que o Lodash acaba dificultando". Também tenho a mesma opinião, tanto que perguntei para AP sobre se o uso de objetos nativos estaria dentro do escopo da pergunta. Commented 23/03/2020 às 17:49
  • 1
    @Luiz Felipe Vou usar a solução sem Lodash. Eu precisei inverter a ordem e usar da seguinte maneira: const merged = mergedScreensAllCompanies.map(screen => ({ ...screen, ...userScreens.find(o => o.screen_id === screen.id) })) Quando eu coloco da forma que você postou o merged possui apenas o elemento comum entre os dois e os outros não permanece Commented 23/03/2020 às 17:56
  • Exatamente, @AugustoVasques! :) Commented 23/03/2020 às 17:57
2

Complementando a outra resposta, usar map/find é uma boa solução, mas dependendo do tamanho dos arrays, ela pode não escalar tão bem.

Isso porque, segundo a especificação da linguagem, o método find sempre começa a busca no início do array. Então se os arrays começarem a ficar muito grandes, isso começa a ficar ineficiente, já que para cada elemento de um array, você precisa fazer a busca no outro, sempre partindo do início.

Claro que, para arrays pequenos e/ou sendo processados poucas vezes, a diferença é irrelevante e imperceptível (afinal, para poucos dados, tudo é rápido). Mas de qualquer forma, uma maneira de evitar essas buscas sendo feitas a todo momento é criar um objeto temporário que guarda referências aos objetos originais, usando como chave a informação em comum (no caso, o id).

Com isso, a "busca" ao objeto passa a ser apenas um lookup simples neste objeto. Depois, descarta-se as chaves e pega-se apenas os valores do mesmo (que no caso, estarão em um array, como desejado). Assim:

const mergedScreensAllCompanies = [
  { id: 1, description: 'Cadastro de usuários' },
  { id: 2, description: 'Cadastro de filiais' }
];

const userScreens = [
  { id: 1, user_id: 1, screen_id: 1, foo: 'a' },
  { id: 2, user_id: 2, screen_id: 2, foo: 'b' }
];

// objeto temporário, mapeia cada id para o respectivo objeto
let merged = {};
for (let i = 0; i < mergedScreensAllCompanies.length; i++) {
    merged[mergedScreensAllCompanies[i].id] = mergedScreensAllCompanies[i];
}
// atualiza os objetos com os dados do outro array
for (let i = 0; i < userScreens.length; i++) {
    if (merged[userScreens[i].screen_id]) {
        merged[userScreens[i].screen_id] = { ...merged[userScreens[i].screen_id], ...userScreens[i] };
    }
}
// descarta as chaves, obtém o array com os objetos atualizados
merged = Object.values(merged);

console.log(merged);

Apesar de parecer "fazer mais coisas" (afinal, tem dois for), na verdade ele faz menos coisas. O map percorre o array uma vez, e para cada elemento ele faz uma busca com find, que percorre o outro array. Tudo bem que a maioria das vezes ele não percorre tudo, já que ele para assim que encontra o elemento, mas ainda sim, teremos muitos elementos sendo percorrido várias vezes, o que no final acaba gerando bem mais iterações (e como veremos mais abaixo, isso pode fazer toda a diferença).

Já o código acima só percorre cada um dos arrays uma vez (e há um loop adicional no fim, dentro de Object.values). Apesar de parecer que o código faz mais coisas, na verdade está fazendo menos. A diferença é que com map e find, essas coisas a mais estão "escondidas" dentro dessas funções.

Mas novamente reforço que, para poucos arrays pequenos, a diferença será ínfima e provavelmente você nem vai perceber. Neste caso, passa a ser mais uma questão de gosto e "estilo": muitos preferem programar de maneira mais "funcional" e acham que usando map (e seus "irmãos" filter, reduce, etc) o código fica mais expressivo, etc. Só quis deixar uma alternativa, caso os arrays comecem a aumentar muito e isso comece a ser um problema (e é sempre bom saber outras formas de fazer, para "abrir a cabeça" e não ficar preso a um único jeito de resolver os problemas).


Apenas para constar, outras alternativas são:

  1. eliminar o uso de spread para atualizar o objeto:

    let merged = {};
    for (let i = 0; i < mergedScreensAllCompanies.length; i++) {
        merged[mergedScreensAllCompanies[i].id] = mergedScreensAllCompanies[i];
    }
    for (let i = 0; i < userScreens.length; i++) {
        if (merged[userScreens[i].screen_id]) {
            merged[userScreens[i].screen_id].user_id = userScreens[i].user_id;
            merged[userScreens[i].screen_id].screen_id = userScreens[i].screen_id;
            merged[userScreens[i].screen_id].foo = userScreens[i].foo;
        }
    }
    merged = Object.values(merged);
    
  2. Usar for...of:

    let merged = {};
    for (const screen of mergedScreensAllCompanies) {
        merged[screen.id] = screen;
    }
    
    for (const userScreen of userScreens) {
        if (merged[userScreen.screen_id]) {
            merged[userScreen.screen_id] = { ...merged[userScreen.screen_id], ...userScreen };
        }
    }
    merged = Object.values(merged);
    

O primeiro é ainda mais rápido (pois não tem o custo de criar outro objeto, que é o que acontece quando você usa o spread), mas em compensação o código fica mais verboso (o que pode ou não ser um problema, vai de cada um - pode ser um problema se forem muitas propriedades para copiar, por exemplo). O segundo, apesar de um pouco mais lento (porém, ainda sim mais rápido que map/find), é um pouco mais sucinto - e na minha opinião, mais expressivo - que o for "tradicional" (mas novamente, isso é bem subjetivo).

Por fim, aqui está o teste que fiz, e a opção mais rápida foi o for sem spread (item 1 acima), seguido do for normal (a primeira opção que coloquei), depois for..of, e por fim map/find e Lodash (este foi de longe o mais lento).

Também testei no Node com o Benchmark.js e o resultado foi o mesmo:

sem spread x 2,412 ops/sec ±1.51% (87 runs sampled)
for normal x 671 ops/sec ±4.05% (75 runs sampled)
for  of    x 651 ops/sec ±2.78% (82 runs sampled)
map/find   x 15.15 ops/sec ±3.30% (41 runs sampled)
lodash     x 11.88 ops/sec ±5.90% (33 runs sampled)
Fastest is sem spread

O que vale são as ops/sec (operações por segundo): quanto mais, melhor

Reforçando mais uma vez que se você não tem um problema de desempenho (talvez por serem arrays pequenos e/ou poucas execuções), não fará tanta diferença assim (dependendo do caso, para arrays pequenos, o desempenho do map pode ser igual ou até melhor). Até porque este é apenas um teste "aleatório", o que vale mesmo é o teste com dados reais, pra saber se isso é realmente um problema...

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .