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

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

以下もご興味があるかもしれません:
  • js配列内のすべての要素をループする方法
  • JS 配列トラバーサルメソッド for ループと for...in
  • Js setInterval および setTimeout (時間指定実行およびループ実行) コード (パラメータを渡すこともできます)
  • js 配列の for ループはどのように記述すればよいですか?
  • JavaScript で中断して続行する方法
  • JavaScript でループから抜け出す 3 つの方法 (break、return、continue)
  • jsはループを終了し、多層ループから抜け出します
  • JavaScript で配列とマップをループするメソッドの概要
  • JavaScript で for ループを書くいくつかの方法とその効率のまとめ
  • vue.js での v-for ループレンダリングに関する簡単な説明

<<:  Mysql は、デッドロック問題を解決するために kill コマンドを使用します (実行中の特定の SQL ステートメントを強制終了します)。

>>:  Linux IO 多重化 epoll ネットワーク プログラミング

推薦する

JSにおけるデータ型の正しい判定方法の例

目次序文typeof は型を正しく判別できますか? instanceof は型を正しく判別できますか...

JavaScript 中断要求に対するいくつかの解決策の詳細な説明

目次1 約束呼び出しチェーンを中断する約束を破る中止メソッドのラッピング - Axios の Can...

Win10 MySQLでCSVをエクスポートする2つの方法

Win10 で csv をエクスポートする方法は 2 つあります。1 つ目はツールを使用することです...

Nginx セッション共有問題の解決策の分析

この記事は主に、Nginx セッション共有の問題に対する解決策を紹介します。記事内のサンプル コード...

JavaScript axiosのインストールとパッケージ化のケースの詳細な説明

1. axiosプラグインをダウンロードする cnpm インストール axios -S 2. mai...

Vue3 はメッセージコンポーネントの例を実装します

目次コンポーネント設計最終的なコンポーネントAPIの定義コンポーネント構造の定義テンプレートとスタイ...

1つの記事でNavicat for MySQLの基本を理解する

目次1. データベース操作2. データ型3. バックアップとリカバリ3. 操作4. 上級5. 知識補...

Nginx におけるサーバーとロケーションのマッチングロジックの詳細な理解

サーバーマッチングロジックNginx は、リクエストを実行するサーバー ブロックを決定するときに、サ...

Vue は div の高さをドラッグ可能にします

この記事では、divのドラッグ可能な高さを実現するためのVueの具体的なコードを参考までに共有します...

Vue-routerルーティングの使い方

目次1. 説明2. インストール3. テスト1. 説明Vue Router は、Vue.js の公式...

mysql-8.0.15-winx64 解凍バージョンのインストールチュートリアルと終了する 3 つの方法

1.公式サイトからダウンロードして解凍する参考: 2. 環境変数を設定するMYSQL_HOMEをMy...

HTML における br と br/ の違い

スタックフローからの回答:単に<br>だけで十分です。その他の形式は、XHTML との互...

vue3.0 プロジェクトを素早く構築するための手順を完了する

目次1. 3.0をより適切にサポートするには、vue/cliのバージョンが4.5.0以上であることを...

MySQLの結合クエリ、ユニオンクエリ、サブクエリの原理と使用例の詳細な説明

この記事では、例を使用して、MySQL の結合クエリ、結合クエリ、サブクエリの原理と使用方法を説明し...

JavaScript はマウスのドラッグを実装して div のサイズを調整します

この記事では、マウスをドラッグしてdivのサイズを調整するJavaScriptの具体的なコードを参考...