作为一个前端菜鸟,觉得资料比较好,特地分享一下~~

reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。
你一定也和我一样看的有点迷糊,其实reduce接收的就是一个回调函数,去调用数组里的每一项,直到数组结束。
reduce接受一个函数,函数有四个参数,分别是:
     1、上一次的值;
     2、当前值;
     3、当前值的索引;
     4、数组;

var array = [4,5,6,7];
var singleVal = 0;

// 只能在这一行下面写代码
var singleVal = array.reduce(function(previousVal,currentVal){
return previousVal + currentVal;
},0);

这个是求总和的,所有数组的值的和,

分析一下这个结果,这个回调函数共调用了4次,因为第一次没有previousValue,所以直接从数组的第二项开始,一只调用到数组结束。
reduce还有第二个参数,我们可以把这个参数作为第一次调用callback时的第一个参数,上面这个例子因为没有第二个参数,所以直接从数组的第二项开始,如果我们给了第二个参数为5,那么结果就是这样的:
结果应该是 数组的和是 5 + 4 +5 + 6+7 = 27 
第一次调用的previousValue的值就用传入的第二个参数代替,函数被调用了5次,也就是数组的length。
reduce可以帮助我们轻松的完成很多事,除了累加,还有扁平化一个二维数组:
 
没有图啊,嫌麻烦 

关于javascript 的reduce方法的更多相关文章

  1. JavaScript中reduce()方法

    原文  http://aotu.io/notes/2016/04/15/2016-04-14-js-reduce/   JavaScript中reduce()方法不完全指南 reduce() 方法接收 ...

  2. javascript之reduce()方法的使用

    以前看到reduce方法,总是看得我头皮发麻,今天无意间又遇到他了,于是学习了下,接触之后,觉得这个方法还挺好用的,在很多地方都可以派上用场,比如,数组中元素求和.数组去重.求数组中的最大值或最小值等 ...

  3. JavaScript - reduce方法,reduceRight方法 (Array)

    JavaScript - reduce方法 (Array) 解释:reduce() 方法接收一个函数作为累加器(accumulator),数组 中的每个值(从左到右)开始合并,最终为一个值. 语法:a ...

  4. 在JavaScript函数式编程里使用Map和Reduce方法

    所有人都谈论道workflows支持ECMAScript6里出现的令人吃惊的新特性,因此我们很容易忘掉ECMAScript5带给我们一些很棒的工具方法来支持在JavaScript里进行函数编程,这些工 ...

  5. reduce 方法 (Array) (JavaScript)

    对数组中的所有元素调用指定的回调函数.该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供. 语法         array1.reduce(callbackfn[, in ...

  6. JavaScript数组归并方法reduce

    示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...

  7. JavaScript reduce() 方法

    转载:http://www.runoob.com/jsref/jsref-reduce.html  JavaScript Array 对象 实例 计算数组元素相加后的总和: var numbers = ...

  8. JavaScript数组的reduce方法详解

    数组经常用到的方法有push.join.indexOf.slice等等,但是有一个经常被我们忽略的方法:reduce,这个方法简直强大的不要不要的. 我们先来看看这个方法的官方概述:reduce()  ...

  9. Javascript reduce方法

    reduce方法接收一个函数作为累加器,数组中的每个值(从左至右)开始缩减,最终计算为一个值 注意:reduce()对于空数组是不会执行回调函数 语法: array.reduce(function(t ...

随机推荐

  1. hdu1069 Monkey and Banana LIS

    #include<cstdio> #include<iostream> #include<algorithm> #include<queue> #inc ...

  2. form中采用图片作为提交按钮

    <span style="font-size:14px;"><FORM name="formName" action="xxxx&q ...

  3. UML Learning

    在建筑业中,建模是一项经过检验并被广泛接受的工程技术,建立房屋和大厦的建筑模型,能帮助用户得到实际建筑物的印象.在软件建模中也具有同样的作用,建模提供了系统的蓝图. 建模是为了能够更好地理解正在开发的 ...

  4. 5)添加分发参数c,选择控制器

    目录关系:  代码展示: newnewnew.controller.class.php <?php /** * Created by PhpStorm. * User: Interact * D ...

  5. Struts配置文件以Spring的方式实现自定义加载

    在使用struts时,我们需要在web.xml中配置过滤器,同时我们需要配置struts的配置文件路径来加载项目中struts的相关配置信息.如果我们不配置路径的话,Struts会有一些默认的加载路径 ...

  6. VDMA搭建视频通路总结

    全局观查,对整个工程的搭建的关键是要保证PL部分搭建成功,PS部分搭建成功,而且两者配合的很好. 我理解的PL部分涉及到模块的组合以及模块或者IP之间的逻辑的整理,PL部分困扰我比较久的是自动生成的w ...

  7. webservice入门程序学习中经验总结

    ***第一步:创建客户端服务 1)创建一个服务接口 2)创建一个实现类实现接口 3)创建一个方法开启服务 这三步注意点:::实现类上必须添加@WebService标签 :::发布服务的时候用到的函数是 ...

  8. 年轻的心与渐行渐近的梦——记微软-斯坦福产品设计创新课程ME310

    作者:中国科学技术大学 王牧 Stanford  D. School 2014年6月,沐浴着加州的阳光,在斯坦福大学(下文简称Stanford)完成汇报后,历时一年的创新设计课程ME310的项目结束 ...

  9. DjangoModels

    传智博客的python的笔记 数据库配置 ORM简介 MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换 ...

  10. idea 内存溢出解决方法

    在Run/Debug configuration 的 vm options里面输入 -server -XX:PermSize=128M -XX:MaxPermSize=256m 具体如下图: