配列と配列を結合する

Array オブジェクトの concat メソッドを使用すると配列に別の配列を結合することができます。ここでは JavaScript で配列に別の配列を結合する方法について解説します。

(Last modified: 2023年02月03日)

concatメソッドを使った配列の結合

Array オブジェクトの concat メソッドを使うと配列に対して別の配列を結合した新しい配列を取得することができます。書式は次の通りです。

配列名.concat(配列)
配列名.concat(配列, 配列, ...)
配列名.concat(値, 値, ...)

配列の最後に引数に指定した配列を結合した新しい配列を返します。引数は省略可能で結合する配列または値を指定し、複数の配列を結合する場合はカンマ(,)のあとに続けて記載してください。

次のサンプルをみてください。

let fruit = ['Apple', 'Melon', 'Orange'];
let fruitAll = fruit.concat(['Peach', 'Grapes']);

console.log(fruit);
>> ["Apple", "Melon", "Orange"]

console.log(fruitAll);
>> ["Apple", "Melon", "Orange", "Peach", "Grapes"]

元の配列に引数に指定した配列を結合した新しい配列を取得しました。 concat メソッドを実行しても元の配列は何も変わりません。

なお concat メソッドの引数には配列だけでなく値を指定することもできます。次のサンプルを見てください。

let fruit = ['Apple', 'Melon', 'Orange'];
let fruitAll = fruit.concat('Peach', ['Grapes', 'Strawberry']);

console.log(fruitAll);
>> ["Apple", "Melon", "Orange", "Peach", "Grapes", "Strawberry"]

引数に値を指定した場合は、元の配列に新しい要素として追加されます。

concatメソッドを使った配列のコピー

concat メソッドの引数を省略した場合は元の配列を複製したものを戻り値として返します。

次のサンプルをみてください。

let fruit = ['Apple', 'Melon', 'Orange'];
let copyFruit = fruit.concat();

console.log(fruit);
>> ["Apple", "Melon", "Orange"]

console.log(copyFruit);
>> ["Apple", "Melon", "Orange"]

複製された配列は元の配列は別の配列オブジェクトとなります。その為、複製した配列に変更を加えても元の配列には影響しません(逆も同じです)。

let fruit = ['Apple', 'Melon', 'Orange'];
let copyFruit = fruit.concat();

copyFruit[1] = 'Grapes';
console.log(copyFruit);
>> ["Apple", "Grapes", "Orange"]

console.log(fruit);
>> ["Apple", "Melon", "Orange"]

ただし concata メソッドが複製するのは 1 次元の要素までです。元の配列の要素の値として配列が格納されていた場合、その要素が参照する配列は複製された配列の要素も同じ配列を参照します。

次のサンプルをみてください。

let result = [[78, 92], [68,76]];
let copyResult = result.concat();

copyResult[0][1] = 84;
console.log(copyResult[0]);
>> [78, 84]

console.log(result[0]);
>> [78, 84]

concat メソッドを使って配列を複製しましたが、元の配列の要素は別の配列を参照しており、これは複製した配列の要素も同じ配列を参照します。その為、どちらかの配列で要素が参照している配列に対して変更を加えると、同じ配列をもう片方の配列の要素にも影響します。

※ 配列をコピーするには slice メソッドでも行うことができます。詳しくは「配列の指定した範囲の要素をコピーして新しい配列を作成する」を参照されてください。

-- --

JavaScript で配列に別の配列を結合する方法について解説しました。

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。