JavaScriptの配列(Array) concatメソッドの使い方

プログラミング

この記事では、JavaScriptのArray.concat()について記載します。
概要、実際のサンプルコードを交えて構文などの使い方をまとめてみました。

JavaScriptの配列(Array)とは?


JavaScriptの配列は、異なる要素を格納するために使用される単一の変数です。
要素のリストを格納し、単一の変数でアクセスしたい場合によく使用されています。
配列が複数の変数への参照である他の多くのプログラミング言語とは異なり、JavaScriptでは、配列は複数の要素を格納する単一の変数です。

小難しい説明になりますが、JavaScriptでの配列処理は非常に多くの処理が出来るということです。そして、JavaScriptを使ってコード、システムを作っていくうえで配列処理の基本動作、JSが持っている関数を理解しておくことは非常に重要だと個人に考えています。

開発の現場でも配列処理を正しくそして深く理解していることが求められます。

JSの配列処理はES5,ES6などでアップデートが行われており、本来なら簡潔なコードで記載できるにもかかわらず、冗長なコードで記載してしまったがゆえにバグを発生してしまったり、予期せぬ動作を配列処理が起こしてしまうといったことが起こっていたりもします。

配列処理は頻繁に使用し、そして、もっともバグを生みやすい部分だとも思っているので個人的にJavaScriptで一番重要だと筆者は考えています。

次に本題の説明に移ります。

JavaScriptのArray.concat()概要

Array.concat()は、複数の配列を1つの配列に結合するメソッドです。

構文、使い方

構文:array.concat(value1[, value2[, …[, valueN]]])

使い方:Array.concat()は、配列を結合して新しい配列を作成します。

引数として渡された値を配列に追加します。

引数について

Array.concat()の引数は、結合したい配列を指定します。

返り値について

Array.concat()は、2つ以上の配列を結合した新しい配列を返します。

このメソッドを利用した便利なテクニック

Array.concat()を使うと、2つ以上の配列を結合して1つの配列にすることができます。例えば、2つの配列を結合して新しい配列を作成したい場合、次のようにします。

使用する上での注意点

– 第一引数に指定した配列は変更されない。
– 結合した配列の要素が重複している場合、重複した要素はそのまま残る。

JavaScriptのArray.concat()と似た処理のJSメソッド、違い

push()メソッドと似ていますが、下記違いがあります。

Array.prototype.push():配列に要素を追加する。
Array.concat():2つ以上の配列を結合する。

Array.concat()を使ったサンプルコード1

 

結果: [1, 2, 3, 4, 5, 6]

Array.concat()を使ったサンプルコード2

 

結果: [“”A””, “”B””, “”C””, “”D””, “”E””, “”F””]

Array.concat()を使ったサンプルコード3

 

結果: [true, false, 1, 2, 3]

JavaScriptの他のArrayメソッドについて

JavaScriptの配列のメソッドについては、下記記事にもまとめていますので参考にしてみてください

