JavaScriptで配列を連結するのに使える３つのメソッドと使用例

JavaScriptで配列同士をつなげたい場合、

次の３つのメソッドが使えます。

Array.forEachメソッド
Array.concatメソッド
$.mergeメソッド（jQueryの場合）

ここではこの３つを使って配列を連結する方法とコード例をまとめてみました。

個人的にはconcatメソッドを使うのがシンプルで分かりやすいと思います。

このページの目次

方法１. forEachメソッドで配列をつなげる
方法２. concatメソッドで配列をつなげる
方法３. $.mergeメソッドで配列をつなげる（jQueryの場合）
ここまでのまとめ

方法１. forEachメソッドで配列をつなげる

forEachメソッドは配列の値を順に取り出すのによく使われるメソッド

このメソッドを使うことである配列に別の配列の値を１つずつ追加していくことができます。

例えば次が配列同士（ array1 と array2 ）を結合させているJSコード例

var array1 = ['A', 'B', 'C'];
var array2 = ['D', 'E', 'F'];

var result = Array.from(array1);
array2.forEach(function(value, index){
  result.push(value);
});
console.log(result);

var array1 = ['A', 'B', 'C'];

var array2 = ['D', 'E', 'F'];

var result = Array.from(array1);

array2.forEach(function(value, index){

result.push(value);

});

console.log(result);

まず result = Array.from(array1) で array1 の配列をコピーしたものを代入、
そのあとforEachメソッドを使い array2 の値を１つずつ result に代入

という流れになっています。

ちなみにコンソールに表示される result の内容は次の通り

["A", "B", "C", "D", "E", "F"]

1	["A", "B", "C", "D", "E", "F"]

ちゃんと２つの配列同士がつながっているのが分かります。

この方法はあまりスマートではないかもしれません。

ですが１つずつ値に特別な処理をしたい場合などは役立つかも

以上がforEachメソッドを使った配列同士のつなげ方です。

方法２. concatメソッドで配列をつなげる

concatは文字通り配列をつなげるためのメソッド

ただ単純に配列同士を連結させるならこちらを使うのが一番手っ取り早いです。

例えば次は配列同士をconcatメソッドで連結させているコード例

var array1 = ['A', 'B', 'C'];
var array2 = ['D', 'E', 'F'];

var result = array1.concat(array2);
console.log(result);

var array1 = ['A', 'B', 'C'];

var array2 = ['D', 'E', 'F'];

var result = array1.concat(array2);

console.log(result);

上コードの array1.concat(array2) のように連結元に対して連結させたい配列を渡して使います。

ちなみにコンソールに表示される result の内容は次の通り

["A", "B", "C", "D", "E", "F"]

1	["A", "B", "C", "D", "E", "F"]

連結元の配列 ['A', 'B', 'C'] のあとに ['D', 'E', 'F'] が連結されているのが分かります。

ちなみに連結元の配列 array1 はconcatメソッドによる影響を一切受けません。

以上がconcatメソッドを使って配列をつなげる方法

コード量も少なくて済むうえ、何をしているか理解しやすいのがメリットです。

基本的にはこちらのメソッドを使って連結するのがポピュラーだと思います。

方法３. $.mergeメソッドで配列をつなげる（jQueryの場合）

最後はmergeメソッドを使って配列をつなげる方法

これはjQueryで配列をつなげるために用意されているメソッドです。

使い方は１つめの配列を frist 、２つめの配列を second とすると次のように連結可能

var result = $.merge(first, second);

1	var result = $.merge(first, second);

返り値として連結後の配列を返します。

例えば次は２つの配列同士をmergeメソッドでつなげているコード例

var array1 = ['A', 'B', 'C'];
var array2 = ['D', 'E', 'F'];

var result = $.merge(array1, array2);
console.log(result);

var array1 = ['A', 'B', 'C'];

var array2 = ['D', 'E', 'F'];

var result = $.merge(array1, array2);

console.log(result);

コードを見れば何をしているかについての説明は不要だと思います。

そしてコンソールに表示される result の内容は次の通り

["A", "B", "C", "D", "E", "F"]

1	["A", "B", "C", "D", "E", "F"]

上２つの方法と同様にちゃんと２つの配列同士が結合されています。

しかもconcatメソッドと同じく短いコードで連結処理が書けるのが利点ですね。

ただしこのmergeメソッドを使うときは少し注意が必要です。

それは１つめの引数に渡した配列が連結後の配列に変更されてしまうということ

なので元の配列に影響を与えたくないなら次のようなコードを書くのが安全です。

var array1 = ['A', 'B', 'C'];
var array2 = ['D', 'E', 'F'];

var newArray1 = Array.from(array1);
var result = $.merge(newArray1, array2);
console.log(result);
console.log(array1);

var array1 = ['A', 'B', 'C'];

var array2 = ['D', 'E', 'F'];

var newArray1 = Array.from(array1);

var result = $.merge(newArray1, array2);

console.log(result);

console.log(array1);

上コードでは Array.from(array1) により array1 の配列を newArray1 にコピーしています。

こうしておけば array1 にはmergeメソッドの影響が及びません。

以上がmergeメソッドを使った配列の連結方法

jQuery限定の方法でなおかつ元配列にも影響を与えるので使う場面は少ないと思います。

ここまでのまとめ

ということで配列同士をつなげるメソッドまとめ

Array.forEachメソッド
ある配列に別の配列の値を１つずつ追加していくことが可能
Array.concatメソッド
ある配列に別の配列を一気に追加することが可能
基本的にはこちらを使って配列をつなげるのが分かりやすくて楽
$.mergeメソッド（jQueryの場合）
ある配列に別の配列を一気に追加することが可能
ただしjQueryメソッドで破壊的な動作をするので使用に注意が必要

基本的にはconcatメソッドを使うのがほとんどだと思います。

以上JavaScriptで配列をつなげるメソッドについてでした。

JavaScriptで配列を連結するのに使える３つのメソッドと使用例

方法１. forEachメソッドで配列をつなげる

方法２. concatメソッドで配列をつなげる

方法３. $.mergeメソッドで配列をつなげる（jQueryの場合）

ここまでのまとめ

関連記事

プロフィール

人気記事

検索してみる