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 相关文章推荐
JSQL  一个 web DB 的封装
May 05 Javascript
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
jquery购物车实时结算特效实现思路
Sep 23 Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
php 求质素(素数) 的实现代码
2011/04/12 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
Scrapy的简单使用教程
2017/10/24 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
Python常用数据分析模块原理解析
2020/07/20 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
班主任寄语大全
2014/04/04 职场文书
超市优秀员工事迹材料
2014/05/01 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
中学生学习保证书
2015/02/26 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书