JS实现手写 forEach算法示例


Posted in Javascript onApril 29, 2020

本文实例讲述了JS实现手写 forEach算法。分享给大家供大家参考,具体如下:

手写 forEach

forEach()方法对数组的每个元素执行一次提供的函数

arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);

  • callback

    • currentValue
      数组中正在处理的当前元素。
    • index 可选
      数组中正在处理的当前元素的索引。
    • array 可选
      forEach() 方法正在操作的数组。
    • thisArg 可选
      可选参数。当执行回调函数 callback 时,用作 this 的值。
  • 没有返回值

如果提供了一个 thisArg 参数给 forEach 函数,则参数将会作为回调函数中的 this 值。否则 this 值为 undefined。回调函数中 this 的绑定是根据函数被调用时通用的 this 绑定规则来决定的。

let arr = [1, 2, 3, 4];

arr.forEach((...item) => console.log(item));

// [1, 0, Array(4)] 当前值
function Counter() {
 this.sum = 0;
 this.count = 0;
}

// 因为 thisArg 参数(this)传给了 forEach(),每次调用时,它都被传给 callback 函数,作为它的 this 值。
Counter.prototype.add = function(array) {
 array.forEach(function(entry) {
  this.sum += entry;
  ++this.count;
 }, this);
 // ^---- Note
};

const obj = new Counter();
obj.add([2, 5, 9]);
obj.count;
// 3 === (1 + 1 + 1)
obj.sum;
// 16 === (2 + 5 + 9)
  • 每个数组都有这个方法
  • 回调参数为:每一项、索引、原数组
Array.prototype.forEach = function(fn, thisArg) {
 var _this;
 if (typeof fn !== "function") {
  throw "参数必须为函数";
 }
 if (arguments.length > 1) {
  _this = thisArg;
 }
 if (!Array.isArray(arr)) {
  throw "只能对数组使用forEach方法";
 }

 for (let index = 0; index < arr.length; index++) {
  fn.call(_this, arr[index], index, arr);
 }
};

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
学习ExtJS border布局
Oct 08 Javascript
script标签的 charset 属性使用说明
Dec 04 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
vue实现评论列表功能
Oct 25 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 #Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 #Javascript
深入浅析vue全局环境变量和模式
Apr 28 #Javascript
你准备好迎接vue3.0了吗
Apr 28 #Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 #Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 #Javascript
JS求解两数之和算法详解
Apr 28 #Javascript
You might like
PHP与MySQL交互使用详解
2006/10/09 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
Python文件与文件夹常见基本操作总结
2016/09/19 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
JBL英国官网:JBL UK
2018/07/04 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
优秀交警事迹材料
2014/01/26 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
客户答谢会致辞
2015/07/30 职场文书
高二语文教学反思
2016/02/16 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL