JS 迴圈升級的陣列 Array 方法 forEach()

Day 31

別一張張的發傳單，宣傳什麼折扣吧！NewsLetters 鍵按寄出一次搞定，像迭代一樣。

前幾篇我們聊到了 ECMAScript 5 的陣列方法，聊到這些方法都有迭代（iterating）的特色，也就是把我們想要執行的函式，從頭到尾逐一（iterates through）的把陣列裡的元素帶進去這個函式處理一遍，forEach()便是我們會常用的方法之一。

我們直接看看在大犀牛裡的範例，直接以forEach()取陣列的值來相加：

let data = [1, 2, 3, 4, 5];
let sum = 0;
data.forEach(function(value) {
  sum += value;
});
sum; // 15

或是為每個陣列元素遞增，而原陣列也會因為forEach()所帶入的函式而改變原有的陣列。

data.forEach(function(value, index, array) {
  array[index] = value + 1;
});
data; // [2, 3, 4, 5, 6]

Array.prototype.forEach() - JavaScript | MDN
原型： Array.prototype.foreach()
功能： 對陣列的每個元素執行一次提供的函數。
改變： 不會直接改變原陣列，但可能會依帶入的函式而改變。
語法： arr.forEach(callback[, thisArg]);
回傳值： undefined。
參數： callback 函式與 thisArg

我們來看一下forEach()較完整的語法：

1
2
3

arr.forEach(function callback(currentValue[, index[, array]]) {
    //your iterator
}[, thisArg]);

forEach()本身可帶兩個參數，第一個是必須的 callback 函式，第二個參數 thisArg 是可選擇性的。這個 callback 函式會將 Array 中的每一個元素作為參數，帶進這個 callback 函式裡，每個元素各執行一次。

而第一個 callback 函式則可傳入三個參數：

currentValue 目前被處理的陣列元素值
index 目前被處理的陣列元素索引(可選)
array 呼叫 forEach()陣列本身(可選)

如果我們只需要陣列的值，也可寫成只有一個參數的函式，其他的會被忽略。

forEach()的第二個參數thisArg是可選擇性的，如果有這個參數，它就會被作為 callback 回呼函式每次被調用的 this 的值。需要注意的是 callback 函式，如果是箭頭函式，則在創建該函數時已按詞法綁定，因此 thisArg 不會起作用。

我們來看一下例子：

let arr = [5, 10, 20, 30];
// 沒有第二參數 thisArg
let sum = 0;
[1, 2, 3].forEach(function(x) {
  sum += x;
});
console.log(sum); // 6

// 有第二參數 thisArg
[1, 2, 3].forEach(function(x) {
  console.log(this);
}, arr); // this ->obj
/* 
[ 5, 10, 20, 30 ]
[ 5, 10, 20, 30 ]
[ 5, 10, 20, 30 ]
*/

因為 callback 函式的第二個參數，會改變 scop 範疇、改變 this 的值，也就是這個函式裡的arr，也因此會印出三次參數thisArg的arr。

在真實的情境裡我們比較少用到 callback 函式的第二個參數，在「Secrets of the JavaScript Ninja」忍者這本書的第四章有更詳盡的說明。

如有需要改進的地方，拜託懇求請告知，我會盡量快速度修改，感謝您～