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. python 实现各种进度条

    1. 时间进度条 class Tiao(object): def __init__(self): self.obj1 = datetime.timedelta(seconds=1) self.var ...

  2. 记一次crontab执行和日志生成问题

    一.crontab未执行 crontab里面设置定时任务如下: 1 19 * * * /usr/bin/python3 /home/nola/a.py > /home/nola/logs/a_l ...

  3. iMX287A基于嵌入式Qt的新冠肺炎疫情监控平台

    目录 1.前言 2.数据接口的获取 3.Qt界面的实现 4.在开发板上运行Qt程序 5.最终效果 6.代码下载 @ 1.前言 之前我使用在桌面版本Qt实现了肺炎疫情监控平台:基于Qt的新冠肺炎疫情数据 ...

  4. 《Javascript中 == 和 === 的区别》

    在js中 ==(相等运算符) 和 === (严格运算符)是两种判断两个变量是否相等的运算符. == :判断是否相等,忽略类型进行值的比较.(存在隐式类型转换的比较) ===:判断是否相等,先判断值是否 ...

  5. Matplotlib数据可视化(5):柱状图与直方图

      柱状图和直方图是两种非常类似的统计图,区别在于: 直方图展示数据的分布,柱状图比较数据的大小. 直方图X轴为定量数据,柱状图X轴为分类数据.因此,直方图上的每个条形都是不可移动的,X轴上的区间是连 ...

  6. 进程,线程,Event Loop(事件循环),Web Worker

    线程,是程序执行流的最小单位.线程可与同属一个进程的其他线程共享所拥有的全部资源,同一进程中的多个线程之间可以并发执行.线程有就绪,阻塞,运行三种基本状态. 阮一峰大神针对进程和线程的类比,很是形象: ...

  7. 有关js的date的相关知识

    最近做项目,用了new Date().getTime()获取本地时间,但是如果用户篡改了手机时间,程序漏洞明显暴露.所以如果为保证程序的稳健安全性,应该是要使用网络时间的,也就是服务器时间.原理就是使 ...

  8. C语言程序设计(十二) 结构体和共用体

    第十二章 结构体和共用体 当需要表示复杂对象时,仅使用几个基本数据类型显然是不够的 根本的解决方法是允许用户自定义数据类型 构造数据类型(复合数据类型)允许用户根据实际需要利用已有的基本数据类型来构造 ...

  9. Hadoop集群搭建(三)~centos6.8网络配置

    安装完centos之后,进入系统,进行网络配置.主要分为五个部分: 修改虚拟机网络编辑器:配置Winodws访问虚拟机:配置centos网卡:通过网络名访问虚拟机配置网络服务. (一)虚拟机网络编辑器 ...

  10. linux svn切换用户

    1. 临时切换 在所有命令下强制加上--username 和--password选项. 例如:svn up --username zhangsan --password 123456 2.永久切换 删 ...