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

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

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

  • Array.forEachメソッド
  • Array.concatメソッド
  • $.mergeメソッド(jQueryの場合)

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

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

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

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

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

 

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

 

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

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

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

方法3. $.mergeメソッドで配列をつなげる(jQueryの場合)

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

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

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

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

 

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

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

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

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

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

 

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

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

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

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

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

 

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

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

ここまでのまとめ

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

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

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

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

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください