0%

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

Day 31

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

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

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

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

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

1
2
3
4
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 函式則可傳入三個參數:

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

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

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

我們來看一下例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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,也因此會印出三次參數thisArgarr

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

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