スピード質問jquery.eact vs. for loop

vanilla javascriptループvs. jquery.eack：パフォーマンス比較

この記事では、Vanilla JavaScript

ループの使用とjQueryのforメソッドを使用することのパフォーマンスの違いを調査します。 スピードのために、バニラ$.eachループ、特にさまざまなキャッシュを持つループは、for> $.eachを大幅に上回ることを実証します。 これにより、jsperfベンチマークに示すように、最大​​84％の速度改善が発生する可能性があります（リンクは簡潔に省略されていますが、簡単に検索可能です）。

jquery.eachの例：

可変キャッシング（最速）のループの場合

<code class="language-javascript">$.each(myArray, function() {
  let currentElement = this; 
  // ... your code using currentElement ...
});</code>

：

可変キャッシングなしのループの場合：

<code class="language-javascript">const len = myArray.length;
for (let i = 0; i < len; i++) {
  let currentElement = myArray[i];
  // ... your code using currentElement ...
}</code>

事前に計算された長さの試行：

<code class="language-javascript">for (let i = 0; i < myArray.length; i++) {
  let currentElement = myArray[i];
  // ... your code using currentElement ...
}</code>

（キャッシュバージョンと同様のパフォーマンス）

よくある質問（FAQ）：

<code class="language-javascript">let len = myArray.length;
let i = 0;
for (; i < len; i++) {
  let currentElement = myArray[i];
  // ... your code using currentElement ...
}</code>

この記事ではパフォーマンスに焦点を当てていますが、とループを選択するための重要な違いと考慮事項の要約を次に示します。

$.eachfor機能：

jQueryの

は、配列とオブジェクトを繰り返し、簡潔な構文を提供します。
• ループは、反復をより直接的に制御することを提供します。

  $.eachforパフォーマンス：

ループ（特に可変キャッシングの場合）は、関数呼び出しのオーバーヘッドの減少により、一般的に高速です。 違いは、より大きなデータセットでより顕著になります

• 読みやすさ：for

  単純な反復のコード読みやすさを改善できます。
ループはより明示的です。

• ループを壊す$.eachforコールバックから

を返すことがループを破ります。
• ループは

  。を使用します false $.eachforインデックスアクセス：breakどちらも現在のインデックスへのアクセスを提供します（違う）。

• nodeList/htmlcollection：ノデリストとhtmlCollectionsで動作しますが、

  はjQueryオブジェクトではなく、dom要素を指します。 JQueryメソッドを使用するには、
でラップします。

• $.eachネイティブthis：$(this)javascriptのネイティブ

  は、
と同様の構文を提供しますが、jqueryの実装よりもパフォーマンスが向上します。

• forEachオブジェクトイテレーション：両方ともオブジェクトを繰り返すことができます。forEach $.each

• スパースアレイ：

  スパースアレイで未定義のインデックスをスキップしますが、ループにはそれらが含まれます。

• チェーン：$.each他のjQueryメソッドのようにチェーンをサポートしていません

要約すると、特に大規模なデータセットを扱う場合は、最適なパフォーマンスのために、Vanilla JavaScript

ループを可変キャッシングで優先順位付けします。 jqueryの

は、小さなデータセットや読みやすさが最重要である場合に便利です。 JavaScriptのネイティブforをjQueryの$.each。

以上がスピード質問jquery.eact vs. for loopの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。