详解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 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
图片完美缩放
Sep 07 Javascript
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
$.get获取一个文件的内容示例代码
Sep 11 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
在Vue中使用antv的示例代码
Jun 29 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 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
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
PHP 中执行系统外部命令
2006/10/09 PHP
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
js转换对象为xml
2017/02/17 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
python对日志进行处理的实例代码
2018/10/06 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
python opencv实现证件照换底功能
2019/08/19 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
编写python代码实现简单抽奖器
2020/10/20 Python
python Scrapy框架原理解析
2021/01/04 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
自我鉴定200字
2013/10/28 职场文书
行政部岗位职责范本
2014/03/13 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
白酒代理协议书范本
2014/10/26 职场文书
父亲节活动总结
2015/02/12 职场文书
商超业务员岗位职责
2015/02/13 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python
Python sklearn分类决策树方法详解
2022/09/23 Python