「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > JavaScript 配列の反復メソッドを理解する

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

2024 年 11 月 8 日に公開
ブラウズ:435

Understanding JavaScript Array Iteration Methods

最近、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 へのアクセス: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 }

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

リリースステートメント この記事は次の場所に転載されています: https://dev.to/ayako_yk/ Understanding-javascript-array-iteration-methods-8e?1 侵害がある場合は、[email protected] に連絡して削除してください。
最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3