Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

JavaScript辞典

  1. トップページ
  2. JavaScript辞典
  3. 配列.forEach() / map()

配列.forEach() / map()対応: ES5(ECMAScript 2009)

配列の各要素に対して順番に関数を実行するメソッドです。『map()』は実行結果から新しい配列を作成します。

構文
// 配列の各要素に対して関数を実行します。
配列.forEach(function(要素, インデックス, 配列) {
	// 処理
});

// 各要素を変換して新しい配列を作成します。
var newArray = 配列.map(function(要素, インデックス, 配列) {
	return 変換後の値;
});
メソッド一覧
メソッド概要
forEach(関数)配列の各要素に対して関数を1回ずつ実行します。戻り値はありません。途中で処理を中断することはできません。
map(関数)配列の各要素に対して関数を実行し、その戻り値から新しい配列を作成して返します。元の配列は変更されません。
サンプルコード
var numbers = [1, 2, 3, 4, 5];

// forEachで各要素を出力します。
numbers.forEach(function(num, index) {
	console.log(index + ": " + num);
});

// mapで各要素を2倍にした新しい配列を作成します。
var doubled = numbers.map(function(num) {
	return num * 2;
});
console.log(doubled); // 『2,4,6,8,10』と出力されます。
console.log(numbers); // 『1,2,3,4,5』と出力されます。元の配列は変わりません。

// mapで文字列に変換します。
var labels = numbers.map(function(num) {
	return "No." + num;
});
console.log(labels); // 『No.1,No.2,No.3,No.4,No.5』と出力されます。
実行結果
// forEachの出力
"0: 1"
"1: 2"
"2: 3"
"3: 4"
"4: 5"

// mapの結果
[2, 4, 6, 8, 10]    // doubled
[1, 2, 3, 4, 5]     // numbers。元の配列は変わりません。
["No.1", "No.2", "No.3", "No.4", "No.5"]  // labels
概要

『配列.forEach()』と『配列.map()』はどちらも配列の各要素に対して関数を実行するメソッドですが、目的が異なります。『配列.forEach()』は単純にループ処理を行うためのメソッドで、戻り値はありません。一方『配列.map()』は各要素を変換して新しい配列を作成するためのメソッドで、元の配列は変更されません。

コールバック関数には3つの引数が渡されます。第1引数は現在の要素の値、第2引数はインデックス番号、第3引数は配列そのものです。第2引数と第3引数は省略可能で、必要なければ記述する必要はありません。

『配列.forEach()』はfor文と違い、途中で処理を中断する手段がありません。『break』文は使用できず、『return』文は現在の繰り返しをスキップするだけです。条件に一致した時点で処理を中断したい場合はfor文を使用するか、『配列.some()』の使用を検討してください。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。