JavaScript高階函式的使用

filter函式

1. filter中的回撥函式有一個要求：必須返回一個boolean值
2. true：當返回為true時，函式內部會自動將這次回撥的引數n加入到新的陣列中
3. false：當返回為false的時候，函式內部會自動過濾掉這次的n值
4. 注意：filter函式執行的次數跟陣列物件的長度(length)對等
5. filter函式不會改變原陣列 而是建立一個新的陣列

const num=[10,20,30,78,111,456]
//要篩選出陣列中小於100的元素
//注意 回撥引數裡面的n代表原數組裡面的元素  每個元素依次進行判斷
//比較結果為true時 Vue會將其加入一個新的陣列 否則將這個元素過濾掉
let newNum=num.filter(function (n) {
  return n<100
})
console.log(num) //原陣列 [10, 20, 30, 78, 111, 456]
console.log(newNum);  //新陣列 [10, 20, 30, 78]
 

map函式

1. 定義在JavaScript中的陣列物件(Array)中，也是返回一個新的陣列，陣列中的元素為原始陣列呼叫函式處理後的值
2. map 函式不會對空陣列進行檢測
3. map函式不會改變原陣列，而是建立一個新的陣列
4. map函式主要作用是對陣列中的元素進行一些相同的變化然後返回新的陣列

例如：對上面過濾後的陣列進行每個元素都變為自己的2倍的處理

//原陣列為 [10, 20, 30, 78]
let new2Num = newNum.map(function (n) {
  return n * 2
})
console.log(new2Num); //[20, 40, 60, 156]

reduce函式

1. reduce函式接收一個函式作為函式累加器，陣列中的每個值(從左到右)開始縮減，最終計算為一個值，對空函式是不會執行回撥函式的。

• 計算陣列總和(這裡計算上一步經過map處理的陣列)

/*這裡的n還是原陣列中的元素 preValue是上一次函式回撥所返回的值
可以知道這裡的reduce共執行的次數跟原陣列的次數等同，這裡第一次執行回撥函式functionpreValue為初始值0
經過執行preValue+n後將新的值返回給preValue  如此執行 reduce才能完成陣列的累加操作*/
//原陣列為[20, 40, 60, 156]
let new3Num = new2Num.reduce(function (preValue, n) {
  return preValue + n
}, 0)
//沒有初始值initialValue(即上面一行中的0，當陣列為空時，會丟擲異常提示reduce沒有初始值，所以為相容性一般加上initialValue作為初始值)
console.log(new3Num); //276