ForEachとMapは同じ？
CoddyのJavaScriptジャーニー「論理とフロー」セクションの一部 — レッスン 56/65。
forEach() と map() はどちらも反復処理に使用される配列メソッドですが、それぞれ異なる目的を持ち、動作も異なります：
forEach():
- 各配列要素に対して、提供された関数を一度ずつ実行します。
- 新しい配列を作成しません。
undefinedを返します。- 他の配列メソッドとチェーンさせることはできません。
map():
- 配列のすべての要素に対して、提供された関数を呼び出した結果からなる新しい配列を生成します。
- 元の配列と同じ長さの新しい配列を返します。
- 他の配列メソッドとチェーンさせることができます。
例:
const numbers = [1, 2, 3, 4];
// forEach
numbers.forEach(num => console.log(num * 2));
// 出力: 2, 4, 6, 8
// 戻り値: undefined// map
const doubled = numbers.map(num => num * 2);
console.log(doubled);
// 出力: [2, 4, 6, 8]
// 戻り値: 新しい配列 [2, 4, 6, 8]新しい配列を作成せずに、各要素に対して操作を実行したい場合は、forEach() を使用します。各要素を変換し、その結果で新しい配列を作成したい場合は、map() を使用します。
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
チートシート
forEach() と map() はどちらも反復処理に使用される配列メソッドですが、目的が異なります：
forEach():
- 各配列要素に対して一度関数を実行します
- 新しい配列を作成しません
undefinedを返します- 他の配列メソッドとチェーン（連結）させることはできません
map():
- すべての要素に対して関数を呼び出した結果を含む新しい配列を作成します
- 元の配列と同じ長さの新しい配列を返します
- 他の配列メソッドとチェーンさせることができます
const numbers = [1, 2, 3, 4];
// forEach - 操作を実行し、undefined を返す
numbers.forEach(num => console.log(num * 2));
// map - 要素を変換し、新しい配列を返す
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]新しい配列を作成せずに操作を行う場合は forEach() を使用します。要素を変換して新しい配列を作成する場合は map() を使用します。
自分で試してみよう
このレッスンにはコードチャレンジは含まれていません。
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
