JS筆記 | 常用的陣列方法:forEach()、map()、filter()

練習寫程式一段時間後,發現陣列真的常拿來存放各變數資料,但由於還不夠熟悉,所以要將資料拿出來做一些事情時,都會卡住,馬上向 chatGPT 求救,經過一陣子後,發現常用的陣列方法大概就那些,且也真的很好用,不用什麼事都靠自己想!

好用的陣列方法,事半功倍

這次要筆記的就是:

陣列方法 Array Methods

array_method_cover
攝影師:Lex Photography

1. forEach()

說明:

幫你把陣列中的每一個元素值都拿出來,讓你可以對元素值去做一些你希望它做的事,但它不會傳回任何東西,只是單純的去做你指定的操作

  • 用 forEach() 就可以不用 for 迴圈,寫法簡潔很多,只是不能像 for 迴圈在中間用 break 去終止操作
  • forEach() 裡面可以放三個參數,分別為「元素值 ( element )、元素值的索引位置 ( index )、陣列本身 ( array )」,這三個參數名稱可以自定義,index 和 array 不需要就可以不寫,但如果需要就一定要按照順序放

寫法:

array.forEach(function(element, index, array){
	...
})

範例:

將陣列裡面所有的元素值加總起來放在變數 sum

→ forEach() 寫法

1.forEach

→ for 迴圈寫法

2.for

2. map()

說明:

跟 forEach() 很像,它也是會幫你把陣列中的每個元素值都拿出來,讓你可以對元素值去做一些你希望它做的事,但是跟 forEach() 不一樣的是,map() 會把每個執行操作後的元素值,重新組成一個新陣列,並回傳出來,也不會改變到原本的陣列,所以用 map() 時,除非用箭頭函式,否則一定要記得寫 return

  • map() 裡面可以放三個參數,分別為「元素值 ( element )、元素值的索引位置 ( index )、陣列本身 ( array )」,這三個參數名稱可以自定義,index 和 array 不需要就可以不寫,但如果需要就一定要按照順序放

寫法:

array.map(function(element, index, array){
	return ...
})

範例:

將陣列裡面所有的元素值都+1,並回傳新陣列

3.map

到這邊,應該會覺得這二個方法很像

那何時要使用 map()、何時使用 forEach()?

對陣列的每個元素執行操作時,希望 「回傳一個新陣列」 就用 map()
否則用 forEach()

3. filter()

說明:

把陣列每一個元素時都拿出來做判斷,有符合條件的會留下來,不符合的會踢掉,然後將符合的元素值重新組成一個新陣列,並回傳出來, filter() 並不會改變到原本的陣列,所以被踢掉的元素值不用太擔心,它還是在原本的陣列裡。因為有回傳,所以一樣使用filter()時,除非用箭頭函式,否則一定要記得寫 return

簡單來說,filter() 就是篩選陣列,只取出自己要的元素值

  • filter() 裡面可以放三個參數,分別為「元素值 ( element )、元素值的索引位置 ( index )、陣列本身 ( array )」,這三個參數名稱可以自定義,index 和 array 不需要就可以不寫,但如果需要就一定要按照順序放

寫法:

array.filter(function(element, index, array){
	return 條件判斷...
})

範例:

將陣列裡面為偶數的元素值篩選出來,並回傳新陣列

4.filter

參考:

https://www.tenlong.com.tw/products/9789865027322 ( 書籍 )

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *