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 ネットワーク プログラミング

推薦する

LinuxでのDNSサーバーの設定の詳細な説明

1. DNSサーバーの概念インターネットでの通信には IP アドレスの助けが必要ですが、数字に対する...

ノードをMySQLデータベースに接続する際に発生する問題と解決策

今日、MySQL の新しいバージョン (8.0.21) をインストールしましたが、ノード フレームワ...

Mysql: 定義者として指定されたユーザー ('xxx@'%') が存在しません 解決策

本日のプロジェクト最適化中に、MySQL に問題が発生しました: 定義者として指定されたユーザー (...

Svelte の Defer Transition を Vue で実装する方法

最近、Rich Harris の <Rethinking Reactivity> ビデオ...

nginx で正規表現を使用してワイルドカードドメイン名を自動的に一致させる方法

Nginxは正規表現を使用して、ワイルドカードドメイン名をディレクトリに自動的に一致させます。 Ng...

Angularコンポーネントのライフサイクルの詳しい説明(パート2)

目次1. ビューフック1. ngAfterViewInit および ngAfterViewCheck...

Vueは秒殺しのカウントダウンコンポーネントを実装する

この記事では、2番目のキルカウントダウンコンポーネントを実装するためのVueの具体的なコードを参考ま...

MySQLに必要な共通知識のまとめ

目次主キー制約一意の主キー非 Null 制約デフォルトの制約外部キー制約1NF 2NF 3NFデータ...

MySQL 5.7 解凍版のインストールとアンインストール、およびよくある問題の概要

1. インストール1. ダウンロードMySQLをダウンロードするには、MySQL公式サイトhttp:...

Linux でハイパースレッディング技術を動的に有効/無効にする方法の詳細な説明

序文Intel のハイパースレッディング テクノロジーにより、1 つの物理コア上で 2 つのスレッド...

Mysqlデータベースの文字化けに対処する方法

MySQL では、データベースの文字化けは一般的に文字セットを設定することで修正できますが、文字化け...

CSSは下部のタップバー機能を実装します

現在多くの携帯電話には、下部のタブバーを切り替える機能があります。私も最近、同様の機能を見つけました...

Ubuntu 20.04でLNMP環境を構築する方法

簡単な説明以前 Centos7 で構築し、その後個人開発環境として Ubuntu 20.04 を使っ...

MySQLにおけるトランザクションの永続性実装原理の詳細な説明

序文データベース トランザクションに関して言えば、トランザクションの ACID 特性、分離レベル、解...

React HTML で react を使用する 2 つの方法

基本的な使い方 <!DOCTYPE html> <html lang="...