icon
icon

JavaScriptで配列を結合する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで配列を結合する方法について解説しています。ここではconcatを使った方法、pushを使った方法、Object.assignを使った方法を説明します。それぞれの結合の形と使い分けを学びましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

JavaScriptで配列を結合する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

配列を結合する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

配列の結合とは

配列と配列をくっつけて1つの配列にするということです。

例えば、「1、2、3」の3つの数字が入っている配列と、「4、5、6」の3つの数字が入っている配列をくっつけて
「1、2、3、4、5、6」という配列にするということです。

 

concatを使って結合する方法

まずはJavaScriptに標準で入っているconcatというメソッドを使って結合してみます。

MDNのconcatのリファレンスはこちら

let array1 = [1,2,3];
let array2 = [4,5,6];

let array3 = array1.concat(array2);

解説

  1. array1という配列にarray2という配列をくっつけてarray3という新しい配列に格納しています
  2. aray1とarray2の配列には変化はありません
  3. array3の中身は[1,2,3,4,5,6]となっています

 

[PR] コーディングで副業する方法とは

pushを使って結合する方法

pushは配列の最後に要素を追加するメソッドです。これを使って配列の要素を1つずつ追加していくことでも結合ができます。concatと違いすでにある配列に追加するので新しい配列は作成されません。

すべてを追加する場合は、わざわざ1つずつ追加することは手間に感じます。しかしある値だけは除きたい場合などにこのような結合をするかもしれません。

MDNのpushのリファレンスはこちら

let array1 = [1,2,3];
let array2 = [4,5,6];

for(let i = 0; i < array2.length; i++){
  if(array2[i] !== 5){
    array1.push(array2[i]);
  } 
}

解説

  1. array1という配列にarray2という配列をくっつけています
  2. その際に値が5だけは追加しないようにしています
  3. 処理が終わると、array1の中身は[1,2,3,4,6]となっています。

 

Object.assignを使って結合する方法

JavaScriptのObjectのメソッドであるassignも結合するメソッドです。違いとしては、assignはキーと値がセットになっているようなオブジェクトを結合するものであることです。

また同じキーは上書きされることに注意が必要です。

MDNのassignのリファレンスはこちら

let status1 = {'名前':'鈴木','年齢':16, };
let status2 = {'特技':'サッカー','年齢':20};

Object.assign(status1, status2);
console.log(status1);
console.log(status2);

解説

  1. status1とstatus2という2つのオブジェクトをObject.assignで結合しています
  2. 実行後、status1は「{名前: “鈴木”, 年齢: 20, 特技: “サッカー”}」となりキーが重複している年齢が上書きされています
  3. status2には変更はありません

 

監修してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。