iT邦幫忙

2022 iThome 鐵人賽

DAY 16
0

在陣列中,若需要訪問組數中的每個元素可以使用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後則可使用letconst來解決作用域的問題。

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

forEach

若同樣的情況使用forEach完成

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

語法使用

大多情況下較長使用到前兩個參數itemindex

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( )若本篇介紹有任何問題歡迎指教~


上一篇
【Day15】陣列array-常見方法array methods
下一篇
【Day17】map()陣列處理的好方法 !
系列文
喜歡打程式嗎?從JavaScript基礎來進行興趣初探!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言