JavaScript 配列の反復メソッドを理解する

私は最近、JavaScript の Array オブジェクトを反復するさまざまな方法を尋ねる面接の質問に遭遇しました。いくつかのコード スニペットの例を提供することが期待されていたため、プロンプトは最初は単純そうに見えました。しかし、この質問に興味をそそられたので、各メソッドをもう少し深く掘り下げて、その使用方法だけでなく、あるアプローチを別のアプローチより選択する場合とその理由についても検討することにしました。

この記事では、JavaScript で配列を反復処理するさまざまな方法を説明し、その違い、利点、使用例を強調します。

for ループ
利点:

• 柔軟性: for ループは、break を使用してループを終了したり、次の反復にスキップし続けたりできるようにすることで柔軟性を提供します。インデックスを直接指定して、ループの動作を正確に制御することもできます。
• 非順次順序: 逆方向に反復したり、特定の要素をスキップしたりするなど、ループ条件を調整することで反復順序を制御できます。

for...of ループが導入される前は、従来の for ループが配列反復の標準的な方法でした。ただし、インデックスを 0 ではなく 1 から開始したり、arr.length - 1 の代わりに誤って arr.length を使用したりするなど、エラーが発生しやすい可能性があります。MDN が示唆しているように、「通常は... に使用するのが最善です」できれば。"

いつ使用するか:
反復をスキップしたり、逆に反復したりするなど、反復を完全に制御する必要がある場合。
反復中にインデックスと値の両方が必要な場合。

の... 利点:

• シンプルさと推奨事項: for...of ループは、インデックスを自動的に処理するため、配列を反復処理する簡単で推奨される方法です。インデックスではなく値に基づいて、break を使用してループを終了したり、次の反復にスキップし続けることができます。

いつ使用するか:
値を操作するだけでよく、インデックスにアクセスする必要がない場合。

Array.prototype.map()
利点:

• 非突然変異: 元の配列は変更されません。
• 新しい配列を返します: 指定された関数を各要素に適用した後、map() は結果を含む新しい配列を返します。このため、関数型プログラミングに最適です。

いつ使用するか:
配列の各要素に関数を適用し、その結果を新しい配列として必要とする場合。

Array.prototype.forEach()
利点:

• 戻り値なし: forEach() を使用すると、新しい配列を返さずに各要素に対して関数を実行できます。これは、ロギング、変数の更新、DOM の操作などの副作用を実行するためによく使用されます。

いつ使用するか:
配列の各要素に関数を適用したいが、新しい配列を返す必要がない場合。

Array.prototype.entries()
利点:

• インデックスと値の両方へのアクセス:entrys() は、各要素のインデックスと値の両方を提供するイテレータを返します。これは、従来の for ループを使用するよりもシンプルで読みやすくなります。配列スロットが空の場合、その値は未定義を返します。

いつ使用するか:
配列要素のインデックスと値の両方にアクセスする必要がある場合。

Array.prototype.keys()
利点:

• インデックスへのアクセス:keys() は配列のインデックスの反復子を返します。これは、値ではなくインデックスのみが必要な場合に便利です。スパース配列では、[...arr.keys()] には空のスロットのインデックスも含まれます (値は未定義)。

いつ使用するか:
配列要素のインデックスのみを提供する反復子が必要な場合。

Array.prototype.values()
利点:

• 値へのアクセス:values() は配列の値の反復子を返します。これは、配列で for...of を使用するのと似ていますが、ループの代わりに反復子を提供します。

いつ使用するか:
配列要素の値のみを提供する反復子が必要な場合。

配列反復子とは:
Array.prototype.entries()、Array.prototype.keys()、および Array.prototype.values() は、新しい配列反復子オブジェクトを返します。これらの反復子を使用すると、配列のようなコレクションを一度に 1 要素ずつ走査できます。これらには、シーケンス内の次の値を提供する next() メソッドが付属しており、必要に応じて呼び出すことができ、メモリの節約に役立ちます。

entrys() を使用した例を次に示します:

const arr = ['a', 'b', 'c'];
const iterator = arr.entries();

console.log(iterator.next()); // { value: [0, 'a'], done: false }
console.log(iterator.next()); // { value: [1, 'b'], done: false }
console.log(iterator.next()); // { value: [2, 'c'], done: false }
console.log(iterator.next()); // { value: undefined, done: true }

正直に言うと、私はこれらの手法の詳細や用途について十分に理解していなかったので、この面接の質問に取り組み、理解を深めたことは非常に重要でした。基本的なループを使用している場合でも、より高度な関数型プログラミング手法を使用している場合でも、これらの方法を知っていれば、コードの効率と読みやすさを大幅に向上させることができます。

以上がJavaScript 配列の反復メソッドを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。