UDN-企业互联网技术人气社区

板块导航

浏览  : 397
回复  : 2

[原生js] 解析JavaScript数组方法reduce

[复制链接]
刘莉莉11的头像 楼主
发表于 2017-1-3 13:15:40 | 显示全部楼层 |阅读模式
  本文主要介绍了JavaScript数组方法reduce的概述、语法、参数、工作原理等,由浅入深,便于理解。需要的朋友可以看下

  Array.prototype.reduce()
  
  概述

  
  reduce()方法是数组的一个实例方法(共有方法),可以被数组的实例对象调用。reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。
  
  语法
  
  arr.reduce(callback[, initialValue]) {}
  
  参数
  
  回调函数中可以传递四个参数。
  
  previousValue:上一次调用回调函数返回的值,或者是提供的初始值(initialValue)
  
  currentValue:数组中当前被处理的元素
  
  currentIndex:当前被处理元素在数组中的索引, 即currentValue的索引.如果有initialValue初始值, 从0开始.如果没有从1开始
  
  array:调用 reduce 的数组
  
  initialValue:可选参数, 作为第一次调用 callback 的第一个参数
  
  返回值
  
  reduce()返回值是最后一次调用回调函数返回的结果
  
  描述
  
  reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:
  
  1.previousValu 上一次值
  
  2.currentValue 当前值
  
  3.currentIndex 当前值的索引
  
  4.array 数组
  
  回调函数第一次执行时,previousValue 和 currentValue可能是两个不同值其中的一个,如果reduce有initialValue参数,那么 previousValue 等于 initialValue ,并且currentValue 等于数组中的第一个值;如果reduce没有 initialValue 参数,那么previousValue 等于数组中的第一个值,currentValue等于数组中的第二个值。
  
  注意: 如果没有initialValue参数, reduce从index为1开始执行回调函数, 跳过第一个index。 如果有initialValue参数, reduce 将从index为 0 开始执行回调
  
  如果数组是空的并且没有initialValue参数, 将会抛出TypeError错误. 如果数组只有一个元素并且没有初始值initialValue, 或者有initialValue但数组是空的, 这个唯一的值直接被返回而不会调用回调函数。
  
  通常来说提供一个initialValue初始值更安全一点, 因为没有的话会出现如下输出结果。
  1. //没有提供initialValue
  2. function foo(){
  3. return [1,2,3,4,5].reduce((x, y) => x + y); //15
  4. };
  5. console.log(foo.call(this));
  6. function foo(){
  7. return [].reduce((x, y) => x + y); //TypeError
  8. };
  9. console.log(foo.call(this));
  10. //提供initialValue
  11. function foo(){
  12. return [].reduce((x, y) => x + y, 0); //0
  13. };
  14. console.log(foo.call(this));
复制代码

  reduce()是如何工作的  
  
  1. [0, 1, 2, 3, 4].reduce((previousValue, currentValue, index, array) => previousValue + currentValue);
复制代码
 
  回调被执行四次,每次的参数和返回值如下表:
 
201612121445348.jpg
 
  reduce 的返回值是回调函数最后一次被调用的返回值(10)。
  
  如果把初始值作为第二个参数传入 reduce,结果如下,结果如下:  
  
  1. [0, 1, 2, 3, 4].reduce((previousValue, currentValue, index, array) => previousValue + currentValue, 10);
复制代码
 
201612121445349.jpg
 
  最后一次函数调用的返回值 (20) 作为reduce函数的结果被返回
  
  注意:添加了initialValue参数会多调用一次回调函数
  
  例题
  
  将数组所有项相加
  1. let sum = [0, 1, 2, 3, 4].reduce((x, y) => x + y, 0);
  2. // 10
复制代码

  扁平化一个二维数组
  1. let arr = [[1, 2], [3, 4], [5, 6]].reduce((x, y) => x.concat(y), []);
  2. // [1, 2, 3, 4, 5, 6]
复制代码

  以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

相关帖子

发表于 2017-1-3 13:16:10 | 显示全部楼层
LZ是闲人,天天发帖,坚定完毕
使用道具 举报

回复

发表于 2017-1-3 13:16:10 | 显示全部楼层
其实js如果遇到web安全类的项目,那就又要做牺牲了,无法读写文件,访问受限。。。哎。。。
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部