arr[arr.length++] = 0というコードについて

(この記事はQiitaで僕が書いたものを移行した記事です。記事中のコメントはQiitaの該当記事を参照ください)

ngRepeat.jsにあった、 clone[clone.length++] = endNode; というコード。おそらく arr[arr.length] = 0; というコードの亜種と思われる(clone.length++はclone.lengthと返り値が同じなので、動作上は同じ動作をする)。

一体.push()、.length、.length++どれが速いのか検証してみた。

検証コード

function tester(key, f) {
    console.time(key);
    for (var i = 0; i < 100000; i = 0 | i + 1) {
    f();
    }
    console.timeEnd(key);
}
tester('.push()', function() {
    var arr = [];
    arr.push(0);
});
tester('.length++', function() {
    var arr = [];
    arr[arr.length++] = 0;
});
tester('.length', function() {
    var arr = [];
    arr[arr.length] = 0;
});

結果

• .push(): 7ms
• .length++: 31ms
• .length: 4ms

.push()が遅いのは当然として.length++が最も遅いのは驚きだ。配列に追加部分を 追加した後にそこに入れるので速いと思ったのだが、面白いものだ。

考察

おそらく、インクリメントが遅いのが原因であると思われる。それにしてもここまでインクリメントのコストが高いとは思ってなかった。以後気をつけるとしよう。