JavaScriptで配列に配列を追加するNG例と正しいやり方

JavaScriptで配列に配列を追加したい場合

このやり方が分からなくて、ハマることって多いですね。(特にJSに慣れてない場合)

そして間違った方法を試してしまい、
ドツボにハマるということが、過去に何回かありました。

そこで記憶の整理も兼ね、JavaScriptで配列に配列を追加する方法をまとめます。

配列追加には push は使えない!NGなコード例

まず配列の追加でやりがちなミスについて

それが push メソッドを使って連結しようとすること

これはエラーにならないけど、配列同士の結合には絶対に使っちゃダメです!

 

その理由は push  メソッドがどういう動作をするのか、それを知れば分かります。

以下 push  メソッドについての説明(リファレンスより引用)

array.push(element1, ..., elementN)

push メソッドは配列の末尾に要素を追加します。

push はジェネリックメソッドとして用意されています。そのため call() や apply() と一緒にオブジェクトに対して利用することもできます。なお、push は配列の末尾から要素を挿入する必要性があるため、 length プロパティに依存しています。length が数値に変換できない場合、0 が用いられます。また、 length が存在しない場合は length も作成されることになります。

長々と書かれてるけど、大事なのが一番最初の所

よくみると「配列に要素を追加」と書かれてるんです。

つまり 配列をこのメソッドに渡すと、丸ごと要素(配列の値)になっちゃう わけです。

 

例えば次が push  メソッドを使った、
配列を結合しようとしている(つもりの)間違ったコード例

意図した動作にならないけど、コード的には正しいからエラーは出ません。

実際、上コードでできる配列を表示してみると、こんな感じです。

配列の各値ではなく、配列自体が最後に追加されてしまっている・・・

本当は配列同士を連結させたいのに・・・

 

こういう訳で push  メソッドは配列同士の連結に使うのがNG!

配列に配列を追加したいなら、別の方法を使う必要があります。

配列同士を連結する正しいやり方とは...

そのやり方とは concat メソッドを使うこと

これはその名の通り、配列同士を結合(concat)するためのメソッドになります。

ちなみに次が concat メソッドの詳しい説明(引用)

var new_array = old_array.concat([value1[, value2[, ...[, valueN]]]])

concat() メソッドは、配列に他の配列や値をつないでできた新しい配列を返します。

concat は、メソッドを呼び出した this オブジェクトの要素に、与えられた引数の要素 (引数が配列である場合) または引数そのもの (引数が配列でない場合) が順に続く、新しい配列オブジェクトを生成します。

concat は this や引数として与えられた配列を変更しませんが、その代わりに元の配列から結合させた同じ要素のコピーを含むシャローコピー (1 次元の配列要素までの浅いコピー) を返します。

配列と配列をつないで新しいのを返すだけ

ちなみに非破壊的なメソッドなので、
結合したら結合元の配列に代入する必要があり。そこが少し注意点です。

 

これを使って配列同士を結合してるのが、次コード例

このコードのコンソールへの出力結果はこうなります。

今度はしっかり配列同士が連結されてます。

 

以上が配列に配列を追加する正しいやり方

他にも方法はあるかもですが、これが一番確実で楽な方法です。

ここまでのまとめ

ということで、配列に配列を追加についてまとめ

  • 配列結合に push メソッドはNG!
    なぜなら push  メソッドは配列に要素を追加するためのものだから。これを使うと [ 1, 2, 3, [ 4, 5, 6 ] ]  みたいに、配列が値として追加されてしまう。
  • 結合には concat を必ず使う!
    地道に forEach  とかを使ってもいいが、一番確実で楽なのは concat  メソッドを使うこと。ただし非破壊的なメソッドなので、結合元への再代入が必要

間違っても push メソッドは使わないようにしましょう。

エラーも出ないので、最悪バグとかの本性になるので注意です。

以上、JavaScriptで配列同士を結合する方法でした。ではではバイバイ(^_^)/~

Commentsこの記事についたコメント

コメントを残す

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

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください