結論からいえば、場合によるがfor-of文とpushを使うのが無難です。特に、配列への要素の追加を1回行うだけならconcat
のほうが速い場合がありますが(Google Chromeで顕著)、要素の追加が何度も繰り返される場合、質問者さんが懸念する通り、concat
を使うと配列オブジェクトが何度も作られるという点で不利になります。
まず、配列への要素の追加1回のパフォーマンスを比較してみます。この回答では4つの方法(for-of
ループ、Array.prototype.push.apply
、spread構文、そしてArray.prototype.concat
)を比較してみました。
まずjsbench.meで1000要素の場合と100万要素の場合で速度を比較すると手元のPC(Win10 + Google Chrome)では以下の表のようになり、concatが最速という結果になりました。配列の要素として数値以外にも文字列やオブジェクトなどを試しましたが同じ傾向でした。また、Edgeも同じ傾向でした。
| | 1000 items | 1000000 items |
| ------------- | ------------- | ------------- |
| for-of | 59,383 ops/s | 17 ops/s |
| push & apply | 78,932 ops/s | error |
| push & spread | 19,079 ops/s | error |
| concat | 104,070 ops/s | 40 ops/s |
さらに、上記の表では100万要素の場合にa.push.apply(a, b)
やa.push(...b)
でエラーが発生しています。その理由は、これらの処理はあくまで「pushを100万個の引数で呼ぶ」という処理に相当するため、処理系が対応している引数の数の上限を超えているからです。この2つをこの目的で使用するのは(b
の要素数が少なくてエラーが起きないと確信できない限りは)やめたほうがよいでしょう。
一方、Firefoxでは下記の結果になります。先程とは傾向がかなり異なり、concatよりもfor-ofのほうが速いです(それでもChromeの1/3以下の性能ですが)。
| | 1000 items | 1000000 items |
| ------------- | ------------ | ------------- |
| for-of | 18,815 ops/s | 8 ops/s |
| push & apply | 3,750 ops/s | error |
| push & spread | 4,231 ops/s | error |
| concat | 3,663 ops/s | 5 ops/s |
というわけで、for-of
とconcat
の二択ではありますが一概にどちらがベストとは言いにくい結果となりました。
次に、テストケースを100要素の追加を1000回行うように変更してみます。この場合、concat
では中間オブジェクトが多く作られるので不利になると予想されます。
このテストケースをGoogle Chromeで試してみたところ以下の結果となりました(Firefoxも同じ傾向)。
| for-of | 388 ops/s |
| concat | 4 ops/s |
また、データは省略しますがconcatのほうがメモリ使用量が上がっており、これが実行速度にも悪影響を与えていると考えられます。
まとめると、concat
はGoogle Chromeでは最も高速に動作しますが、何度も繰り返し使用する場合は新しいオブジェクトが何度も生成されることが原因で性能が大きく低下します。一方、for-of
はそのような性能悪化が発生しない上、Firefoxでは最も高速です。このことから、for-of
が最も無難ではないかと考えられます。
シチュエーションにもよりますが、配列への複数要素の追加があまり頻繁に起こらないならどちらでもよいでしょう。concat
のほうが何をやっているのか分かりやすくてよいかもしれません。しかし、この操作が頻繁に行われる場合にはconcat
を避けたほうがよいでしょう。
配列に配列を追加する
ではなく、配列に配列の要素を追加する
のが目的である 2. @cubick 氏の指摘の通り、求めている尺度が不明瞭であり、何を求めているのか分からない( >どの方法が一番良いと思いますか?
という表現が顕著であるように思います) 3. スプレッド構文についての質問がおまけのようについていますが、これは別の質問として分けたほうが良いと思います。Array.prototype.push.apply
と一緒くたにできるであろうという観点からは余計なのかもしれませんが、(私の回答では重要度が低いので詳しい言及は避けたものの)独特のパフォーマンス傾向を示しており、結果論的ではありますがこの質問に含まれていることには意義があると感じます。配列に配列を追加する
で十分意味が通じると思うのですが。配列に配列の要素を追加する
ですと、配列中の特定の要素を追加する意味合いが強くなり、かえって質問の意図から外れるように私には感じられます。厳密に言えば配列に別配列の全要素を追加する
となるのかもしれませんが、それは冗長ではありませんか?そもそも、配列 a に 配列 b の内容がすべて追加されている// a = [1, 2, 3, 4, 5, 6, 7]
を例として書いているのですから、この点を誤解する理由が分かりません。