JS中reduce方法

hope93發表於2019-01-17
JS

定義和用法

  1. reduce() 方法接收一個函式作為累加器，陣列中的每個值（從左到右）開始縮減，最終計算為一個值。
  2. reduce() 可以作為一個高階函式，用於函式的 compose
  3. reduce() 對於空陣列是不會執行回撥函式的

瀏覽器支援

支援谷歌、火狐、ie9以上等主流瀏覽器

語法

array.reduce(function(prev, current, currentIndex, arr), initialValue)
  1. prev：函式傳進來的初始值或上一次回撥的返回值
  2. current：陣列中當前處理的元素值
  3. currentIndex：當前元素索引
  4. arr：當前元素所屬的陣列本身
  5. initialValue：傳給函式的初始值

初始值為數值：

       const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
       const sum = arr.reduce(function (prev, current) {
         return prev+current
       }, 0)
       console.log(sum) //55

reduce根據函式傳進來的初始值，不斷回撥疊加最終算出陣列的和

初始值為物件：

      const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
       const sum = arr.reduce(function (prev, current) {
         prev.count = prev.count+current
         return prev
       }, {count: 0})
       console.log(sum) //{count: 55}

如果初始值為物件的話，返回的也是一個物件

初始值為陣列：

      const str = `hello`
      const newstr = str.split(``).reduce(function (prev, current) {
         const obj = {};
         obj[current] = current;
         prev.push(obj)
         return prev;
      }, [])
      console.log(newstr)

結果為：

    [{
        h: `h`
      },{
        e: `e`
      },{
        l: `l`
      },{
        l: `l`
      },{
        o: `o`
      }]

如果初始值為陣列，則返回的也是陣列

reduce應用：

    {
      function func1(a) {
        return a*10;
      }

      function func2(b) {
        return b*2
      }

      const test1 = func1(2)
      const test2 = func2(test1)
      console.log(test2) //40
    }

這裡我們需要先執行方法func1再根據func1返回的值，然後執行方法func2，我們有時候會碰到不止兩個方法一起，如果是多個呢，這個時候就要用到reduce來處理了

     function func1(a) {
        return a*10;
      }

      function func2(b) {
        return b*2
      }

      function func3(c) {
        return c/2;
      }
      const compose = (...func) => (...init) => {
          if(func.length >= 2){
            return func.reduce((prev, curr)=>{
               prev = curr(prev)
               return prev;
            }, ...init)
          }
          return func(...init);
      }

      const a1 = compose(func1,func2)(2);
      console.log(a1) //40
      const a2 = compose(func1,func2,func3)(2);
      console.log(a2) //20

相關文章