资讯专栏INFORMATION COLUMN

JS中reduce方法

yuanxin / 1673人阅读

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

定义和用法

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

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

转载请注明本文地址:https://www.ucloud.cn/yun/101148.html

相关文章

  • JS进阶篇--JS数组reduce()方法详解及高级技巧

    摘要:基本概念方法接收一个函数作为累加器,数组中的每个值从左到右开始缩减,最终为一个值。例进阶应用使用方法可以完成多维度的数据叠加。在该函数内部,则执行多维的叠加工作。参考的内建函数数组方法的高级技巧 基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。 reduce 为数组中的每一个元素依次执行回调函数,不包括...

    jerryloveemily 评论0 收藏0
  • JS的内建函数reduce

    摘要:函数,是规范中出现的数组方法。所有的一切通过一个函数来管理流程和传递初始参数。上面就是函数的实现,它需要对象作为参数,并返回一个类型的函数,作为的第一个参数。在该函数内部,则执行多维的叠加工作。 @(js) reduce函数,是ECMAScript5规范中出现的数组方法。在平时的工作中,相信大家使用的场景并不多,一般而言,可以通过reduce方法实现的逻辑都可以通过forEach方法来...

    mrcode 评论0 收藏0
  • reduce 方法实现 webpack 多文件入口

    摘要:这篇日志,在开始接触时候就该写了,现在发布也许对一些刚入此坑的童鞋能些许帮助。。。 这篇日志,在开始接触 webpack 时候就该写了,现在发布也许对一些刚入此坑的童鞋能些许帮助。。。即使有点 low,重要的仍是分享 1. reduce 方法介绍 1.1 简单场景 reduce 函数的设计意图就是方便进行叠加运算: var arr = [0, 1, 2, 3]; // reduce ...

    Little_XM 评论0 收藏0
  • React 和 Redux 的动态导入

    摘要:动态导入使用的是的方法来加载代码。使用到目前为止,我们已经演示了如何动态加载应用程序的模块。还需要公开一个名称,在该名称下我们的模块状态将存在于应用程序的中。剩下的唯一部分就是把注册到中。 showImg(https://segmentfault.com/img/bVbpGXm?w=800&h=450); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 代码分离与...

    jayzou 评论0 收藏0
  • Redux 源码拾遗

    摘要:循环还没有结束,其中的某个对进行了添加或者删除,都会影响到此次循环的进行,带来不可预期的错误。 首先来一段 redux 结合 中间件 thunk、logger 的使用demo 了解一下应该如何使用 const redux = require(redux) const { createStore, combineReducers, bindActionCreators, ...

    CloudwiseAPM 评论0 收藏0

发表评论

0条评论

yuanxin

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<