数组迭代方法之reduce
2019独角兽企业重金招聘Python工程师标准>>>
昨天因为数据结构的封装上有点问题,就分别在开源中国和segmentFault上面提了问题,别问为什么不在stackoverflow里面提。。。
segmentFault里面的大神的答案果然不失所望。
其中有个答案是结合了reduce和map来编写的。map留着下次再说~请期待O(∩_∩)O~
所以今晚就看了一下关于reduce()的资料,才发现自己底子不行,之前理解的很多细节都没有注意到。翻回犀牛书认真读了一遍才茅塞顿开。
reduce()的参数
reduce()有两个参数,一个是回调函数(必选),另一个是传递给回调函数里prev参数的初始值(可选),这里的可选参数我就经常会把它忽略,导致产生理解误区
reduce()回调函数里面的参数
举个栗子:
var arr = [1,2,3,4];
var sum = arr.reduce(function(prev,cur,index,arr) {console.log(prev, cur, index);return prev + cur;
});
console.log(arr, sum);/* console结果1 2 1
3 3 2
6 4 3
[1,2,3,4] 10*/
- prev 函数第二项的值或是回调函数返回的累积值
- cur 当前的迭代值
- index 当前迭代值的索引
- arr 数组本身
这里的prev很容易被误解,有很多人都会以为是数组里的cur的前一位数,其实一开始我也这么认为,console出来见真相啊。
前方高能,当第一次执行时,reduce方法里的没有第二个参数时,会默认把数组的第一位当成prev的值,上面的例子就是如此,所以第二位就成了cur值,所以index值是从1开始的。如果reduce的第二个参数设置了,则第一次执行,prev的值就是第二个参数。,如果要把prev设置为num型,第二个参数就为0
,对象类型的话就设置为{}
,当然数组的就设置为[]
举些栗子:(栗子都是从前端三人行公众号上找的,比较懒。。。)
统计字符串有多少个相同字符
// 这里的reduce第二个参数是{},所以prev的初始值就是{}
var arrString = 'abcdaabc';
arrString.split('').reduce(function(res, cur) { res[cur] ? res[cur] ++ : res[cur] = 1 return res;
}, {})
// 这里的reduce第二个参数是[],所以prev的初始值就是[]
[1, 2].reduce(function(res, cur) { res.push(cur + 1); return res;
}, []);
reduce()和reduceRight()
reduce和reduceRight的原理其实是一样的,但是不同的是,它们是按照数组索引从高到低(从右到左)处理数组的。
下面例子就很适合用reduceRight()
var a = [2,3,4];// 计算2^(3^4),乘方操作的优先顺序是从右到左
var big = a.reduceRight(function(accumulator,value) {return Math.pow(value, accumulator);
});
兼容问题
虽然reduce大法好用,但是在ie9以下的浏览器
是不支持它的噢O__O "…
所以要请慎用!
转载于:https://my.oschina.net/tvwawawa/blog/710812
数组迭代方法之reduce相关推荐
- JS中数组迭代方法(JavaScript从入门到疯癫)
数组迭代的方法包含了以下七个( map,filter,forEach,some,every, findIndex,reduce) 目录 1.map 2.filter 3.foreach 4.数组som ...
- JavaScript数组迭代方法(图解)
转载于:https://www.cnblogs.com/seanna/p/6724032.html
- JavaScript数据迭代方法差别
js有很多总迭代方法,ES6之后又新增了几个: 这里主要讨论数组迭代遍历的方法所以不会细讲for...in... ES5.ES6数组迭代方法有: forEach map filter some eve ...
- 新增了归并数组的方法!
:点上面关注免费学习前端知识! ECMAScript 5还新增了两个缩小数组的方法: reduce() 和 reduceRight() .这两个方法都会迭代数组的所有项,然后构建一个最终返回的值.其中 ...
- JS高程5.引用类型(6)Array类型的位置方法,迭代方法,归并方法
一.位置方法 ECMAScript5为数组实例添加了两个位置:indexOf()和 lastIndexOf().这两个方法接收两个参数:要查找的项和(可选的)表示查找起点位置的索引(如在数组[7,8, ...
- 总结JS中常用的数组的方法大全
总结JS中常用的数组方法 JS中常用的数组方法总结 数组(Array)是一种复杂的数据类型,它属于Object(对象)类型,用来将一组数组合在一起,通过一个变量就可以访问一组数据.在使用数组时,经常会 ...
- JavaScript数组(2)---遍历/迭代方法 8种
最近工作中经常涉及到数据的处理,数组尤其常见,经常需要对其进行遍历.转换操作,网上的文章零零散散,不得已自己又找出红宝书来翻出来看,顺便记一笔,便于以后查询. 数组常用的方法 ECMAScript5为 ...
- 【基础恶补】JavaScript数组的一些方法,reduce,filter,reverse,map等
reduce reduce方法会对数组中的每个元素按序执行由你提供的reducer函数,每一次运行reducer会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值. 用法,两个参数cal ...
- javascript 数组对象中的迭代方法
/* javascript 数组对象中的迭代方法 * ECMAScript5为数组定义了5个迭代方法.每个方法都接受两个参数,第一个是进行迭代的函数,第二个是该函数的作用域对象[可选]. * 进行迭代 ...
- JavaScript数组归并方法reduce
示例代码: <!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8 ...
最新文章
- oracle0数据库论文总结,大学oracle数据库总结(考试必备)
- linux算法平台,Linux实时调度算法与测试平台的研究与实现
- socket异步处理问题
- 大型数据库的设计原则与开发技巧
- 北京人工智能工程师职称评定政策出台,明年起一年一评
- JavaScript 演练(8). 对象成员、类成员(原型、非原型)
- LeetCode 264.丑数 II(动态规划)
- 有趣有用的PCA——PCA压缩图片
- 年轻人正在双11掀起国潮热
- instanceof和containsKey以及claims.getExpiration()以及expiration.before()的用法
- Matlab学习笔记 kron函数
- Jenkins怎么发邮件,5年字节自动化大神手把手教你
- 万字长文爆肝呕血整理Python入门到精通,【巨详细,一学就会】
- 动态卷积:自适应调整卷积参数,显著提升模型表达能力
- 绿色软件在Windows10中设置开机自启方法
- Linux 编辑器 !强推!
- 评分卡模型(二)基于评分卡模型的用户付费预测
- 夏日葵电商:开发一个微信商城系统多少钱
- 移动端开发之图片上传与显示
- JavaWeb-JavaScript API
热门文章
- paip.为什么使用多线程的原因.
- paip. C#.NET循环获取不同随机数的方法根据时间
- paip.activex控件在WEB中使用流程与工具
- Rust: codewars的Highest and Lowest
- 阿里云罗庆超:我为什么写《对象存储实战指南》这本书
- 「转发领抱枕」40万奖金等你来挑战!阿里云ECS Cloudbuild开发者大赛重磅开启
- 【路径规划】基于matlab人工势场法机器人自动避障【含Matlab源码 620期】
- 【水果识别】基于matlab GUI HSV+RGB水果分类【含Matlab源码 380期】
- 【物理应用】基于matlab Q学习无线体域网路由方法【含Matlab源码 264期】
- 【三维路径规划】基于matlab麻雀搜索算法无人机三维路径规划【含Matlab源码 171期】