JS中的高級函數

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