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:
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);
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...