JavaScriptで配列のマージ方法をサンプルコード付き解説!

JavaScriptで配列のマージ方法をサンプルコード付き解説します。JavaScriptで配列をマージしたいというときはよくあると思います。ここではその方法を3つそれぞれ項目を分けて解説します。

コンテンツ [表示]

  1. 1JavaScriptで配列をマージしたい
  2. 2JavaScriptで配列をマージする方法
  3. 2.1Object.assignを使った方法
  4. 2.2pushを使った方法
  5. 2.3concatを使った方法
  6. 3まとめ

JavaScriptで配列をマージしたい

JavaScriptで2つの配列をマージして1つにしたいというケースを考えます。

JavaScriptでは配列のマージ方法はいくつかありますが、ここではその方法を3つ、それぞれ項目を分けてサンプルコード付きで解説します。

Photo byPexels

JavaScriptで配列をマージする方法

それではJavaScriptで配列を結合する方法を3つそれぞれ項目を分けて解説します。

Object.assignを使った方法

Object.assignを使うと配列を結合することができるのですが、1つ注意点があります。

それはキー番号が重複する部分は第二引数の配列の値で上書きされてしまうということです。

実際にサンプルコードで挙動を確認してみましょう。

このように2つの配列が結合はされているが、連結されずキー番号が重複する部分は第二引数の配列の値で上書きされてしまっていることが分かります。

pushを使った方法

pushメソッドを用いると配列を結合することができます。

ただしうまく結合させるためには、結合する側の配列をforEachメソッドで展開させる必要があります。

このように連結させる側の配列をforEachメソッドで展開することで、pushメソッドを用いてうまく結合させることができます。

concatを使った方法

こちらのconcatを使った方法が一番簡単なのでオススメです。

このように新しい変数にconcatメソッドを用いて、配列を連結したものを格納することで使うことができます。

まとめ

いかがでしたでしょうか?

配列を結合する方法はここで紹介した3つの方法が主になります。

個人的に一番簡単に配列を結合することができるconcatメソッドを用いた方法をオススメします。

ぜひここで紹介した方法を用いて試してみてください。

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

西村卓也
ライター

西村卓也

HTML/CSS/JSに関する記事を執筆しています。よろしくお願いします。