Map と forEach: JavaScript 開発者のための主要な違いを理解する

想像してみてください。あなたは、ユーザー データのリストを洗練されたダッシュボードに変換する任務を負った Web 開発者です。ご存知のとおり、JavaScript には配列を反復処理するツールがありますが、特に注目すべきメソッドは、map() と forEach() の 2 つです。どちらを使用するべきですか?交換可能ですか?これをストーリー形式で紐解いてみましょう。

2 つの方法の物語

昔々、JavaScript の国で、map() と forEach() という 2 つの兄弟が作成されました。両方とも、配列を横断するという使命を共有しました。しかし、それらは似ているにもかかわらず、性格と目的は大きく異なっていました。彼らの癖を理解するために、それぞれの兄弟を詳しく見てみましょう。

---

Meet forEach(): タスク完了者

forEach() は、仕事をやり遂げるが見返りを期待しない信頼できる友人のようなものです。 forEach() を呼び出すと、配列内の各項目を反復処理し、コールバック関数内で定義したアクションを実行します。

例を示します:

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => {
  console.log(num * 2); // Outputs: 2, 4, 6, 8, 10
});

主な特徴:

• forEach() は何も返しません (未定義)。
• これは主に、コンソールへのログ記録や外部変数の変更などの副作用を実行するために使用されます。

---

map() を入力してください: トランスフォーマー

map() はクリエイティブな兄弟であり、常に変換について考え、新しいものを返します。 map() を使用すると、ただ反復されるだけではなく、コールバック関数の変換ロジックに基づいて新しい配列が生成されます。

次の例を見てください:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Outputs: [2, 4, 6, 8, 10]

主な特徴:

• map() は常に元の配列と同じ長さの新しい配列を返します。
• 元の配列を変更せずにデータを変換するのに最適です。

---

違いを単純化する

どちらのメソッドも配列を反復処理するように設計されていますが、目的は大きく異なります。

• forEach() は、外部変数のログ記録や更新などの副作用を実行するために使用されます。何も返されません。
• map() はデータの変換に使用されます。元の配列は変更せずに、変換された値を含む新しい配列を返します。

---

forEach() を使用する場合

ToDo アプリを構築しているとします。リストをデバッグするために、各タスクをコンソールに記録したいと考えています。ここでは、forEach() が頼りになります。

const todos = ['Buy groceries', 'Clean the house', 'Write code'];
todos.forEach(task => console.log(task));

このシナリオでは、変換された結果を必要とせずに副作用 (ロギング) を実行しています。

---

マップを使用する場合()

API からユーザー データを取得し、バックエンドがユーザー オブジェクトの配列を返すと想像してください。表示用にユーザー名の配列を作成する必要があります。ここでmap()が活躍します:

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => {
  console.log(num * 2); // Outputs: 2, 4, 6, 8, 10
});

現実世界の例え

forEach() は、近所の人全員にチラシを配布するヘルパーと考えてください。彼らは結果に関係なく、タスクを完了することに集中しています。一方、map() は、各人向けにカスタマイズされたチラシを作成するデザイナーのようなもので、インタラクションごとに美しく作成された結果を返します。

注意事項

forEach() は簡単ですが、過度に使用すると、変換が含まれる場合にコードの保守が困難になる可能性があります。同様に、map() を誤って使用して副作用 (ロギングなど) を実行することは、変換を目的としているため推奨されません。

---

最終的な考え

map() と forEach() のどちらを選択するかは、目的によって異なります。変換に重点を置き、新しい配列が必要な場合は、map() が味方になります。ただし、データを変更または作成せずにアクションを実行することが目標の場合は、forEach() を使用してください。

各メソッドの長所を理解することで、よりクリーンで効率的なコードを作成でき、より自信を持った JavaScript 開発者になることができます。さて、次のプロジェクトではどの兄弟と最初に友達になるでしょうか?

---

読んでいただけましたか?この記事が洞察力に富んだ、または役に立ったと思われた場合は、コーヒーをおごって私の仕事を支援することを検討してください。あなたの貢献は、このようなコンテンツをさらに増やすのに役立ちます。ここをクリックしてバーチャルコーヒーをごちそうしてください。乾杯！

以上がMap と forEach: JavaScript 開発者のための主要な違いを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。