$.each() vs for() ループ - そしてパフォーマンス

疑問点

これらは主に私が疑問に思っていることです。もしかしたら誰かがもう少し洞察を与えてくれるかもしれません。

私が疑問に思っている最初のこと...使用する良いまたは理由の違いはありますか？

$('element').each(function (i, el) { });

-- 対

$.each($('element'), function (i, el) { });

jQueryのドキュメントを見ると、どちらか一方に理由や根拠があるようには見えません（もしかしたら、一方が他方よりできる事例や追加事項を知っているかもしれません。

しかし、より重要なのは、私が懸念している スピード ここで

// As opposed to $.each() looping through a jQuery object
// -- 8x faster 
for (var i = 0, $('.whatever').length; i < len; i++) {
    $('.whatever')[i] // do stuff
}

もし、あなたがこの jsFiddle DEMOはこちら を使えば、基本的に速度差は同等であることがわかると思いますが、それよりも重要なのは 常に を使うべきだと思っています。 for() ループを使用します...

私はちょうどユニットテスト（5種類のシナリオ関数をそれぞれ5万回ずつループさせる）を行っていて、単にリスト項目の束をループさせ、その中に data-newAttr を設定するだけで、特に何もしていません。

QUESTION :: 私が一番疑問に思うのは、なぜ 常に ループを使用して、オブジェクトを反復するのですか？$.each()を使用することに意味があるのでしょうか？jQueryのオブジェクトを通過するときでも、常にfor()ループを使用するのでしょうか？

jsFiddle DEMOはこちら

Function type:                  Execution Time:
_testArea.each() + $(this)               1947   <-- using $(this) slows it down tremendously
$.each()         + $(this)               1940
_testArea.each() + el(plain JS)           458   <-- using the Element speeds things up
$.each()         + el(plain JS)           452
for() loop       + plainJS[0] iteration   236   <-- over 8x faster

2セントだけです。）

どのように解決するのですか？

ひとつは .each() ではできないことができるようになります。 for ループは 連鎖 .

$('.rows').each(function(i, el) {
    // do something with ALL the rows
}).filter('.even').each(function(i, el) {
    // do something with the even rows
});

私はあなたの JSFiddle を使って、マッチした要素の元のセットのサブセットを通してループする必要がある場合に、連鎖がパフォーマンスにどのような影響を与えるか見てみました。

のオーバーヘッドが大きいと思いますが、結果はそれほど予想外ではありませんでした。 end() のオーバーヘッドは、少数の要素と多数のループの組み合わせのため、ここでは誇張されていたようです。その他：プレーンなJSのループはまだ若干速いですが、それが .each() (と連鎖）の可読性に見合うかどうかは議論の余地があります。