1. 程式人生 > 實用技巧 >JS中的三個高階函式

JS中的三個高階函式

1 filter過濾函式

const nums = [2,3,5,1,77,55,100,200]
//要求獲取nums中大於50的數
//回撥函式會遍歷nums中每一個數,傳入回撥函式,在回撥函式中寫判斷邏輯,返回true則會被陣列接收,false會被拒絕
let newNums = nums.filter(function (num) {
  if(num > 50){
    return true;
  }
  return false;
 })
 //可以使用箭頭函式簡寫
//  let newNums = nums.filter(num => num >50)

filter() 方法建立一個新的陣列,新陣列中的元素是通過檢查指定陣列中符合條件的所有元素。

注意: filter() 不會對空陣列進行檢測。

注意: filter() 不會改變原始陣列。

2 map高階函式

// 要求將已經過濾的新陣列每項乘以2
//map函式同樣會遍歷陣列每一項,傳入回撥函式為引數,num是map遍歷的每一項,回撥函式function返回值會被新增到新陣列中
let newNums2 = newNums.map(function (num) {
  return num * 2
 })
 //簡寫
//  let newNums2 = newNums.map(num => num * 2)
console.log(newNums2);

map() 方法返回一個新陣列,陣列中的元素為原始陣列元素呼叫函式處理後的值。

map() 方法按照原始陣列元素順序依次處理元素。

注意: map() 不會對空陣列進行檢測。

注意: map() 不會改變原始陣列。

3 reduce高階函式

// 3.reduce高階函式
//要求將newNums2的陣列所有數累加
//reduce函式同樣會遍歷陣列每一項,傳入回撥函式和‘0’為引數,0表示回撥函式中preValue初始值為0,回撥函式中引數preValue是每一次回撥函式function返回的值,currentValue是當前值
//例如陣列為[154, 110, 200, 400],則回撥函式第一次返回值為0+154=154,第二次preValue為154,返回值為154+110=264,以此類推直到遍歷完成
let newNum = newNums2.reduce(function (preValue,currentValue) {
  return preValue + currentValue
 },0)
//簡寫
// let newNum = newNums2.reduce((preValue,currentValue) => preValue + currentValue)
console.log(newNum);

reduce() 方法接收一個函式作為累加器,陣列中的每個值(從左到右)開始縮減,最終計算為一個值。

reduce() 可以作為一個高階函式,用於函式的 compose。

注意: reduce() 對於空陣列是不會執行回撥函式的。

5.4綜合使用

//三個需求綜合
let n = nums.filter(num => num > 50).map(num => num * 2).reduce((preValue,currentValue) => preValue + currentValue)
console.log(n);