配列.forEach() / map()

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

// 各要素を変換して新しい配列を作成します。
var newArray = 配列.map(function(要素, インデックス, 配列) {
	return 変換後の値;
});

sample_forEach.js

// パターン1: forEachでインデックスと要素を出力する
var numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(num, index) {
	console.log(index + ": " + num);
});

// パターン2: 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』と出力されます。元の配列は変わりません。

// パターン3: オブジェクト配列に対してforEachを使う
var fighters = [
	{ name: "孫悟空", power: 9000 },
	{ name: "ベジータ", power: 8500 },
	{ name: "ピッコロ", power: 3500 }
];
fighters.forEach(function(fighter) {
	console.log(fighter.name + ": 戦闘力 " + fighter.power);
});

// パターン4: mapでオブジェクト配列の特定プロパティだけを取り出す
var names = fighters.map(function(fighter) {
	return fighter.name;
});
console.log(names); // 『孫悟空,ベジータ,ピッコロ』と出力されます。

// パターン5: mapで新しいプロパティを加えたオブジェクト配列を生成する
var labeled = fighters.map(function(fighter, index) {
	return { rank: index + 1, name: fighter.name, power: fighter.power };
});
console.log(labeled[0]); // 『{rank: 1, name: "孫悟空", power: 9000}』と出力されます。

0: 1
1: 2
2: 3
3: 4
4: 5
[ 2, 4, 6, 8, 10 ]
[ 1, 2, 3, 4, 5 ]
孫悟空: 戦闘力 9000
ベジータ: 戦闘力 8500
ピッコロ: 戦闘力 3500
[ '孫悟空', 'ベジータ', 'ピッコロ' ]
{ rank: 1, name: '孫悟空', power: 9000 }

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

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

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