JavaScript

レシピ

配列

複数の配列を連結する

複数の配列を1つの配列に統合する方法について解説します。

この記事のポイント

  • concatメソッドは2つ以上の配列を1つにまとめる
  • 配列の要素の並びは先頭順になる
  • オブジェクト(擬似的な連想配列)はconcatメソッドではなくfor...in文で連結する

目次

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

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

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

コード例

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

var zoo = animals1.concat(animals2);

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

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

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

コード例

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

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

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

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

コード例

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

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

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

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

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

コード例

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

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

var 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メソッドは元の配列には影響を与えないため、変数animals1animals2の配列はそのまま保持されます。

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

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

コード例

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

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

var zoo = animals1.concat(animals2);

console.log(zoo);
// []

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

コード例

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

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

var zoo = new Array();

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

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

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

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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