JS中reduce方法

yuanxin 發布于2019-08-23 14:47 / 1715人閱讀

摘要：定義和用法方法接收一個函數作為累加器，數組中的每個值從左到右開始縮減，最終計算為一個值。

定義和用法

reduce() 方法接收一個函數作為累加器，數組中的每個值（從左到右）開始縮減，最終計算為一個值。

reduce() 可以作為一個高階函數，用于函數的 compose

reduce() 對于空數組是不會執行回調函數的

瀏覽器支持

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

語法

array.reduce(function(prev, current, currentIndex, arr), initialValue)

prev：函數傳進來的初始值或上一次回調的返回值

current：數組中當前處理的元素值

currentIndex：當前元素索引

arr：當前元素所屬的數組本身

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

云服務器 GPU云服務器 reduce方法數組方法reduce js中數據排序方法 js方法中變量前置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101148.html

JS進階篇--JS數組reduce()方法詳解及高級技巧

摘要：基本概念方法接收一個函數作為累加器，數組中的每個值從左到右開始縮減，最終為一個值。例進階應用使用方法可以完成多維度的數據疊加。在該函數內部，則執行多維的疊加工作。參考的內建函數數組方法的高級技巧基本概念 reduce() 方法接收一個函數作為累加器（accumulator），數組中的每個值（從左到右）開始縮減，最終為一個值。 reduce 為數組中的每一個元素依次執行回調函數，不包括...

jerryloveemily 2019-08-21 12:00 評論0 收藏0
JS的內建函數reduce

摘要：函數，是規范中出現的數組方法。所有的一切通過一個函數來管理流程和傳遞初始參數。上面就是函數的實現，它需要對象作為參數，并返回一個類型的函數，作為的第一個參數。在該函數內部，則執行多維的疊加工作。 @(js) reduce函數，是ECMAScript5規范中出現的數組方法。在平時的工作中，相信大家使用的場景并不多，一般而言，可以通過reduce方法實現的邏輯都可以通過forEach方法來...

mrcode 2019-08-19 17:43 評論0 收藏0
reduce 方法實現 webpack 多文件入口

摘要：這篇日志，在開始接觸時候就該寫了，現在發布也許對一些剛入此坑的童鞋能些許幫助。。。這篇日志，在開始接觸 webpack 時候就該寫了，現在發布也許對一些剛入此坑的童鞋能些許幫助。。。即使有點 low，重要的仍是分享 1. reduce 方法介紹 1.1 簡單場景 reduce 函數的設計意圖就是方便進行疊加運算： var arr = [0, 1, 2, 3]; // reduce ...

Little_XM 2019-08-20 15:59 評論0 收藏0
React 和 Redux 的動態導入

摘要：動態導入使用的是的方法來加載代碼。使用到目前為止，我們已經演示了如何動態加載應用程序的模塊。還需要公開一個名稱，在該名稱下我們的模塊狀態將存在于應用程序的中。剩下的唯一部分就是把注冊到中。 showImg(https://segmentfault.com/img/bVbpGXm?w=800&h=450); 想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！代碼分離與...

jayzou 2019-08-23 16:16 評論0 收藏0
Redux 源碼拾遺

摘要：循環還沒有結束，其中的某個對進行了添加或者刪除，都會影響到此次循環的進行，帶來不可預期的錯誤。首先來一段 redux 結合中間件 thunk、logger 的使用demo 了解一下應該如何使用 const redux = require(redux) const { createStore, combineReducers, bindActionCreators, ...

CloudwiseAPM 2019-08-02 16:11 評論0 收藏0