JavaScriptで配列に配列を追加したい場合
このやり方が分からなくて、ハマることって多いですね。（特にJSに慣れてない場合）
そして間違った方法を試してしまい、
ドツボにハマるということが、過去に何回かありました。
そこで記憶の整理も兼ね、JavaScriptで配列に配列を追加する方法をまとめます。
配列追加には push は使えない！NGなコード例
まず配列の追加でやりがちなミスについて
それが push メソッドを使って連結しようとすること
これはエラーにならないけど、配列同士の結合には絶対に使っちゃダメです！
その理由は push メソッドがどういう動作をするのか、それを知れば分かります。
以下 push メソッドについての説明（リファレンスより引用）
array.push(element1, ..., elementN)
push メソッドは配列の末尾に要素を追加します。
pushはジェネリックメソッドとして用意されています。そのためcall()やapply()と一緒にオブジェクトに対して利用することもできます。なお、pushは配列の末尾から要素を挿入する必要性があるため、lengthプロパティに依存しています。lengthが数値に変換できない場合、0 が用いられます。また、lengthが存在しない場合はlengthも作成されることになります。
長々と書かれてるけど、大事なのが一番最初の所
よくみると「配列に要素を追加」と書かれてるんです。
つまり 配列をこのメソッドに渡すと、丸ごと要素（配列の値）になっちゃう わけです。
例えば次が
push メソッドを使った、
配列を結合しようとしている（つもりの）間違ったコード例
|
1 2 3 4 |
var arr = [ 1, 2, 3 ] var arrSub = [ 4, 5, 6 ]; arr.push(arrSub); console.log(arr); |
意図した動作にならないけど、コード的には正しいからエラーは出ません。
実際、上コードでできる配列を表示してみると、こんな感じです。
|
1 |
[ 1, 2, 3, [ 4, 5, 6 ] ] |
配列の各値ではなく、配列自体が最後に追加されてしまっている・・・
本当は配列同士を連結させたいのに・・・
こういう訳で push メソッドは配列同士の連結に使うのがNG！
配列に配列を追加したいなら、別の方法を使う必要があります。
配列同士を連結する正しいやり方とは...
そのやり方とは concat メソッドを使うこと
これはその名の通り、配列同士を結合（concat）するためのメソッドになります。
ちなみに次が concat メソッドの詳しい説明（引用）
var new_array = old_array.concat([value1[, value2[, ...[, valueN]]]])
concat() メソッドは、配列に他の配列や値をつないでできた新しい配列を返します。
concat は、メソッドを呼び出した this オブジェクトの要素に、与えられた引数の要素 (引数が配列である場合) または引数そのもの (引数が配列でない場合) が順に続く、新しい配列オブジェクトを生成します。
concat は this や引数として与えられた配列を変更しませんが、その代わりに元の配列から結合させた同じ要素のコピーを含むシャローコピー (1 次元の配列要素までの浅いコピー) を返します。
配列と配列をつないで新しいのを返すだけ
ちなみに非破壊的なメソッドなので、
結合したら結合元の配列に代入する必要があり。そこが少し注意点です。
これを使って配列同士を結合してるのが、次コード例
|
1 2 3 4 |
var arr = [ 1, 2, 3 ] var arrSub = [ 4, 5, 6 ]; arr = arr.concat(arrSub); console.log(arr); |
このコードのコンソールへの出力結果はこうなります。
|
1 |
[ 1, 2, 3, 4, 5, 6 ] |
今度はしっかり配列同士が連結されてます。
以上が配列に配列を追加する正しいやり方
他にも方法はあるかもですが、これが一番確実で楽な方法です。
コメントで push でも配列追加できるとご指摘が…
コメントから以下のご指摘をいただきました。
配列追加にpush使えますよ。
const foo = [“foo”, “bar”, “baz”];
const hoge = [“hoge”, “fuga”];foo.push(hoge); // <——- これは仰る通りNG
foo.push(…hoge); // OK引用元 ： この記事にいただいたコメントより
スプレッド構文を使えば可能です。
この例にある ...hoge というのがスプレッド構文であり、平たく言えば foo.push(["hoge", "fuga"]) のように引数上で展開することができます。
ご指摘ありがとうございました。
ここまでのまとめ
ということで、配列に配列を追加についてまとめ
- 配列結合に push メソッドはNG！
なぜなら push メソッドは配列に要素を追加するためのものだから。これを使うと [ 1, 2, 3, [ 4, 5, 6 ] ] みたいに、配列が値として追加されてしまう。
- 結合には concat を必ず使う！
地道に forEach とかを使ってもいいが、一番確実で楽なのは concat メソッドを使うこと。ただし非破壊的なメソッドなので、結合元への再代入が必要
間違っても push メソッドは使わないようにしましょう。
エラーも出ないので、最悪バグとかの本性になるので注意です。
以上、JavaScriptで配列同士を結合する方法でした。ではではﾊﾞｲﾊﾞｲ(^_^)/~
