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

快速尋找
1. forEach()
說明:
幫你把陣列中的每一個元素值都拿出來,讓你可以對元素值去做一些你希望它做的事,但它不會傳回任何東西,只是單純的去做你指定的操作
- 用 forEach() 就可以不用 for 迴圈,寫法簡潔很多,只是不能像 for 迴圈在中間用 break 去終止操作
- forEach() 裡面可以放三個參數,分別為「元素值 ( element )、元素值的索引位置 ( index )、陣列本身 ( array )」,這三個參數名稱可以自定義,index 和 array 不需要就可以不寫,但如果需要就一定要按照順序放
寫法:
array.forEach(function(element, index, array){
...
})
範例:
將陣列裡面所有的元素值加總起來放在變數 sum
→ forEach() 寫法

→ for 迴圈寫法

2. map()
說明:
跟 forEach() 很像,它也是會幫你把陣列中的每個元素值都拿出來,讓你可以對元素值去做一些你希望它做的事,但是跟 forEach() 不一樣的是,map() 會把每個執行操作後的元素值,重新組成一個新陣列,並回傳出來,也不會改變到原本的陣列,所以用 map() 時,除非用箭頭函式,否則一定要記得寫 return
- map() 裡面可以放三個參數,分別為「元素值 ( element )、元素值的索引位置 ( index )、陣列本身 ( array )」,這三個參數名稱可以自定義,index 和 array 不需要就可以不寫,但如果需要就一定要按照順序放
寫法:
array.map(function(element, index, array){
return ...
})
範例:
將陣列裡面所有的元素值都+1,並回傳新陣列

到這邊,應該會覺得這二個方法很像
那何時要使用 map()、何時使用 forEach()?
對陣列的每個元素執行操作時,希望 「回傳一個新陣列」 就用 map()
否則用 forEach()
3. filter()
說明:
把陣列每一個元素時都拿出來做判斷,有符合條件的會留下來,不符合的會踢掉,然後將符合的元素值重新組成一個新陣列,並回傳出來, filter() 並不會改變到原本的陣列,所以被踢掉的元素值不用太擔心,它還是在原本的陣列裡。因為有回傳,所以一樣使用filter()時,除非用箭頭函式,否則一定要記得寫 return
簡單來說,filter() 就是篩選陣列,只取出自己要的元素值
- filter() 裡面可以放三個參數,分別為「元素值 ( element )、元素值的索引位置 ( index )、陣列本身 ( array )」,這三個參數名稱可以自定義,index 和 array 不需要就可以不寫,但如果需要就一定要按照順序放
寫法:
array.filter(function(element, index, array){
return 條件判斷...
})
範例:
將陣列裡面為偶數的元素值篩選出來,並回傳新陣列

參考: