【JavaScript】concatの使い方を実例で解説|配列の結合や要素を追加する方法(非破壊)

javascript-prograshi(プロぐらし)-kv JavaScript
記事内に広告が含まれていることがあります。

concatとは何か?

JavaScirptのconcatメソッドを使うと、対象となる元の配列はそのままで、指定した要素を追加した新たな配列を作成することができます。

配列と配列を結合して、一つの新しい配列を作る場合に使うことができます。


concatメソッドの使い方

基本形

concatメソッドは元となる配列に対して、追加したい要素を引数で渡します。

let 変数 = 配列.concat( 追加する要素 )


実例:配列同士を結合する

配列に対して、concatで配列を渡すと、2つを結合した1つの配列を返します。

a = [1,2,3]
b = [4,5,6]

res = a.concat(b)

console.log(res)
//[1, 2, 3, 4, 5, 6]

なお、このとき元の配列「a」と「b」の中身は変わっていません。


実例:配列に要素を追加する

配列に対して、数値や文字列などを渡すと、指定した要素を末尾に追加した配列を作成します。

a = [1,2,3]
b = "aaa"

res = a.concat(b)

console.log(res)
// [1, 2, 3, 'aaa']

なお、このとき元の配列「a」と「b」の中身は変わっていません。


注意点

文字列にconcatすると、文字列が返る

res = "a".concat(5)

console.log(res)
//'a5'
a = [1,2,3]
b = "aaa"

res = b.concat(a)
// 'aaa1,2,3'

数値にconcatすると、エラーになる

a = [1,2,3]

res = 5.concat(a)

//エラー
Uncaught SyntaxError: Invalid or unexpected token



複数の要素をまとめて結合する

concatは引数を複数指定することができます。

その場合、指定した要素が全て対象の配列に結合されます。

書き方

concatメソッドは元となる配列に対して、追加したい要素を引数で渡します。

let 変数 = 配列.concat( 追加する要素1, 追加する要素2,,,,,  )


実例

concatの引数に複数の要素を渡すと、全て結合します。

a = [1,2,3]
b = 4
c = "aaa"
d = ["bbb", "ccc"]


res = a.concat(b, c, d)

console.log(res)
//[1, 2, 3, 4, 'aaa', 'bbb', 'ccc']


ネストした配列の結合

concatはネスト(入れ子)になった配列も結合することができます。

結合するときに外すのは一番外側の[ ] のみで、中の要素としての[ ]はそのまま残ります。

実例

a = [1,[2,3]]
b = [4,[5,6],7]

res = a.concat(b)

console.log(res)
//[1,[2,3],4,[5,6],7]


スプレッド構文による非破壊の結合

配列同士を非破壊で結合する方法はconcat以外にもスプレッド構文も使えます。

a = [1,2,3]
b = [4,5,6]

res = [...a, ...b]

console.log(res)
////[1, 2, 3, 4, 5, 6]

スプレッド構文を使えば要素を追加することもできます。

a = [1,2,3]
b = 4

res = [...a, b]

console.log(res)
////[1, 2, 3, 4]

まとめて要素を追加することもできます。

a = [1,2,3]
b = 4
c = ["aaa", "bbb"]
d = [5, [6, 7], 8]

res = [...a, b, ...c, ...d]

console.log(res)
// [1, 2, 3, 4, 'aaa', 'bbb', 5, [6, 7], 8]
合わせて読みたい

スプレッド構文の詳しい使い方や実例については下記をご参考ください。

【JavaScript】ドット3つ「…」とは何か?スプレッド構文の使い方を実例で解説



参考

concatでは指定した配列の末尾に要素を追加します。

そうではなく、配列の指定したところに要素を追加したい場合は以下をご参考ください。


MDN公式 Array.prototype.concat()

タイトルとURLをコピーしました