Javascript で配列内のオブジェクト同士を結合したい。

Question

前提・実現したいこと

初学者です。

const array1 = [{a:1, b:1}, {c:1, d:1}];　// オブジェクトは複数
const array2 = [{e:1, f:1}, {g:1, h:1}];　// オブジェクトは複数

これらの配列を以下のように結合したい。

const array3 = [{a:1, b:1, e:1, f:1}, {c:1, d:1, g:1, h:1}];

試したこと

以下のようにforEachでできないかと模索しましたが
うまくいかず・・
スプレッド構文でも試そうとしましたがうまくいかず・・・

array1.forEach((element)=>{
  ここでそれぞれの配列内部のオブジェクトにarray2のそれぞれのオブジェクトを
　取り出して、結合して　array3に格納したい。
})

補足情報（FW/ツールのバージョンなど）

codepenでテストしています。

よろしくお願いいたします。

Answer 1

前提として、「与えられるarray1とarray2の長さ（要素数）は同じである」ということでよければ、以下でいけるやろ思います。

const array1 = [{a: 1, b: 1}, {c: 1, d: 1}];
const array2 = [{e: 1, f: 1}, {g: 1, h: 1}];　

const array3 = array1.map((obj1, i) => ({ ...obj1, ...array2[i] }));

console.log(JSON.stringify(array3)); // => "[{'a':1,'b':1,'e':1,'f':1},{'c':1,'d':1,'g':1,'h':1}]"

➡サンプル

補足： 上のコードは、array1がarray2よりも長い場合にエラーになります。array1とarray2の長さ（要素数）が違うことがあり得る場合は、array3 の長さはどちらに合わせるのか？ という要件と、その要件に対応したコード追加が必要です。

Comments

[latte217]

ものすごい迅速な回答ありがとうございます。
今回のテーマは、配列の要素数は同じということが原則なので、一度トライしてみます！

[退会済みユーザー]

おおきに〜

もう一つ、補足しておきます。
array3 の何番目かの要素を作るときに、

・array1 の要素のオブジェクト(obj1とします）が、{ x: 10, y: 20, name: 'hoge' }
・array2 の要素のオブジェクト(obj2とします）が、{ x: 100, y: 200, z: 300 }

であるとすると、obj1とobj2のどちらもプロパティ x と y を持ちます。

これらをマージしたときに、array3の要素となる、マージしてできるオブジェクトの x, y プロパティには、

・obj1 の値を残すのか？obj2 の値を残すのか？

という検討事項があります。実装としては、スプレッド構文による展開では、より後ろで展開された値で上書きされるので、回答に書いたコード

const array3 = array1.map((obj1, i) => ({ ...obj1, ...array2[i] }));

でいえば、 obj2 の値で上書きされることになります。逆に obj1 の値ほうで上書きしたいのであれば、スプレッドの順序を入れ換えて

{ ...array2[i], ...obj1 }

とすればよいです。

より面倒になってくるのは、さきほどの例でいえば、

・xプロパティはobj1 の値が残るようにし、yプロパティはobj2 の値が残るようにする。

といった要件になる場合です。こうなるとちょっと込み入ったコードを追加しないといけませんね。

さらに発展させれば、

・obj1およびobj2が持ち得る各プロパティについて、（マージのときにそのプロパティをbj1とobj2の両方が持っていた場合に、）obj1 の値が残るようにするのかobj2の値が残るようにするのか、をマージ動作のパラメータとして指定できて変えられるようにする。

という要件に応えられるようにする、という拡張が考えられます。

このように、少しずつ機能拡張していき、都度都度、Gitなどにコミットしていけば、追加した機能とコードを振り返ることができ、理解が進みます。

[latte217]

suwmn50799様
　ご丁寧な追加情報、およびポイントを教ええていただきありがとうございます！
　あれから、改めてMDNを読んだりテストしたりいたしました。
　なるほど、おっしゃる意味が分かりました。
　やればやるほど勉強する「深さ」も変わってきて、どこまでも勉強・・・という感じですね。
　また、つまづいた際にはご指導お願いいたします！