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相关推荐

  1. JS中数组迭代方法(JavaScript从入门到疯癫)

    数组迭代的方法包含了以下七个( map,filter,forEach,some,every, findIndex,reduce) 目录 1.map 2.filter 3.foreach 4.数组som ...

  2. JavaScript数组迭代方法(图解)

    转载于:https://www.cnblogs.com/seanna/p/6724032.html

  3. JavaScript数据迭代方法差别

    js有很多总迭代方法,ES6之后又新增了几个: 这里主要讨论数组迭代遍历的方法所以不会细讲for...in... ES5.ES6数组迭代方法有: forEach map filter some eve ...

  4. 新增了归并数组的方法!

    :点上面关注免费学习前端知识! ECMAScript 5还新增了两个缩小数组的方法: reduce() 和 reduceRight() .这两个方法都会迭代数组的所有项,然后构建一个最终返回的值.其中 ...

  5. JS高程5.引用类型(6)Array类型的位置方法,迭代方法,归并方法

    一.位置方法 ECMAScript5为数组实例添加了两个位置:indexOf()和 lastIndexOf().这两个方法接收两个参数:要查找的项和(可选的)表示查找起点位置的索引(如在数组[7,8, ...

  6. 总结JS中常用的数组的方法大全

    总结JS中常用的数组方法 JS中常用的数组方法总结 数组(Array)是一种复杂的数据类型,它属于Object(对象)类型,用来将一组数组合在一起,通过一个变量就可以访问一组数据.在使用数组时,经常会 ...

  7. JavaScript数组(2)---遍历/迭代方法 8种

    最近工作中经常涉及到数据的处理,数组尤其常见,经常需要对其进行遍历.转换操作,网上的文章零零散散,不得已自己又找出红宝书来翻出来看,顺便记一笔,便于以后查询. 数组常用的方法 ECMAScript5为 ...

  8. 【基础恶补】JavaScript数组的一些方法,reduce,filter,reverse,map等

    reduce reduce方法会对数组中的每个元素按序执行由你提供的reducer函数,每一次运行reducer会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值. 用法,两个参数cal ...

  9. javascript 数组对象中的迭代方法

    /* javascript 数组对象中的迭代方法 * ECMAScript5为数组定义了5个迭代方法.每个方法都接受两个参数,第一个是进行迭代的函数,第二个是该函数的作用域对象[可选]. * 进行迭代 ...

  10. JavaScript数组归并方法reduce

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

最新文章

  1. oracle0数据库论文总结,大学oracle数据库总结(考试必备)
  2. linux算法平台,Linux实时调度算法与测试平台的研究与实现
  3. socket异步处理问题
  4. 大型数据库的设计原则与开发技巧
  5. 北京人工智能工程师职称评定政策出台,明年起一年一评
  6. JavaScript 演练(8). 对象成员、类成员(原型、非原型)
  7. LeetCode 264.丑数 II(动态规划)
  8. 有趣有用的PCA——PCA压缩图片
  9. 年轻人正在双11掀起国潮热
  10. instanceof和containsKey以及claims.getExpiration()以及expiration.before()的用法
  11. Matlab学习笔记 kron函数
  12. Jenkins怎么发邮件,5年字节自动化大神手把手教你
  13. 万字长文爆肝呕血整理Python入门到精通,【巨详细,一学就会】
  14. 动态卷积:自适应调整卷积参数,显著提升模型表达能力
  15. 绿色软件在Windows10中设置开机自启方法
  16. Linux 编辑器 !强推!
  17. 评分卡模型(二)基于评分卡模型的用户付费预测
  18. 夏日葵电商:开发一个微信商城系统多少钱
  19. 移动端开发之图片上传与显示
  20. JavaWeb-JavaScript API

热门文章

  1. paip.为什么使用多线程的原因.
  2. paip. C#.NET循环获取不同随机数的方法根据时间
  3. paip.activex控件在WEB中使用流程与工具
  4. Rust: codewars的Highest and Lowest
  5. 阿里云罗庆超:我为什么写《对象存储实战指南》这本书
  6. 「转发领抱枕」40万奖金等你来挑战!阿里云ECS Cloudbuild开发者大赛重磅开启
  7. 【路径规划】基于matlab人工势场法机器人自动避障【含Matlab源码 620期】
  8. 【水果识别】基于matlab GUI HSV+RGB水果分类【含Matlab源码 380期】
  9. 【物理应用】基于matlab Q学习无线体域网路由方法【含Matlab源码 264期】
  10. 【三维路径规划】基于matlab麻雀搜索算法无人机三维路径规划【含Matlab源码 171期】