详解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 相关文章推荐
JavaScript 学习点滴记录
Apr 24 Javascript
JQuery 小练习(实例代码)
Aug 07 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
微信小程序实现星星评分效果
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单件模式结合命令链模式使用说明
2008/09/07 PHP
php gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
php 代码优化之经典示例
2011/03/24 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
jquery获取radio值(单选组radio)
2014/10/16 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
Python实现一个简单的MySQL类
2015/01/07 Python
Python多线程编程简单介绍
2015/04/13 Python
Python注释详解
2016/06/01 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
解决pip install psycopg2出错问题
2020/07/09 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
Python通过format函数格式化显示值
2020/10/17 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
大学生村官事迹材料
2014/01/21 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS