【JavaScript】concat()で複数の配列や文字列を1つに結合する!

(この記事は2022年9月30日に投稿されました。)

JavaScriptで複数の配列や文字列を結合する方法として、concat()があります。

concat()とは指定したオブジェクト同士を1つのオブジェクトに連結するメソッドになります。

1つのオブジェクトに連結することから、concat()は「連結した1つのオブジェクト」を返り値として返すようになります。

そして、パラメータを追加して指定することで、一度にたくさんの配列を結合することができます。

また、1次元配列だけでなく2次元や3次元のような多次元配列にも使用することができたり、文字列を結合する場合にも使用することができたりもします。

メソッドを使用するだけで、配列や文字列同士を結合することができるので、もし2つ以上の配列や文字列を1つにしたい場合はconcat()を使用していきましょう。

今回はJavaScriptのconcat()で複数の配列や文字列を1つに結合する方法について紹介していきます。

この記事はこんな方におすすめ
・複数の配列を1つに連結したい場合
・複数の文字列を1つに連結したい場合




concat()とは

concat()とは、対象のオブジェクトと指定したオブジェクトを1つに結合するメソッドになります。

削除する要素は指定できませんが、指定した配列の先頭にある要素を削除するようになります。

concat()の書き方

concat()の書き方は下記のようになります。

concat()のパラメータ

concat()のパラメータは下記のようになります。

  1. 結合する配列(必須):
    「対象の配列」と結合するための「配列」を指定する
  2. 結合する配列n(任意):
    「対象の配列」や「結合する配列」と結合するための「配列」を指定する

concat()は必須なパラメータとして「連結する配列」を指定します。

また、任意なパラメータとして「連結する配列n」を指定します。

concat()の返り値

concat()の返り値は「複数の配列が結合された1つの配列」となります。

concat()で複数の配列を1つに結合するサンプルコード

concat()で複数の配列を1つに結合するサンプルコードをご紹介します。

ここでは、下記の2つのパターンでconcat()を使用してみます。

  1. 結合する配列に要素が存在する場合
  2. 結合する配列に要素が存在しない場合

結合する配列に要素が存在する場合

結合する配列に要素が存在する場合に、concat()を使用してみます。

⚫︎ Main.js

実行結果

concat()で要素が存在する配列を指定して1つに結合した結果

concat()によって、対象の配列と指定した配列が結合されて1つの配列に結合されています。

そのため、「緑谷」から「常闇」の7つの要素が格納された配列が表示されています。

結合する配列に要素が存在しない場合

結合する配列に要素が存在しない場合に、concat()を使用してみます。

⚫︎ Main.js

実行結果

concat()で要素が存在しない配列を指定して1つに結合した結果

要素が存在しない配列を指定した場合concat()は、対象の配列のコピーを作成するようになります。

そのため、対象の配列と全く同じの配列が作成されて表示されています。

concat()で3つ以上の配列を1つに結合する場合

concat()で3つ以上の配列を1つに結合する場合は、パラメータである「連結する配列n」を指定します。

「連結する配列n」に「,」つけて再び「連結する配列n」を指定することで、複数の配列を一度に結合することができます。

⚫︎ Main.js

実行結果

concat()で3つ以上の配列を1つに結合した結果

concat()に連結する配列nを追加することで、複数の配列を一度に追加することができます。

そのため、「緑谷」から「八百屋」まで格納された1つの配列が表示されています。

concat()で複数の多次元配列を1つに結合するサンプルコード

concat()で複数の多次元配列を1つに結合するサンプルコードをご紹介します。

2次元配列の場合

concat()を2次元配列に対して使用してみます。

⚫︎ Main.js

実行結果

concat()を2次元配列に対して使用した結果

concat()によって複数の2次元配列が1つに結合されています。

また、配列の後ろにインデックスを指定することで2次元配列内の1次元配列と結合することができます。

3次元配列の場合

concat()を3次元配列に対して使用してみます。

⚫︎ Main.js

実行結果

concat()を3次元配列に対して使用した結果

concat()によって複数の3次元配列が1つに結合されています。

また、配列の後ろにインデックスを指定することで3次元配列内の2次元入れや1次元配列と結合することができます。

concat()で複数の文字列を1つに結合するサンプルコード

concat()で複数の文字列を1つの文字列に結合するサンプルコードについてご紹介します。

⚫︎ Main.js

実行結果

concat()で複数の文字列を1つに結合した結果

concat()によって複数の文字列が1つの文字列に結合されています。

そのため、変数で定義した文字列がそれぞれ繋がってが表示されています。

concat()を実際に使用したケース

concat()を実際に使用したケースについてご紹介します。

別々で受け取った配列のデータを1つの配列にまとめる場合

別々で受け取った配列のデータを1つの配列にまとめる場合にconcat()を使用することができます。

⚫︎ Main.js

実行結果

concat()で別々で受け取った配列のデータを1つの配列にまとめた結果

concat()によって別々で受け取った配列のデータを1つの配列にまとめています。

そのため、「リンゴ」から「マスカット」までの要素が画面に表示されています。

配列のバックアップを取る場合

配列のバックアップを取る場合にもconcat()を使用することができます。

処理を行った配列は、要素が追加されたり削除されたりしているため最終的には原型の状態からかけ離れた配列になります。

しかし、concat()で初期状態の配列をコピーすることで、初期状態の配列のバックアップを取ることができます。

⚫︎ Main.js

実行結果

concat()で配列のバックアップを取った結果

テキストを入力し、追加ボタンを押すことで入力したテキストが配列に格納され、画面に表示されています。

また、concat()によって初期状態の配列のバックアップをとっており、その配列で要素をクリアした配列にコピーしています。

配列に指定した要素を追加する場合

配列に指定した要素を追加する場合は、unshift()やpush()を使用します。

unshift()とは、配列の先頭に指定した要素を追加するメソッドであり、push()とは配列の末尾に指定した要素を追加するメソッドになります。

⚫︎ Main.js

実行結果

unshift()やpush()で配列に指定した要素を追加した結果

nshift()やpush()によって配列の先頭や末尾に指定した要素が追加されています。

そのため、先頭に「トゥワイス」が、末尾に「スピナー」を格納した配列が表示されています。

もし、unshift()やpush()について詳しく知りたい場合は下記の記事をご参考ください。

まとめ

⚫︎ concat()とは、対象のオブジェクトと指定したオブジェクトを1つに結合するメソッドである

⚫︎ concat()は、下記のパラメータを指定する
・結合する配列(必須)
・結合する配列n(任意)

⚫︎ 要素が存在する配列にconcat()を使用すると結合して1つの配列を作成する

⚫︎ 要素が存在しない配列にconcat()を使用するとコピーの配列を作成する

⚫︎ concat()で3つ以上の配列を1つに結合する場合は、パラメータに「連結する配列n」を指定する

⚫︎ concat()は1次元配列だけでなく、多次元配列をも1つに結合することができる

⚫︎ concat()は配列だけでなく、文字列も1つに結合することができる

⚫︎ concat()は、下記のようなケースで実際に使用することができる
・別々で受け取った配列のデータを1つの配列にまとめる場合
・配列のバックアップをとる場合

⚫︎ 配列に指定した要素を追加する場合は、unshift()やpush()を使用する

コメントを残す

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