JavaScript で配列を反復する 4 つの方法の比較

JavaScript 配列の基本をすでに理解している場合は、より高度なトピックでスキルを次のレベルに引き上げましょう。この一連のチュートリアルでは、JavaScript で配列を使用したプログラミングの中級トピックを学習します。

配列を含むほぼすべてのプロジェクトでは、配列の反復やループなどの操作を実行する必要があります。配列データを出力として表示する場合や配列データを変換する場合など、配列をループする必要がある理由は数多くあります。

JavaScript では、さまざまなメソッドを使用して配列を反復処理できます。このチュートリアルでは、それらすべてを見て、それぞれの長所と短所について詳しく説明します。

＃＃＃方法＃＃＃ ＃＃＃アドバンテージ＃＃＃ forループbreakforEach()メソッドbreakfor...ofループfor...inループ ＃＃＃方法＃＃＃

		欠点
		を使用すると早期終了でき、非同期コードに適しており、一般的なブラウザでサポートされています	長くて間違いが起こりやすい
	簡潔で読みやすい	非同期サポートなし、早期終了なし
	他の反復可能な型と併用して早期終了を可能にし、構文を使用してエラーを削減します	古いブラウザのサポートが少ない
	疎配列で効率的で、早期終了が可能	予期しない継承要素が返される可能性があります

割り込みと再開によるフロー制御? 非同期コードを使用できますか? ＃＃＃はい＃＃＃ ＃＃＃はい＃＃＃ すべてのブラウザより詳細な構文、1 対 1 のエラーforEach() ＃＃＃いいえ＃＃＃ 簡潔で、他の関数の後に連鎖する (例 map ＃＃＃はい＃＃＃ for...in

ブラウザのサポート	コメント			forループ
		メソッド	＃＃＃いいえ＃＃＃	最新のブラウザ
)	for...of ループ	＃＃＃はい＃＃＃	最新のブラウザ	シンプルな構文によりエラーが削減されます
ループ ＃＃＃はい＃＃＃ ＃＃＃はい＃＃＃ すべてのブラウザ	スパース配列に有効で、予期しない (継承された) 要素が返される可能性があります	配列要素へのアクセスに関する基本知識 インデックスを使用して配列要素にアクセスする基本から始めましょう。 JavaScript での配列のインデックス付けは 0 から始まります。これは、コード内で array_name[0] を使用して最初の要素にアクセスできることを意味します。同様に、n 要素を含む配列の場合、array_name[n - 1] を使用して最後の要素にアクセスできます。 リーリー for ループを使用して反復します 配列をループする最も一般的な方法の 1 つは、for ループです。 for ループは反復変数を 0 に初期化し、最初の要素からループを開始します。配列全体を反復処理する必要があるため、配列の長さを計算する必要があります。これは、length プロパティを使用して簡単に実行できます。配列内の最後の要素には、array_name[length - 1] を使用してアクセスできます。 次のコード スニペットは、for ループ シーケンスを使用して配列をループする方法を示しています。 リーリー ループ終了条件として、以下演算子 ( ) の代わりに、未満演算子 () を使用していることに注意してください。 配列をループするときに for ループを使用すると、2 つの利点があります。広くサポートされていることと、break および ## を通じてループのフローを制御できることです。 #Continue ステートメント。探しているものが見つかったら、ループを終了できます。 for ループは、非同期コードを扱う場合にもうまく機能します。 欠点は、少し冗長であり、時折小さな間違いを犯す可能性があることです。 forEach() メソッドを使用して反復します 組み込みの forEach() メソッドを使用して、JavaScript で配列を反復処理することもできます。このメソッドは、配列要素ごとに 1 回実行されるコールバック関数を引数として受け取ります。コールバック関数は別の場所で定義でき、インライン関数またはアロー関数にすることができます。 コールバック関数は 3 つの異なるパラメータを受け入れることができます: 現在の要素自体 現在の要素のインデックス メソッドの forEach() 配列を呼び出します リーリー ご覧のとおり、 forEach() メソッドを使用するとコードがきれいになります。次に、コールバック関数の 2 番目のパラメーターを使用する別の例を示します。 リーリー forEach() の使用は、配列の単純な反復に非常に適しています。ただし、break および Continue を使用してループを途中で終了し、プログラムの流れを変更することはできません。 forEach() を使用するもう 1 つの欠点は、このメソッドでは非同期コードを使用できないことです。 for...of ループを使用して反復します ES6 標準では、JavaScript に多くの新機能が追加されています。その 1 つは、反復子と反復可能オブジェクトの概念です。 for...of ループを使用すると、 @@iterator メソッドを実装するオブジェクトの値を反復処理できます。組み込み型 (Array、String、Set、Map など) は、for...of ループを使用して値を反復処理できます。 リーリー for...of 構造を使用して反復することには多くの利点があります。たとえば、これを使用して他の組み込みの反復可能な型を反復することもできます。とりわけ、 break または Continue ステートメントを使用して、ループから抜け出し、プログラム フローを制御できます。 唯一の潜在的な欠点は、ブラウザのサポートが若干少ないことですが、それはすべて対象ユーザーによって異なります。 for...in ループを使用して反復します for...in ステートメントを使用して配列をループすることもできます。これは、オブジェクトのすべての列挙可能な文字列プロパティをループします。これには、継承された列挙可能なプロパティも含まれます。 ここで言及したいのは、ループを反復するために for...in ステートメントを使用することは推奨されないということです。これは、前に述べたように、このステートメントは、継承されている場合でも、すべての整数プロパティと非整数プロパティを反復処理するためです。配列を反復処理する場合、通常は整数キーのみに関心があります。 for...in ループの走査順序は明確に定義されており、負でない整数キーの走査から始まります。負でない整数キーは、値の昇順で走査されます。次に、他の文字列キーを作成された順序で繰り返します。 スパース配列は、他のメソッドよりも for...in ループを使用してより適切に走査できる配列タイプです。たとえば、 for...of ループはスパース配列内のすべての空のスロットを反復処理しますが、for...in ループは反復しません。 これは、for...in ループを使用してスパース配列を反復処理する例です: リーリー Object.hasOwn() という静的メソッドを使用して、クエリ オブジェクトの指定されたプロパティが実際に独自のプロパティであるかどうかを確認していることに気づいたかもしれません。 ＃＃＃最終的な考え＃＃＃ 通常の for ループをいつでも使用して、配列を反復処理できます。 break および Continue キーワードを使用してプログラム フローを制御でき、非同期コードもサポートされます。一方で、1 つの間違いについては注意する必要があります。 <p><code>forEach() メソッドは配列をループする短い方法を提供しますが、非同期コードには適していません。また、break と continue を使用してループを抜けたり、プログラム フローを制御したりすることもできません。 for...of ループは両方の長所を提供します。プログラム フローを完全に制御でき、非同期コードでも動作します。ビートを逃す心配はありません。 最後に、for...in ループは、配列をループする推奨される方法ではありません。ただし、ループする配列が非常にまばらな場合には便利です。 この記事のサムネイルは、OpenAI の DALL-E 2 を使用して生成されました。

以上がJavaScript で配列を反復する 4 つの方法の比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。