複数の配列をマージ（結合）する方法

JavaScriptで複数の配列データを1つの配列にまとめたいことがあったので調べたら、意外と色々な方法があったのでメモとして残しておきます。

concat()やスプレッド構文（...）を使うと元の配列はそのままに、マージした新しい配列を取得できます。

var array1 = ["1", "2", "3"];
var array2 = ["3", "4"];

var array12a = array1.concat(array2);
var array12b = [...array1, ...array2];

array12a[0] = "aaa";
array12b[1] = "bbb";

console.log(array1);      // ["1", "2", "3"]
console.log(array2);      // ["3", "4"]

console.log(array12a);    // ["aaa", "2", "3", "3", "4"]
console.log(array12b);    // ["1", "bbb", "3", "3", "4"]

格納されている値が文字列（または数値）の場合で、同じ文字列を除外したい時は、Setオブジェクトを使うと一意の値になります。

var array1 = ["1", "2", "3"];
var array2 = ["3", "4"];

var array12c = [...new Set([...array1, ...array2])];

console.log(array12c);    // ["1", "2", "3", "4"]

配列に格納されているデータがオブジェクトの場合、Setオブジェクトでは一意になりませんが、reduce()を使って重複するデータを除外することが可能です。

var array3 = [
  {id: 1, name: "a"}, 
  {id: 2, name: "b"}, 
  {id: 3, name: "c1"}
];
var array4 = [
  {id: 3, name: "c2"}, 
  {id: 4, name: "d"}
];

var array34a = array3.concat(array4);
var array34b = [...array3, ...array4];
var array34c = [...new Set([...array3, ...array4])];
var array34d = [...array3, ...array4].reduce((a, v, i) => {
  a[v.id] = v;
  return a;
}, {});
var array34e = Object.values(array34d);

array34e[3].name = "eee";

console.log(array3);    // [{"id":1,"name":"a"},{"id":2,"name":"b"},{"id":3,"name":"c1"}]
console.log(array4);    // [{"id":3,"name":"c2"},{"id":4,"name":"eee"}]

console.log(array34a);  // [{"id":1,"name":"a"},{"id":2,"name":"b"},{"id":3,"name":"c1"},{"id":3,"name":"c2"},{"id":4,"name":"eee"}]
console.log(array34b);  // [{"id":1,"name":"a"},{"id":2,"name":"b"},{"id":3,"name":"c1"},{"id":3,"name":"c2"},{"id":4,"name":"eee"}]
console.log(array34c);  // [{"id":1,"name":"a"},{"id":2,"name":"b"},{"id":3,"name":"c1"},{"id":3,"name":"c2"},{"id":4,"name":"eee"}]
console.log(array34d);  // {"1":{"id":1,"name":"a"},"2":{"id":2,"name":"b"},"3":{"id":3,"name":"c2"},"4":{"id":4,"name":"eee"}}
console.log(array34e);  // [{"id":1,"name":"a"},{"id":2,"name":"b"},{"id":3,"name":"c2"},{"id":4,"name":"eee"}]

reduce()を使った方法ではkeyにidをセットして重複したデータを除外しているため、最終的にObject.values()で値のみを取り出しています。

今回のマージ方法ではオブジェクトの値をコピーして新しく生成しているわけではないので、マージ後の配列から値を書き換えると、元の配列のオブジェクトの値も書き換わります。

• 【JavaScript】スプレッド構文の便利な使い方まとめ - Qiita
• JavaScript - 配列をマージしつつ、重複を取り除く方法｜teratail