複数の配列を連結する

2つ以上の配列を1つの配列にする

concatメソッドを使うと、2つ以上の配列を1つの配列にまとめることができます。

以下の例は変数animals1とanimals2にそれぞれ入っている配列を1つにして、変数zooに入れます。

JavaScript コード例

let animals1 = [ 'cat', 'dog', 'mouse'];
let animals2 = ['fox','penguin'];

let zoo = animals1.concat(animals2);

console.log(zoo);
// (5) ["cat", "dog", "mouse", "fox", "penguin"]

変数zooの配列を出力すると、5つの要素を持つ配列になったことがわかります。
なお、concatメソッドは元の配列には影響を与えないため、変数animals1とanimals2の配列はそのまま保持されます。

concatメソッドに複数の配列を渡すことで、3つ以上の配列をまとめることもできます。
以下の例では4つの配列を1つにまとめて変数zooに入れます。

JavaScript コード例

let animals1 = [ 'cat', 'dog', 'mouse'];
let animals2 = ['fox','racoon'];
let animals3 = ['lion', 'rhinos'];
let animals4 = ['dolphin', 'penguin'];

let zoo = animals1.concat(animals2, animals3, animals4);

console.log(zoo);
// (9) ["cat", "dog", "mouse", "fox", "racoon", "lion", "rhinos", "dolphin", "penguin"]

まとめた後の要素の並びは、concatメソッドに指定した配列の順番をそのまま適用します。
以下の例では配列の要素をanimals3、animals2、animals1の順に並べます。

JavaScript コード例

let animals1 = [ 'cat', 'dog', 'mouse'];
let animals2 = ['fox','racoon'];
let animals3 = ['lion', 'rhinos'];

let zoo = animals3.concat(animals2, animals1);

console.log(zoo);
// (7) ["lion", "rhinos", "fox", "racoon", "cat", "dog", "mouse"]

要素にオブジェクトが入った配列を1つにする

配列の要素にオブジェクトが入っている場合についても、concatメソッドで1つの配列にまとめることができます。
以下の例では、オブジェクトが入った配列animalsとlionを1つの配列にして、変数zooに入れます。

JavaScript コード例

let animals = [
{
  name: "cat",
  id: 150001,
  voice: "にゃん"
},
{
  name: "dog",
  id: 150002,
  voice: "ワン"
},
{
  name: "mouse",
  id: 150003,
  voice: "チュウ"
}
];

let lion = {
  name: "lion",
  id: 15004,
  voicde: "ガオ"
};

let zoo = animals.concat(lion);

console.log(zoo);
// 0: {name: "cat", id: 150001, voice: "にゃん"}
// 1: {name: "dog", id: 150002, voice: "ワン"}
// 2: {name: "mouse", id: 150003, voice: "チュウ"}
// 3: {name: "lion", id: 15004, voicde: "ガオ"}

変数zooの配列を出力すると、5つの要素を持つ配列になったことがわかります。
なお、concatメソッドは元の配列には影響を与えないため、変数animals1とanimals2の配列はそのまま保持されます。

2つのオブジェクト（擬似的な連想配列）を1つにまとめる

配列の添字（キー）が数字ではなく文字列を使っている場合は、配列の要素ではなくオブジェクトのプロパティになります。
そのため、配列のconcatメソッドを使って1つにまとめることはできません。

JavaScript コード例

let animals1 = new Array();
animals1["a"] = 'cat';
animals1["b"] = 'dog';
animals1["c"] = 'mouse';

let animals2 = new Array();
animals2["d"] = 'fox';
animals2["e"] = 'lion';
animals2["f"] = 'rhinos';

let zoo = animals1.concat(animals2);

console.log(zoo);
// []

このようなオブジェクトのプロパティを使った擬似的な連想配列を扱う場合、以下のようにfor…in文を使うと配列をまとめることができます。

JavaScript コード例

let animals1 = new Array();
animals1["a"] = 'cat';
animals1["b"] = 'dog';
animals1["c"] = 'mouse';

let animals2 = new Array();
animals2["d"] = 'fox';
animals2["e"] = 'lion';
animals2["f"] = 'rhinos';

let zoo = new Array();

for (let k in animals1) {
  zoo[k] = animals1[k];
}

for (let k in animals2) {
  zoo[k] = animals2[k];
}

console.log(zoo);  
// [a: "cat", b: "dog", c: "mouse", d: "fox", e: "lion", f: "rhinos"]

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。