メソッド名 機能 リンク
Array.concat() 既存の配列に新しい配列または値を連結するための関数 JavaScriptの配列(Array)のconcatメソッドの使い方
Array.constructor
配列オブジェクトに定義されているプロパティ JavaScriptの配列(Array)のconstructorプロパティの使い方
Array.copyWithin()
配列内の要素を、同じ配列内の別の位置にコピーする関数 JavaScriptの配列(Array)のcopyWithinメソッドの使い方
Array.entries() 配列内の要素に対応するインデックスと要素のペアを含む新しいイテレータオブジェクトを生成する関数 JavaScriptの配列(Array)のentriesメソッドの使い方
Array.every() 配列内のすべての要素がテスト関数を満たすかどうかを判定する関数 JavaScriptの配列(Array)のeveryメソッドの使い方
Array.fill() 配列内の全てまたは一部の要素を指定の値で埋める関数 JavaScriptの配列(Array)のfillメソッドの使い方
Array.filter() 配列内の要素をテスト関数に基づいてフィルタリングする関数 JavaScriptの配列(Array)のfilterメソッドの使い方
Array.find() 配列内の要素から最初にテスト関数を満たす要素を検索する関数 JavaScriptの配列(Array)のfindメソッドの使い方
Array.findIndex() 配列内の要素から最初にテスト関数を満たす要素のインデックスを検索する関数 JavaScriptの配列(Array)のfindIndexメソッドの使い方
Array.forEach() 配列内のすべての要素に対して処理を実行する関数 JavaScriptの配列(Array)のforEachメソッドの使い方
Array.from() 配列風オブジェクトや反復可能なオブジェクトから新しい配列を生成する関数 JavaScriptの配列(Array)のfromメソッドの使い方
Array.includes() 配列内に特定の要素が含まれているかどうかを判定する関数 JavaScriptの配列(Array)のincludesメソッドの使い方
Array.indexOf() 配列内の指定された要素の最初のインデックスを検索する関数 JavaScriptの配列(Array)のindexOfメソッドの使い方
Array.isArray() 指定されたオブジェクトが配列であるかどうかを判定する関数 JavaScriptの配列(Array)のisArrayメソッドの使い方
Array.join() 配列内の要素を文字列に連結する関数 JavaScriptの配列(Array)のjoinメソッドの使い方
Array.keys() 配列内の要素に対応するインデックスを含む新しいイテレータオブジェクトを生成する関数 JavaScriptの配列(Array)のkeysメソッドの使い方
Array.lastIndexOf()
配列内の指定された要素の最後のインデックスを検索する関数 JavaScriptの配列(Array)のlastIndexOfメソッドの使い方
Array.length 配列内の要素数を表すプロパティ JavaScriptの配列(Array)のlengthプロパティの使い方
Array.map() 配列内のすべての要素に対して関数を適用し、結果を含む新しい配列を生成する関数 JavaScriptの配列(Array)のmapメソッドの使い方
Array.pop() 配列内の最後の要素を取り除き、その要素を返す関数 JavaScriptの配列(Array)のpopメソッドの使い方
Array.prototype 配列オブジェクトのプロトタイプオブジェクト JavaScriptの配列(Array)のprototypeプロパティの使い方
Array.push() 配列内の最後に要素を追加する関数 JavaScriptの配列(Array)のpushメソッドの使い方
Array.reduce() 配列内の要素をシンプルな値(通常は数値)に結合する関数 JavaScriptの配列(Array)のreduceメソッドの使い方
Array.reduceRight()
配列内の要素を右から左に向かって結合する関数 JavaScriptの配列(Array)のreduceRightメソッドの使い方
Array.reverse() 配列内の要素の順番を反転する関数 JavaScriptの配列(Array)のreverseメソッドの使い方
Array.shift() 配列内の最初の要素を取り除き、その要素を返す関数 JavaScriptの配列(Array)のshiftメソッドの使い方
Array.slice() 配列内の一部を切り出して、新しい配列として返す関数 JavaScriptの配列(Array)のsliceメソッドの使い方
Array.some() 配列内の要素のいずれかが特定の条件を満たすかどうかをテストする関数 JavaScriptの配列(Array)のsomeメソッドの使い方
Array.sort() 配列内の要素をソートする関数 JavaScriptの配列(Array)のsortメソッドの使い方
Array.toString() 配列を文字列に変換する関数 JavaScriptの配列(Array)のtoStringメソッドの使い方
Array.unshift() 配列内の最初に要素を追加する関数 JavaScriptの配列(Array)のunshiftメソッドの使い方
Array.valueOf() 配列のプリミティブ値を返却 JavaScriptの配列(Array)のvalueOfメソッドの使い方

また、JavaScriptの公式ドキュメントであるMDNで記載されているconcatメソッドについても補足としてリンクを貼っておきます。参考にしてみてください。

Array.prototype.concat() - JavaScript | MDN
concat() は Array インスタンスのメソッドで、2 つ以上の配列を結合するために使用します。 このメソッドは既存の配列を変更せず、新しい配列を返します。
タイトルとURLをコピーしました