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

  reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

  语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

  可以看出它接收一个回调函数和一个初始值。

  其中total为初始值或者计算后的返回值(必须)、currentValue为当前元素(必须)、currentIndex为当前元素索引(可选)、arr为当前元素所属的对象(可选)、initialValue为传递给函数的初始值

  

  案例1:数组去重

// 数组去重
var arr = [12, 34, 34, 342, 345, 34, 123, 345, 45, 12]
var newArr = arr.reduce(function (prev, next) {
prev.indexOf(next) == -1 && prev.push(next)
return prev
}, [])
console.log(arr) // [12, 34, 34, 342, 345, 34, 123, 345, 45, 12]
console.log(newArr) // [12, 34, 342, 345, 123, 45]

  初始化一个空数组,判断下一个元素是否在当前数组中,不存在则添加到当前数组中。

  案例2:数组中元素求和

// 数组求和
var arr = [1, 2, 3, 4, 5]
var total = arr.reduce(function (prev, next) {
return prev + next
}, 0)
console.log(total)

  将0当做reduce回调函数中的初始值,然后依次累加

  案例3:求数组中最大值或最小值:

// 获取数组中最大值
var arr = [134798, 3478973, 12, 345, 355, 425, 1342356, 3425566, 7908798]
var max = arr.reduce(function (prev, next) {
return Math.max(prev, next) // Math.min(prev, next)
}, 0)
console.log(max)

  

  tips:initialValue为传递给函数的初始值,假如该值不存在时,则回调函数的初始值为数组中的第一项,即回调函数中的prev值

  

javascript之reduce()方法的使用的更多相关文章

  1. JavaScript中reduce()方法

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

  2. 关于javascript 的reduce方法

    作为一个前端菜鸟,觉得资料比较好,特地分享一下~~ reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. 你一定也和我一样看的有点 ...

  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. java微信获取经纬度转换为高德坐标小结

    https://blog.csdn.net/dragon974539495/article/details/78894499

  2. 开发中常用的JS知识点集锦

    索引 1.对象深拷贝 2.网络图片转base64, 在线图片点击下载 3.常用CSS样式记录(超出宽高省略展示/播放icon/按钮背景颜色渐变...) 4.对象深拷贝 5.对象深拷贝 6.对象深拷贝 ...

  3. 开源jar包bug导致的CPU消耗200%问题分析案例

    mapdb是什么 mapdb是一个快速.易用的嵌入式java数据库,主要提供map和set形式的数据存储,使用起来就像是在操作java本身的map,set, mapdb可以提供内存级别和磁盘级别的缓存 ...

  4. SpringBoot中对于异常处理的提供的五种处理方式

    1.自定义错误页面 SpringBoot 默认的处理异常机制:SpringBoot默认的已经提供了一套处理异常的机制.一旦程序中出现了异常,SpringBoot会向/error的url发送请求.在Sp ...

  5. base加密解密工具类

    public class MLDUtil { public static Key DEFAULT_KEY = null; public static final String DEFAULT_SECR ...

  6. 四、OpenStack—glance组件介绍与安装

    一.glance介绍 Glance是Openstack项目中负责镜像管理的模块,其功能包括虚拟机镜像的查找.注册和检索等. Glance提供Restful API可以查询虚拟机镜像的metadata及 ...

  7. url.cn短网址批量缩短开发接口

    https://www.showapi.com/api/view/1728 //md5签名方式--非简单签名 <?php header("Content-Type:text/html; ...

  8. java testng框架的windows自动化-自动运行testng程序上篇

    本文旨在让读者简单了解testng的自动运行 怎么说呢,在网上已经有了各个前辈进行代码演示以及分享,我力争说到点子上 接上文,之前讲的大部分是juint的自动化代码运行,从未涉及到testng,但是在 ...

  9. Android中的数据持久化机制

    Android中几种最简单但是却最通用的数据持久化技术:SharedPreference.实例状态Bundle和本地文件. Android的非确定性Activity和应用程序生存期使在会话间保留UI状 ...

  10. IIS7配置伪静态把后缀名映射为html

    1.在IIS新建站点.[ 创建的时候不用去选择版本和模式,默认即可 ] 2.选中站点,切换到功能试图,找到“处理程序映射",双击之后,在打开窗口右侧的操作栏目下做如下设置: 1) 右边&qu ...