Array.forEach原理,仿造一个类似功能

array.forEach

 // 设一个arr数组
let arr = [12,45,78,165,68,124];
let sum = 0;
// 遍历该数组求和
arr.forEach(function(item,index){
sum += item;
})
console.log(sum);

如上

我们使用forEach可遍历一个数组,并取出其index,item,还有 数组本身

然后根据返回的值可以实现你想要的功能,比如求和

原理

该函数的原理是利用了Array的原型对象进行操作的,下面是依据此原理模仿forEach的例子,以此来说明一下该方法的原理

Array.prototype.myForEach = function (fn) {
for (let i = 0; i < this.length; i++) {
fn(this[i], i, this);
}
};

也就是当我们调用一次myForEach函数时,其中的fn将会被调用this.length-1次(其中的this指的自然是调用该方法的对象)

执行如下代码,可以发现输出结果确实与forEach一致

let arr = [12, 45, 78, 165, 68, 124];
Array.prototype.myForEach = function (fn) {
for (let i = 0; i < this.length; i++) {
fn(this[i], i, this);
}
};
arr.myForEach(function (item, index, arr) {
console.log("item:" + item + ",index:" + index + ",this:" + arr);
})

当我们在调试台打断点在arr.muForEach(function(item,index,arr))..这一行时,再一步一步调试可以发现

执行myForEach后会调用该方法的for循环,而每一次for循环则会调用其中的fn,

此时则会执行我们在最后一个方法中写的:console.log("item:" + item + ",index:" + index + ",this:" + arr);

提问:若在for循环之后再加一个fn(),会发生什么?

Array.forEach原理,仿造一个类似功能的更多相关文章

  1. Mysql 没有nvl()函数,却有一个类似功能的函数ifnull()

    今天自己无聊写了看了一个查询需求随手写了一个sql语句,发现竟然不能运行,MySQL报[Err] 1305 - FUNCTION ceshi.nvl does not exist的错.才意识到自己写的 ...

  2. .net学习之集合、foreach原理、Hashtable、Path类、File类、Directory类、文件流FileStream类、压缩流GZipStream、拷贝大文件、序列化和反序列化

    1.集合(1)ArrayList内部存储数据的是一个object数组,创建这个类的对象的时候,这个对象里的数组的长度为0(2)调用Add方法加元素的时候,如果第一次增加元神,就会将数组的长度变为4往里 ...

  3. 实现一个类似Chrome新功能提示的popoup

    先让我们看一下Chrome的popup是什么样的: 这个“直接搜索网页”与“在打开的标签页之间切换”就是两个功能导航,还做了一个动画效果,会不停的上下晃. 我通过WindowManager的addVi ...

  4. 一个类似indexOf()的功能的函数

    之前面试的时候遇到了这样的一道题,不过写的时候有些细节没注意到,现在重新写了一下. 写一个类似indexOf()的功能的函数 var str = "dafdfgvdahjfbhyuyvtur ...

  5. Foreach原理

    本质:实现了一个IEnumerable接口, 01.为什么数组和集合可以使用foreach遍历? 解析:因为数组和集合都实现了IEnumerable接口,该接口中只有一个方法,GetEnumerato ...

  6. Office365开发系列——开发一个全功能的Word Add-In

    2016年10月我参加了在北京举行的DevDays Asia 2016 - Office 365应用开发”48小时黑客马拉松“,我开发的一个Word Add-In Demo——WordTemplate ...

  7. PHP操作实现一个多功能购物网站

    PHP操作实现一个多功能购物网站 一.需要实现的页面: Index.aspx:浏览商品页面,显示商品列表,用户可以点击“加入购物车“. ViewCart.aspx:查看购物车页面,显示已购买的商品信息 ...

  8. Spring MVC 原理探秘 - 一个请求的旅行过程

    1.简介 在前面的文章中,我较为详细的分析了 Spring IOC 和 AOP 部分的源码,并写成了文章.为了让我的 Spring 源码分析系列文章更为丰富一些,所以从本篇文章开始,我将来向大家介绍一 ...

  9. Java 实现《编译原理》简单词法分析功能 - 程序解析

    Java 实现<编译原理>简单词法分析功能 - 程序解析 简易词法分析功能 要求及功能 (1)读取一个 txt 程序文件(最后的 # 作为结束标志,不可省去) { int a, b; a ...

随机推荐

  1. phpstudy渗透到服务器

    0x00 目标站点www.test.ichunqiu 0x01 尝试登陆系统 -尝试弱密码登陆 结果:forbidden!!! -尝试万能账号密码登陆 1‘ or 1=1--+ 和 1‘ or 1=1 ...

  2. 实验一 Linux系统与应用准备

    实验一 Linux系统与应用准备 项目 内容 作业归属 班级课程 作业要求 课程作业要求 学号-姓名 17041419-刘金林 作业学习目标 1.学习博客园软件开发者学习社区使用技巧和经验:2.学习M ...

  3. 智慧港口——基于二三维一体化GIS的港口可视化监管平台

    “智慧港口”是以现代化基础设施设备为基础,以云计算.大数据.物联网.移动互联网.智能控制等新一代信息技术与港口运输业务深度融合为核心,以港口运输组织服务创新为动力,以完善的体制机制.法律法规.标准规范 ...

  4. CVPR 2020 三篇有趣的论文解读

    作者 | 文永亮 学校 | 哈尔滨工业大学(深圳) 研究方向 | 视频预测.时空序列预测 目录 AdderNet - 其实不需要这么多乘法 Deep Snake for Real-Time Insta ...

  5. Python学习字典.基础三

    元组   Python的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组中要定义的元组中只有一个元素需要再元素后面加逗号,用来消除数学歧义.例 t=(1,)   ...

  6. 数据挖掘入门系列教程(四)之基于scikit-lean实现决策树

    目录 数据挖掘入门系列教程(四)之基于scikit-lean决策树处理Iris 加载数据集 数据特征 训练 随机森林 调参工程师 结尾 数据挖掘入门系列教程(四)之基于scikit-lean决策树处理 ...

  7. JS循环嵌套的执行原理

    [逆战班] 循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构,外循环执行一次,内循环全部执行完,直到外循环执行完毕,整个循环结束. while.do.. while和for循环语句都可以进行嵌 ...

  8. 【PG】Greenplum-db-6.2.1的安装部署

    目录 1配置host文件(所有节点) 2 配置用户 3 配置/etc/sysctl.conf文件 4 limit文件,后面添加[不影响安装] 5 安装greenplum-db-6.2.1-rhel7- ...

  9. RStudio终端操作

    转于:https://support.rstudio.com/hc/en-us/articles/115010737148-Using-the-RStudio-Terminal#send 原文是英文版 ...

  10. Robotutor Scratch3.0 在线编程平台上线!

    终于,Scratch3.0在线编程平台上线了,不容易阿! 欢迎试用 https://scratch.robotutor.cn 欢迎交流,WeChat ID: iamlinweidong