javascriptのArray、スプレッド演算子、concatによる配列生成速度

Reactを書くとき毎回定数を追加していくような配列のstateをいじる機会があった。

ここでふと疑問。

このような配列は1から作るのが早いのか。

それとももとのstateに追加のほうが早い？

以下検証。

newによる作成

console.time('処理時間');
Array(100000).fill;
console.timeEnd('処理時間');
// 処理時間: 1.115966796875ms

何回かやっても1ms前後。

追加

長さが倍になる仮定。

1. スプレッド演算子

let prevState = Array(50000).fill(1);
console.time('処理時間');
[...prevState, ...Array(50000).fill(1)];
console.timeEnd('処理時間');
// 処理時間: 12.77783203125ms

配列初期化してから開いてるしそりゃそうか。

1. concat

let prevState = Array(50000).fill(1);
console.time('処理時間');
prevState.concat(Array(50000).fill(1));
console.timeEnd('処理時間');
// 処理時間: 0.908935546875ms

普通にはええ。

まとめ

どうやらスプレッド演算子は遅いらしい。