详解JavaScript之Array.reduce源码解读


Posted in Javascript onNovember 01, 2020

前言

reduce(...)方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值(累计作用)

此方法接受两个参数:callback(...)(必选)、initialValue(可选)。
callback(...)接受4个参数:Accumulator (acc) (累计器)、Current Value (cur) (当前值)、Current Index (idx) (当前索引)、Source Array (src) (源数组)。

注意点:
1、callback(...)一般需要返回值
2、不会改变原数组

实现思路
1、先获取初始累计的值(分成两种情况:有提供initialValue || 未提供initialValue)
2、遍历数组并执行callback(...)
3、返回累计值

源码实现

Array.prototype.myReduce = function(callback, initialValue) {
 if(this === null) {
  throw new TypeError( 'Array.prototype.reduce called on null or undefined' );
 }
 if (typeof callback !== 'function') {
  throw new TypeError( callback + ' is not a function');
 }
 const O = Object(this);
 const lenValue = O.length;
 const len = lenValue >>> 0;
 if(len === 0 && !initialValue) {
  throw new TypeError('the array contains no elements and initialValue is not provided');
 }
 let k = 0;
 let accumulator;
 // 分成两种情况来获取accumulator
 // 有提供initialValue accumulator=initialValue
 // 没有提供initialValue accumulator=数组的第一个有效元素
 if(initialValue) {
  accumulator = initialValue;
 } else {
  let kPressent = false;
  while(!kPressent && k < len) {
   const pK = String(k);
   kPressent = O.hasOwnProperty(pK);
   if(kPressent) {
    accumulator = O[pK];
   };
   k++;
  }
  if(!kPressent) {
   throw new TypeError('the array contains error elements');
  }
 }
 // 当accumulator=initialValue时 k=0
 // accumulator=数组的第一个有效元素时 k=1
 while(k < len) {
  if(k in O) {
   // callback一般需要返回值
   accumulator = callback(accumulator, O[k], k, O);
  }
  k++;
 }
 return accumulator;
}
let r = [1,2,3].myReduce(function (prevValue, currentValue, currentIndex, array) {
 return prevValue + currentValue;
}, 22);
console.log(r); // 28

参考链接:

reduce-mdn
官方规范

到此这篇关于详解JavaScript之Array.reduce源码解读的文章就介绍到这了,更多相关JavaScript Array.reduce源码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
4个顶级开源JavaScript图表库
Sep 29 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
使用vue实现通过变量动态拼接url
Jul 22 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 Javascript
微信小程序实现星星评分效果
Nov 01 #Javascript
Express 配置HTML页面访问的实现
Nov 01 #Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 #Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 #Javascript
Ant design vue中的联动选择取消操作
Oct 31 #Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 #Javascript
vue中可编辑树状表格的实现代码
Oct 31 #Javascript
You might like
php+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
Python饼状图的绘制实例
2019/01/15 Python
python中有关时间日期格式转换问题
2019/12/25 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
西式结婚主持词
2014/03/14 职场文书
考察现实表现材料
2014/05/19 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
新郎新娘答谢词
2015/01/04 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
给老师的一封感谢信
2015/01/20 职场文书
七一活动主持词
2015/06/29 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技