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

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

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

 

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

 

 

配列の結合とは

配列と配列をくっつけて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サービス公開を習得できるオンラインブートキャンプを開催しています。

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