JavaScript で最も速いループのタイプはどれですか?いくつかの for ループの比較

JavaScript は、Web 開発分野における「常緑樹」です。 JavaScript フレームワーク (Node.js、React、Angular、Vue など) であっても、ネイティブ JavaScript であっても、それらはすべて非常に大きなファンベースを持っています。最新の JavaScript について話しましょう。ループは常にほとんどのプログラミング言語の重要な部分であり、最新の JavaScript では値を反復またはループするためのさまざまな方法が提供されます。

しかし問題は、どのループまたは反復がニーズに最適であるかを本当に知っているのかということです。 for ループには、for、for (逆順)、for…of、 など、さまざまなバリエーションがあります。 forEach、for…in、for…await。この記事ではこれらについて説明します。

アプリケーションのパフォーマンスに影響を与える低レベルの間違いを防ぐために、どちらの for ループまたはイテレータがニーズに適しているかを理解します。

どちらのループが速いですか?

答えは実際には次のとおりです: for (逆順)

私にとって最も驚くべきことは、ローカル コンピューター テスト後、for (逆順) がすべての for ループの中で最も高速であるという事実を受け入れる必要がありました。以下に、100 万を超える要素を含む配列に対してループを実行する例を示します。

ステートメント : console.time() 結果の精度は、テストを実行するシステム構成に大きく依存します。精度について詳しくは、こちらをご覧ください。

const million = 1000000; 
const arr = Array(million);

// 注：这是稀疏数组，应该为其指定内容，否则不同方式的循环对其的处理方式会不同：
// const arr = [...Array(million)]

console.time('⏳');
for (let i = arr.length; i > 0; i--) {} // for(倒序)  :- 1.5ms
for (let i = 0; i < arr.length; i++) {} // for          :- 1.6ms
arr.forEach(v => v)                     // foreach      :- 2.1ms
for (const v of arr) {}                 // for...of     :- 11.7ms
console.timeEnd(&#39;⏳&#39;);

この結果の理由は非常に単純で、コード内の順方向および逆方向の for ループにかかる時間はほぼ同じで、その差はわずか 0.1 ミリ秒です。その理由は、for (逆順) では開始変数 let i = arr.length を 1 回計算するだけで済むのに対し、順方向 for ループでは計算が必要になるためです。 is 条件 i<arr.length は、変数がインクリメントされるたびにチェックされます。この微妙な違いはそれほど重要ではないため、無視してかまいません。 (翻訳者注: データ量が少ない場合、またはコードが時間に依存しない場合は無視できます。ただし、翻訳者のテストによると、データ量が数十億、数千億などのように増大すると、ギャップが大きくなるそうです)は大幅に増加します。アプリケーションのパフォーマンスに対する時間の影響を考慮する必要があります。)

そして forEach は Array プロトタイプのメソッドであり、通常の for ループと比較して、forEach および for…of は配列の反復処理に時間がかかります。 (翻訳者注: ただし、for…of と forEach はどちらもオブジェクトからデータを取得しますが、プロトタイプはデータを取得しないため、比較できないことに注意してください。)

ループの種類と使用場所

1. For ループ (順方向および逆順)

#おそらく誰もがこの基本的なサイクルをよく知っているはずだと思います。コードを承認された回数実行する必要がある場合は、どこでも

for ループを使用できます。最も基本的な for ループは最も高速に実行されるため、毎回これを使用する必要があります。いいえ、パフォーマンスだけが唯一の基準ではありません。多くの場合、コードの読みやすさの方が重要です。アプリケーションに適したバリアントを選択しましょう。

2. forEach

このメソッドは、コールバック関数を入力として受け入れる必要があります配列の各要素を反復処理し、コールバック関数を実行します (要素自体とそのインデックス (オプション) を引数として渡します)。

forEach では、コールバック関数でオプションのパラメータ this を使用することもできます。

const things = ['have', 'fun', 'coding'];
const callbackFun = (item, idex) => {
    console.log(`${item} - ${index}`);
}
things.foreach(callbackFun); 
/* 输出   have - 0
        fun - 1
        coding - 2 */

forEach を使用したい場合、JavaScript の短絡演算子 (||、&&...) は使用できない、つまりスキップできないことに注意してください。各ループまたはループの終了。

3. for…of

##for…of

それES6 (ECMAScript 6) で標準化されています。反復可能なオブジェクト (array、map、set、string など) に対するループを作成し、優れた利点は優れた可読性です。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const arr = [3, 5, 7]; const str = &amp;#39;hello&amp;#39;; for (let i of arr) { console.log(i); // 输出 3, 5, 7 } for (let i of str) { console.log(i); // 输出 &amp;#39;h&amp;#39;, &amp;#39;e&amp;#39;, &amp;#39;l&amp;#39;, &amp;#39;l&amp;#39;, &amp;#39;o&amp;#39; }</pre><div class="contentsignin">ログイン後にコピー</div></div>

for…of

ループが早期に終了する場合でも、ジェネレーター内で for…of を使用しないでください。ループを抜けた後、ジェネレーターは閉じられ、それ以上の結果を生成せずに再度反復が試行されます。

4. for in

for…in 会在对象的所有可枚举属性上迭代指定的变量。对于每个不同的属性，for…in 语句除返回数字索引外，还将返回用户定义的属性的名称。 因此，在遍历数组时最好使用带有数字索引的传统 for 循环。 因为 for…in 语句还会迭代除数组元素之外的用户定义属性，就算我们修改了数组对象（例如添加自定义属性或方法），依然如此。

const details = {firstName: 'john', lastName: 'Doe'};
let fullName = '';
for (let i in details) {
    fullName += details[i] + ' '; // fullName: john doe
}

<span style="font-size: 16px;">for…of</span> 和 <span style="font-size: 16px;">for…in</span>

for…of 和 for…in 之间的主要区别是它们迭代的内容。for…in 循环遍历对象的属性，而 for…of 循环遍历可迭代对象的值。

let arr= [4, 5, 6];
for (let i in arr) {
   console.log(i); // '0', '1', '2'
}
for (let i of arr) {
   console.log(i); // '4', '5', '6'
}

结论

• for 最快，但可读性比较差
• foreach 比较快，能够控制内容
• for...of 比较慢，但香
• for...in 比较慢，没那么方便

最后，给你一条明智的建议 —— 优先考虑可读性。尤其是当我们开发复杂的结构程序时，更需要这样做。当然，我们也应该专注于性能。尽量避免增添不必要的、多余的花哨代码，因为这有时可能对你的程序性能造成严重影响。祝你编码愉快。

译者注

在译者的实际测试中，发现：

• 不同浏览器甚至不同版本，结果会有不一样（颠倒，例如 Firefox 对原生 for-loop 似乎不太友好，Safari 极度喜欢 while）
• 不同平台操作系统处理器，结果会有不一样

英文原文地址：https://medium.com/javascript-in-plain-english/which-type-of-loop-is-fastest-in-javascript-ec834a0f21b9

原文作者：kushsavani

本文转载自：https://juejin.cn/post/6930973929452339213

译者：霜羽 Hoarfroster

更多编程相关知识，请访问：编程入门！！

以上がJavaScript で最も速いループのタイプはどれですか?いくつかの for ループの比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。