JavaScript中reduce()方法
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001435119854495d29b9b3d7028477a96ed74db95032675000
重新学习reduce,这个是比较易懂的 (累计)
如何累计呢:
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
这个感觉特别像递归

累加
var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
return x + y;
});
累乘
'use strict'; function product(arr) {
var result = arr.reduce(function(x,y){
return x*y;
});
return result;
} // 测试:
if (product([1, 2, 3, 4]) === 24 && product([0, 1, 2]) === 0 && product([99, 88, 77, 66]) === 44274384) {
console.log('测试通过!');
}
else {
console.log('测试失败!');
}
JavaScript中reduce()方法不完全指南
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终为一个值,是ES5中新增的又一个数组逐项处理方法,那reduce方法跟foreach、map等数组方法又有啥区别呢。
arr.reduce(callback[, initialValue]) — More From MDN
- callback(一个在数组中每一项上调用的函数,接受四个函数:)
- previousValue(上一次调用回调函数时的返回值,或者初始值)
- currentValue(当前正在处理的数组元素)
- currentIndex(当前正在处理的数组元素下标)
- array(调用reduce()方法的数组)
- initialValue(可选的初始值。作为第一次调用回调函数时传给previousValue的值)
图解参数
抛开上面晦涩难懂的语法介绍,下面我们直接上实例:
数组 arr = [1,2,3,4] 求数组的和
forEach 实现
var arr = [1,2,3,4],
sum = 0;
arr.forEach(function(e){sum += e;}); // sum = 10 just for demo
map 实现
var arr = [1,2,3,4],
sum = 0;
arr.map(function(obj){sum += obj});//return undefined array. sum = 10 just for demo
reduce实现
var arr = [1,2,3,4];
arr.reduce(function(pre,cur){return pre + cur}); // return 10
没错,reduce 专为累加这种操作而设计,为累加这类操作而设计的参数,十分方便。那么问题来了,reduce方法的参数到底有哪些用法呢?
参数分解
1. 不传initialValue值
var arr = [1,2,3];
arr.reduce(function(pre,cur,index,arr){debugger;return pre+cur});
探查Arguments数组得到:
- 第一次debugger
- 第二次debugger
- 第三次debugger
return 6;
2. 传入initialValue 值
var arr = [1,2,3]
arr.reduce(function(pre,cur,index,arr){debugger;return pre+cur},10);
- 第一次debugger
- 第二次debugger
- 第三次debugger
- 第四次debugger
return 16
可以看出传入initialValue 会多递归一次,而initialValue的值的作用大家应该也明了了:为累加等操作传入起始值(额外的加值)。
而callbackfn中的四个参数也可以在debugger的动态变化中查看出具有的特性。
那么利用reduce方法还可以做哪些事情呢?
更多实例
var arr = [1,2,3]
求乘积
var pro = arr.reduce(function(pre,cur,index,arr){return pre * cur})
求最大值
var max = a.reduce(function(pre,cur,inde,arr){return pre>cur?pre:cur;});
另外,如果你在NodeJs的环境中使用reduce几乎没有任何问题,但是如果你在客户端的浏览器使用reduce方法,那可能就要兼容IE8以下的浏览器了。
当然,我们可以引入库来解决这个问题,有趣的是,在jQuery官网中,有一个对reduce长达8年的讨论 Add jQuery.reduce() 而Jquery官方至今仍然坚持reduce适合作为Jquery的一个插件存在。即使后来ES5中加入了reduce的实现。
This won’t be useful in the core, it can always be included in a plugin. —- by flesler
因此,如果在Jquery中使用reduce方法,需引入reduce插件 jQuery-reduce-plugin
underscorejs 中早已实现reduce方法 http://underscorejs.org/#reduce
至此,我们可以很形象的归纳出来forEach、map以及reduce的不同点:
- forEach 方法是将数组中的每一个值取出做一些程序员想让他们做的事情
- map 方法 是将数组中的每一个值放入一个方法中做一些程序员想让他们做的事情后返回一个新的数组
- reduce 方法 将数组中的每一个值与前面的被返回相加的总和(初试值为数组的第一个值或者initialValue)
Final: insert a little deeper
reduce方法在数组对象中的运用:
搬砖工小王拿到了这样的数据格式: var arr = [ {name: 'brick1'}, {name: 'brick2'}, {name: 'brick3'} ]
希望得到这样的数据格式: 'brick1, brick2 & brick3'
当然数组异常流:[ {name: ‘brick1’} ] 和 空数组传入得到 'brick1'
和 空
Solution
var arr = [ {name: 'brick11'}, {name: 'brick12'}, {name: 'brick13'} ]
function carryBricks(arr){
return arr.reduce(function(prev, current, index, array){
if (index === 0){
return current.name;
}
else if (index === array.length - 1){
return prev + ' & ' + current.name;
}
else {
return prev + ', ' + current.name;
}
}, '');
}
返回结果: brick11, brick12 & brick13
此时进一步延伸如果原来有一堆砖已经堆好,传入 initialValue值:
var arr = [ {name: 'brick11'}, {name: 'brick12'}, {name: 'brick13'} ]
var bricks = 'brick1, brick2, brick3, ' //已经堆好的砖
function carryBricks(arr,bricks){
return arr.reduce(function(prev, current, index, array){
if (index === 0){
return prev + current.name;
}
else if (index === array.length - 1){
return prev + ' & ' + current.name;
}
return prev + ', ' + current.name;
}, bricks);
}
返回结果: brick1, brick2, brick3, brick11, brick12 & brick13
-EOF-
JavaScript中reduce()方法的更多相关文章
- JavaScript中Array方法总览
title: JavaScript中Array方法总览 toc: true date: 2018-10-13 12:48:14 push(x) 将x添加到数组最后,可添加多个值,返回数组长度.改变原数 ...
- JavaScript中的方法、方法引用和参数
首先,我们来看一段代码,如果觉得不甚明白的,则本文会对你有益: var player = function (e) { return (function f(m) { ...
- 详解 JavaScript 中 splice() 方法
splice() 方法是一个比较少用的方法,但是功能确实很好,并且在我们 coding 的时候,经常有需要 splice() 方法,先介绍一下该方法. 在 JavaScript 中 splice() ...
- JavaScript中的方法
JavaScript中的方法 在JavaScript中,可以通过对象来调用对应的方法.在JavaScript中,有三个重要的window对象方法:用于显示警告信息的alert.用于显示确认信息的con ...
- JavaScript 中 reduce去重方法
过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊 JS 中 redu ...
- javascript中concat方法深入理解
最近在恶补js知识的时候,总是会因为js强大的语法而感到震撼.因为以前对前端方面的疏忽,导致了一些理解的错误.因此痛改前非,下定决心,不管做什么事情,都要有专研的精神. 在介绍前,抛出一个问题:如何将 ...
- JavaScript中的方法重载
对js有些了解的人都知道,在js中根本就不存在像C#中的那种方法重载,而有的只是方法的覆盖,当你在js中敲入两个或多个同名的方法的时候,不管方法(函数)的参数个数怎么个不同,这个方法名只能属于最后定义 ...
- javascript中数组方法小计
一:数组的常用方法: 1:join(); 将数组转为字符串显示.不输入参数,默认以逗号连接:输入参数,则以参数连接. var arr=[1,2,3]; console.log(arr.join()); ...
- 仿javascript中confirm()方法的小插件
10天没有写博客了,不知道为什么,心里感觉挺不舒服的,可能这是自己给自己规定要去完成的事情,没有按照计划执行,总会心里不怎么舒服.最近事情挺多的,终于今天抽空来更新一下博客了. 今天写的是一个小插件. ...
随机推荐
- ibatis入门教程
转载自 http://www.cnblogs.com/ycxyyzw/archive/2012/10/13/2722567.html iBatis 简介: iBatis 是apache 的一个开源项 ...
- SQL Server 在数据库中查找字符串(不知道表名的情况下 查找字符串)
declare @key varchar(30)set @key = '广州' --替换为要查找的字符串DECLARE @tabName VARCHAR(40),@colName VARCHAR(40 ...
- ldap + kerberos + google authentication 实现两步验证
第一步:ldap + kerberos 整合 ,参考之前的文章 第二步:google authentication 安装配置,参考之前的文章 第三步:整合 ldap + kerberos + goo ...
- Oracle中INSTR、SUBSTR和NVL的用法
Oracle中INSTR.SUBSTR和NVL的用法 INSTR用法:INSTR(源字符串, 要查找的字符串, 从第几个字符开始, 要找到第几个匹配的序号) 返回找到的位置,如果找不到则返回0. 默认 ...
- 用profile分析算法性能
在命令行输入:profile viewer 会出现如下图所示探查器: 在运行此代码的后面的输入框中输入要运行的程序,然后点击启动探查,就会自动探查. 探查结束之后,会给出每个函数的调用次数.运行时间等 ...
- C#生成图片缩略图(2种思路)
前言:在日常图片浏览中,如果图片过多,只有一张张的打开图片才能知道图片的内容,显然这样浏览起来非常不便.Windows系统在浏览图片时提供了缩略图的功能,这样大大的方便了浏览者了解每张图片的内容,本实 ...
- docker push 实现过程
这一篇文章分析一下docker push的过程:docker push是将本地的镜像上传到registry service的过程: 根据前几篇文章,可以知道客户端的命令是在api/client/pus ...
- 关于android的UI更新机制与误区
Android系统的消息队列和消息循环都是主线程的,其它后台服务等无法直接更新,必须通过下面的消息队列,由主线程的消息循环去依次执行更新ui: 同时对于费时间超过5秒的事件,比如网络链接等,建议新开线 ...
- Android开发学习笔记:Intent的简介以及属性的详解【转】
一.Intent的介绍 Intent的中文意思是“意图,意向”,在Android中提供了Intent机制来协助应用间的交互与通讯,Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述 ...
- UCanCode发布升级E-Form++可视化源码组件库2014 全新版 (V20.01)!
UCanCode发布升级E-Form++可视化源码组件库2014 全新版 (V20.01)! --- UCanCode有史以来最强大的版本发布! E-Form++可视化源码组件库企业版本2014最新版 ...