JS中reduce方法

yuanxin 发布于2019-08-23 14:47 / 1788人阅读

摘要：定义和用法方法接收一个函数作为累加器，数组中的每个值从左到右开始缩减，最终计算为一个值。

定义和用法

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方法中变量前置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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