【Day16】forEach資料處理方法

tags: JavaScript 14th鐵人賽

在陣列中，若需要訪問組數中的每個元素可以使用for迴圈完成，而本篇將介紹更有效的執行方式高階函式forEach進行資料處理。

• 陣列使用for迴圈索引值
• forEach介紹，使用方式

---

先說說什麼式高階函數(higher order function)
取自維基百科
在數學和計算機科學中，高階函數是至少滿足下列一個條件的函數：

• 接受一個或多個函數作為輸入
• 輸出一個函數
  function是物件的一種，將他指定為變數，並帶入其他函式中，簡單說就是函數可以當作變數來用。

用for迴圈讀取陣列

var dogs = ["芒狗", "奇異狗", "蘋狗"];

// 此時的i為全域變數
for (var i = 0; i < dogs.length; i++) {
    dogs[i] += "是一種小狗";
    let item = dogs[i];
		console.log(item);
}

此時的for loop 可能會產生全域變數 在ES6後則可使用let及const來解決作用域的問題。

使用forEach時可以用更簡短的寫法達到相同的效果，以下將會介紹其寫法及注意內容。

forEach

若同樣的情況使用forEach完成

var dogs = ["芒狗", "奇異狗", "蘋狗"];
dogs.forEach(function(item) {
  console.log(`${item}是一種小狗`);
});

語法使用

大多情況下較長使用到前兩個參數item、index

let data = [data1,data2,data3];
data.forEach(function(item, index, array){ 
	/*
	依陣列資料長度決定function跑幾次 而其中參數名稱也可以作替換
	item  值-取出陣列中的元素
	index 索引-在陣列中的第幾筆資料
	array 整個陣列內容
	*/ 
	console.log(item,index,array) 
})

只能從頭開始訪問每個元素，若遇特定數值須中斷時可改用for loop讀取陣列並加上break

再使用三個參數的範例說明

words = ["dog", "on", "carpet"];
words.forEach(function(word, num, all) {
  console.log("Word " + num + " in " + all.toString() + " is " + word);
});
/*
Word 0 in dog,on,carpet is dog
Word 1 in dog,on,carpet is on
Word 2 in dog,on,carpet is carpet
*/
/*
word 取出陣列中的元素內容
num 取出陣列中的元素次序
all 整筆陣列內容
*/

forEach也可以用return嗎?

forEach() 不返回任何內容，若嘗試使用return返回值，將得到undefined

let a = [1, 2, 3];
a.forEach(function(item, index, array){
	return item*2;
	console.log(a);
});

下一篇將會介紹可以使用return並且不會改變原陣列的map( )若本篇介紹有任何問題歡迎指教~