JavaScript で最も高速なループはどれですか?

どの for ループまたは反復子がニーズに適しているかを知ることで、アプリケーションのパフォーマンスに影響を与える愚かなミスを防ぐことができます。

JavaScript は、Web 開発の分野では不動の地位を占めています。 JavaScript フレームワーク (Node.js、React、Angular、Vue など) であっても、ネイティブ JavaScript であっても、いずれも非常に大規模なファンベースを持っています。最新の JavaScript についてお話しましょう。ループは常にほとんどのプログラミング言語の重要な部分であり、最新の JavaScript では値を反復処理またはループ処理する方法が多数提供されています。
しかし、問題は、どのループまたは反復がニーズに最も適しているかを本当に知っているかどうかです。 for ループには、for、for (reverse)、for...of、forEach、for...in、for...await など、さまざまなバリエーションがあります。この記事ではこれらについて説明します。

どちらのループの方が速いでしょうか?

答えは実はこうです: for (逆順)

私にとって最も驚いたのは、ローカル マシンでテストした後、for (reverse) がすべての for ループの中で最も高速であるという事実を受け入れなければならなかったことです。以下に、100 万を超える要素を含む配列に対してループを実行する例を示します。
免責事項: console.time() の結果の精度は、テストを実行するシステムの構成に大きく依存します。精度の詳細については、こちらをご覧ください。

定数百万 = 1000000; 
const arr = 配列(百万);

// 注意: これはスパース配列なので、その内容を指定する必要があります。そうしないと、異なるループで異なる方法で処理されます。
// const arr = [...配列(百万)]

コンソールの時間('⏳');
for (let i = arr.length; i > 0; i--) {} // for (逆順): - 1.5ms
for (let i = 0; i < arr.length; i++) {} // の場合:- 1.6ms
arr.forEach(v => v) // foreach :- 2.1ms
for (const v of arr) {} // for...of :- 11.7ms
コンソールのtimeEnd('⏳');

この結果の理由は単純です。コードでは、順方向の for ループと逆方向の for ループにかかる時間はほぼ同じで、その差はわずか 0.1 ミリ秒です。その理由は、 for (逆順) では開始変数 let i = arr.length を 1 回だけ計算する必要があるのに対し、順方向 for ループでは変数が増加するたびに条件 i<arr.length をチェックするからです。この微妙な違いはそれほど重要ではないので無視できます。 (翻訳者注: データ量が少ないコードや時間に敏感でないコードの場合は無視できます。ただし、翻訳者のテストによると、データ量が数十億や数千億など増加すると、ギャップが大幅に拡大し、アプリケーションのパフォーマンスに対する時間の影響を考慮する必要があります。)
そして、 forEach は配列プロトタイプのメソッドです。通常の for ループと比較すると、 forEach と for...of は配列の反復処理に時間がかかります。 (翻訳者注: ただし、for...of と forEach はどちらもオブジェクトからデータを取得しますが、プロトタイプは取得しないため、比較は不可能であることに注意してください。)

ループの種類と使用場所

1. forループ（順方向と逆方向）

この基本的なサイクルについては、誰もがよく知っているはずだと私は思います。コードブロックを指定された回数実行する必要がある場所であればどこでも for ループを使用できます。基本的な for ループは最も高速なので、毎回使用する必要がありますか?実際のところ、パフォーマンスは唯一の指標ではなく、コードの読みやすさの方が重要であることが多いため、アプリケーションに適したバリアントを選択しましょう。

2. 各

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

const things = ['have', 'fun', 'coding'];
const callbackFun = (item, idex) => {
  console.log(`${item} - ${index}`);
}
things.foreach(コールバックFun); 
/* 出力は - 0
    楽しい-1
    コーディング - 2 */

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

3. ～のために

for…of は ES6 (ECMAScript 6) で標準化されました。反復可能なオブジェクト（配列、マップ、セット、文字列など）に対してループを作成し、優れた可読性という優れた利点があります。

定数arr = [3, 5, 7];
'hello' を定数 str に代入します。
(let i of arr) {
  console.log(i); // 出力 3、5、7
}
for (let i of str) {
  console.log(i); // 'h'、'e'、'l'、'l'、'o' を出力します
}

for...of ループが早期に終了する場合でも、ジェネレーターで for...of を使用しないように注意することが重要です。ループを終了すると、ジェネレーターは閉じられ、再度反復を試行してもそれ以上の結果は生成されません。

4. ～のために

for…in は、指定された変数を使用して、オブジェクトのすべての列挙可能なプロパティを反復処理します。それぞれの個別の属性について、for…in ステートメントは数値インデックスに加えて、ユーザー定義属性の名前を返します。

したがって、配列を反復処理する場合は、数値インデックスを使用した従来の for ループを使用することをお勧めします。 for...in ステートメントは配列要素に加えてユーザー定義のプロパティも反復処理するため、配列オブジェクトを変更する場合 (たとえば、カスタム プロパティまたはメソッドを追加する場合) でも同じことが当てはまります。

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

～のために、～のために

for…of と for…in の主な違いは、何を反復するかです。 for…in はオブジェクトのプロパティをループし、for…of は反復可能なオブジェクトの値をループします。

arr = [4, 5, 6]とします。
(let i in arr) {
  console.log(i); // '0'、'1'、'2'
}
(let i of arr) {
  console.log(i); // '4'、'5'、'6'
}

結論は

• は最も速いが、読みにくい
• foreachはより高速で、コンテンツを制御できる
• for...of は遅いですが、より興味深いです。
• for...inは遅くて不便です

最後に、賢明なアドバイスを一つ。読みやすさを優先してください。これは、複雑な構造のプログラムを開発するときに特に必要です。もちろん、パフォーマンスにも重点を置く必要があります。不必要で冗長な派手なコードを追加することは、プログラムのパフォーマンスに重大な影響を与える可能性があるため、避けるようにしてください。楽しいコーディングを！

翻訳者メモ

翻訳機の実際のテストでは、次のことがわかりました。

• ブラウザが異なれば、バージョンが異なっても結果は異なります (たとえば、Firefox はネイティブの for ループにあまり適していないようですが、Safari は while を非常に好みます)
• プラットフォーム、オペレーティングシステム、プロセッサによって結果は異なります
  

JavaScript でどの種類のループが最も速いかについての記事はこれで終わりです。JavaScript でどの種類のループが最も速いかについての詳細は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

元記事: JavaScript で最も速いループの種類はどれですか?
原作者: kushsavani