forEach

forEachは引数に与えられた関数を各要素に対して1度ずつ実行する。

これを利用することにより、今までfor文を使用していたものが、配列の処理がforEachで簡単に記述することが可能になった。

/* for文での書き方 */
let colors = [ 'red', 'blue', 'green'];

for (let i = 0; i < colors.length; i++) {
    console.log('for:' + colors[i]);
}

/* forEach文での書き方 */
var colors = [ 'red', 'blue', 'green'];

colors.forEach( color => {
    console.log('forEach:' + color);
});

// for文の場合の結果
for:red
for:blue
for:green

// forEach文の場合の結果 
forEach:red
forEach:blue
forEach:green

基本的な記述方法

変数（配列）名.forEach(function(引数){

//処理

});

引数にはコールバック（callback）が入り、配列の各要素に対して昇順で処理を行う。

アロー関数を使用して書くことも可能、その場合は下記のようになる

変数（配列）名.forEach(引数 => {
  // 処理
});

 

関数を引数にすることも可能

関数をforEachの引数にすることも可能

// 数字の配列を用意する 
let numbers = [1, 2, 3, 4, 5] 

// 合計を保持する変数を用意する 
let sum = 0; 

// 配列の一つ一つの数字を合計に足す 
numbers.forEach(function(number){ 
  sum += number; 
});

// 数字の配列を用意する 
let numbers = [1, 2, 3, 4, 5] 

// 合計を保持する変数を用意する 
let sum = 0; 

// 足し算をする関数 
function adder(number){ 
  sum += number; 
}; 

// 関数をforEachの引数に 
numbers.forEach(adder);

配列に代入する際の振る舞い

代入するにはpush()メソッドを使用する。

const images = [
  { height: 10, width: 30 },
  { height: 20, width: 90 }, 
  { height: 54, width: 32 }
]; 

let areas = [];

// areasに対して計算結果を格納する 
// 配列に格納するにはpushを使用する 
images.forEach(function(image){ 
  areas.push(image.height * image.width); 
});