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講座の内容をもとにしています。
![](https://techacademy-magazine-cdn.techacademy.jp/magazine/wp-content/uploads/2018/02/20163020-2-400x400-e1517449291396.png)
今回は、JavaScriptに関する内容だね!
![](https://techacademy-magazine-cdn.techacademy.jp/magazine/wp-content/uploads/2018/02/20160620-400x400-e1517449269611.png)
どういう内容でしょうか?
![](https://techacademy-magazine-cdn.techacademy.jp/magazine/wp-content/uploads/2018/02/20163020-2-400x400-e1517449291396.png)
配列を結合する方法について詳しく説明していくね!
![](https://techacademy-magazine-cdn.techacademy.jp/magazine/wp-content/uploads/2018/02/20160620-400x400-e1517449269611.png)
お願いします!
配列の結合とは
配列と配列をくっつけて1つの配列にするということです。
例えば、「1、2、3」の3つの数字が入っている配列と、「4、5、6」の3つの数字が入っている配列をくっつけて
「1、2、3、4、5、6」という配列にするということです。
concatを使って結合する方法
まずはJavaScriptに標準で入っているconcatというメソッドを使って結合してみます。
let array1 = [1,2,3]; let array2 = [4,5,6]; let array3 = array1.concat(array2);
解説
- array1という配列にarray2という配列をくっつけてarray3という新しい配列に格納しています
- aray1とarray2の配列には変化はありません
- array3の中身は[1,2,3,4,5,6]となっています
pushを使って結合する方法
pushは配列の最後に要素を追加するメソッドです。これを使って配列の要素を1つずつ追加していくことでも結合ができます。concatと違いすでにある配列に追加するので新しい配列は作成されません。
すべてを追加する場合は、わざわざ1つずつ追加することは手間に感じます。しかしある値だけは除きたい場合などにこのような結合をするかもしれません。
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]); } }
解説
- array1という配列にarray2という配列をくっつけています
- その際に値が5だけは追加しないようにしています
- 処理が終わると、array1の中身は[1,2,3,4,6]となっています。
Object.assignを使って結合する方法
JavaScriptのObjectのメソッドであるassignも結合するメソッドです。違いとしては、assignはキーと値がセットになっているようなオブジェクトを結合するものであることです。
また同じキーは上書きされることに注意が必要です。
let status1 = {'名前':'鈴木','年齢':16, }; let status2 = {'特技':'サッカー','年齢':20}; Object.assign(status1, status2); console.log(status1); console.log(status2);
解説
- status1とstatus2という2つのオブジェクトをObject.assignで結合しています
- 実行後、status1は「{名前: “鈴木”, 年齢: 20, 特技: “サッカー”}」となりキーが重複している年齢が上書きされています
- status2には変更はありません
監修してくれたメンター
横山茂雄(よこやましげお)
フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。 |
![](https://techacademy-magazine-cdn.techacademy.jp/magazine/wp-content/uploads/2018/02/20160620-400x400-e1517449269611.png)
内容分かりやすくて良かったです!
![](https://techacademy-magazine-cdn.techacademy.jp/magazine/wp-content/uploads/2018/02/20163020-2-400x400-e1517449291396.png)
ゆかりちゃんも分からないことがあったら質問してね!
![](https://techacademy-magazine-cdn.techacademy.jp/magazine/wp-content/uploads/2018/02/20160620-400x400-e1517449269611.png)
分かりました。ありがとうございます!
TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。