どの for ループまたは反復子がニーズに適しているかを知ることで、アプリケーションのパフォーマンスに影響を与える愚かなミスを防ぐことができます。 JavaScript は、Web 開発の分野では不動の地位を占めています。 JavaScript フレームワーク (Node.js、React、Angular、Vue など) であっても、ネイティブ JavaScript であっても、いずれも非常に大規模なファンベースを持っています。最新の JavaScript についてお話しましょう。ループは常にほとんどのプログラミング言語の重要な部分であり、最新の JavaScript では値を反復処理またはループ処理する方法が多数提供されています。 どちらのループの方が速いでしょうか?答えは実はこうです: for (逆順) 私にとって最も驚いたのは、ローカル マシンでテストした後、for (reverse) がすべての for ループの中で最も高速であるという事実を受け入れなければならなかったことです。以下に、100 万を超える要素を含む配列に対してループを実行する例を示します。 定数百万 = 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 をチェックするからです。この微妙な違いはそれほど重要ではないので無視できます。 (翻訳者注: データ量が少ないコードや時間に敏感でないコードの場合は無視できます。ただし、翻訳者のテストによると、データ量が数十億や数千億など増加すると、ギャップが大幅に拡大し、アプリケーションのパフォーマンスに対する時間の影響を考慮する必要があります。) ループの種類と使用場所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' } 結論は
最後に、賢明なアドバイスを一つ。読みやすさを優先してください。これは、複雑な構造のプログラムを開発するときに特に必要です。もちろん、パフォーマンスにも重点を置く必要があります。不必要で冗長な派手なコードを追加することは、プログラムのパフォーマンスに重大な影響を与える可能性があるため、避けるようにしてください。楽しいコーディングを! 翻訳者メモ 翻訳機の実際のテストでは、次のことがわかりました。
JavaScript でどの種類のループが最も速いかについての記事はこれで終わりです。JavaScript でどの種類のループが最も速いかについての詳細は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 元記事: JavaScript で最も速いループの種類はどれですか? 以下もご興味があるかもしれません:
|
<<: Mysql は、デッドロック問題を解決するために kill コマンドを使用します (実行中の特定の SQL ステートメントを強制終了します)。
>>: Linux IO 多重化 epoll ネットワーク プログラミング
目次序文typeof は型を正しく判別できますか? instanceof は型を正しく判別できますか...
目次1 約束呼び出しチェーンを中断する約束を破る中止メソッドのラッピング - Axios の Can...
Win10 で csv をエクスポートする方法は 2 つあります。1 つ目はツールを使用することです...
この記事は主に、Nginx セッション共有の問題に対する解決策を紹介します。記事内のサンプル コード...
1. axiosプラグインをダウンロードする cnpm インストール axios -S 2. mai...
目次コンポーネント設計最終的なコンポーネントAPIの定義コンポーネント構造の定義テンプレートとスタイ...
目次1. データベース操作2. データ型3. バックアップとリカバリ3. 操作4. 上級5. 知識補...
サーバーマッチングロジックNginx は、リクエストを実行するサーバー ブロックを決定するときに、サ...
この記事では、divのドラッグ可能な高さを実現するためのVueの具体的なコードを参考までに共有します...
目次1. 説明2. インストール3. テスト1. 説明Vue Router は、Vue.js の公式...
1.公式サイトからダウンロードして解凍する参考: 2. 環境変数を設定するMYSQL_HOMEをMy...
スタックフローからの回答:単に<br>だけで十分です。その他の形式は、XHTML との互...
目次1. 3.0をより適切にサポートするには、vue/cliのバージョンが4.5.0以上であることを...
この記事では、例を使用して、MySQL の結合クエリ、結合クエリ、サブクエリの原理と使用方法を説明し...
この記事では、マウスをドラッグしてdivのサイズを調整するJavaScriptの具体的なコードを参考...