iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 9
0
Modern Web

那些年,我們一起錯過的Javascript系列 第 9

Day09_Array的迭代方法

Array Magic Part 2

Array常見的用法來到第二Part,而今天就要介紹最後一段Magic,也就是Iteration methods。這部分主要會講到五個我比較常看到的method,分別是 filter(),forEach(),map(),reduce(),some()
記得大家一樣要吃完早餐再來看,元氣的一天就從早餐開始阿 !

filter

filter主要去篩選出符合callback Function條件的元素

syntax - var newArray = arr.filter(callback[, thisArg])

https://ithelp.ithome.com.tw/upload/images/20171228/20107670BC6sEcHqey.png

  • filter內的參數是一個callback function,array內的每一個elements都會套用到這個function裡面。
  • 如果回傳是True的elements會保留,為False的elements則會被剔除。
  • 最後filter回傳一個新陣列,陣列裡的內容就是被保留下來的element。
  • filter是不會影響原陣列的內容的。
  • callback Function內的參數依序為原Array的(element, index, array)

forEach

forEach其實就是簡易的for迴圈,將每一個element套入在參數提供的function。

syntax - array.forEach(function callback(currentValue[, index[, array]]) {
//your iterator
}[, thisArg]);

https://ithelp.ithome.com.tw/upload/images/20171228/20107670FlysGfzg14.png

  • forEach主要也是丟進一個function,讓Array每一個元素做動作。
  • callback Function內的參數依序為原Array的(element, index, array)
  • 注意到ForEach並 不回傳任何東西

map

map跟forEach很像,都是將每一個元素丟入所提供的function裡面,但特別注意到,map是有回傳一個新array的

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// Return element for new_array
}[, thisArg])

https://ithelp.ithome.com.tw/upload/images/20171228/20107670OW1QjSruHF.png

  • 與forEach最大的差別就在剛剛提到過的,map會 回傳一個新的陣列

some & every

some是來check Array內是否至少有一個元素滿足function的條件。
every則是是check Array內每一個元素滿足function的條件。

syntax - array.some(callback[, thisArg])
syntax - array.every(callback[, thisArg])

https://ithelp.ithome.com.tw/upload/images/20171228/201076703tl3RteBqZ.png

  • some & every不會影響到原Array的內容。
  • some & every最後會回傳Boolean值回來。
  • callback Function內的參數依序為原Array的(element, index, array)

reduce

reduce跟上述幾個method的差異滿多的,其機制是可以將上一個回傳的值再拿來做計算。

syntax - array.reduce(callback[, initialValue])

https://ithelp.ithome.com.tw/upload/images/20171228/20107670tVusNdIiGD.png

  • callback Function內的參數依序為(accumulator,currentValue, currentIndex, array)
  • accumulator是用來存放前一次return的值,若無指定初始值則為0,若指定值,則一開始則為指定的值在做每個元素的計算。
  • 實際行為callback Function總共被呼叫了四次

| callback | accumulator | currentValue | currentIndex | array | return value |
| ------| ------ | ------ || ------ || ------ || ------ |
| 1st | 0 || 4|| 0 || [4, 5,7,8] || 4 |
| 2nd | 4 | 5 || 1 || [4, 5,7,8] || 9 |
| 3rd | 9 | 7 || 2 || [4, 5,7,8] || 16 |
| 4th | 16 | 8 || 3 || [4, 5,7,8] || 24 |

碎碎念時間

以上包含今天的文章,Array的內容就正式介紹完了,其實之前還在猶豫要不要一個一個這樣介紹Method,一開始是認為這些基本的Method看一看文件就大概會用了,但後來想想,其實method中都有一些細節容易遺忘,例如有沒有真的動到原Array,或者method 回傳的是什麼,諸如此類的小問題,後來還是決定一個一個介紹,雖然可能會有錯誤就是,還希望大家海涵。

參考來源

  1. MDN Javascript

上一篇
Day08_還是要Array一下
下一篇
Day10_值的存取
系列文
那些年,我們一起錯過的Javascript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
fillano
iT邦超人 1 級 ‧ 2017-12-28 17:51:49

漏了reduceRight?

挖阿阿阿阿 感謝大神提醒QQ 未來有機會再補~~

我要留言

立即登入留言