iT邦幫忙

第 11 屆 iThome 鐵人賽

2
自我挑戰組

JavaScript之一定要了解的 Array 與方法系列 第 31

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()較完整的語法:

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不會起作用。

我們來看一下例子:

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」忍者這本書的第四章有更詳盡的說明。

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


上一篇
JS 陣列 Array 之小菜還沒出完
下一篇
# 非常彈性好用的陣列 Array 方法 map()
系列文
JavaScript之一定要了解的 Array 與方法34
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
stanlywow
iT邦新手 5 級 ‧ 2019-11-07 08:59:48

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

抱歉~這個好像打錯了XD

tsuifei iT邦新手 4 級 ‧ 2019-11-07 15:29:03 檢舉

哈哈~
謝謝你,的確,每次輸入函式都會變成以為喜歡吃泡菜的{韓式}
馬上更正,謝謝~

我要留言

立即登入留言