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. 7-12 产生每位数字相同的n位数 (30 分)

    读入2个正整数A和B,1<=A<=9, 1<=B<=10,产生数字AA...A,一共B个A 输入格式: 在一行中输入A和B. 输出格式: 在一行中输出整数AA...A,一共B个 ...

  2. mac 工具推荐

    传送门: https://github.com/jaywcjlove/awesome-mac/blob/master/README-zh.md

  3. 教你用纯Java实现一个网页版的Xshell(附源码)

    前言 最近由于项目需求,项目中需要实现一个WebSSH连接终端的功能,由于自己第一次做这类型功能,所以首先上了GitHub找了找有没有现成的轮子可以拿来直接用,当时看到了很多这方面的项目,例如:Gat ...

  4. php判断二个数最大公约数

    $m = isset($_GET['m']) ? $_GET['m'] : 12; $n = isset($_GET['n']) ? $_GET['n'] : 8; //判断mn的大小 if($m&g ...

  5. 有关vue中用element ui 中的from表单提交json格式总是有冒号的问题解决办法

    因为后台要求要传递JSON格式的数据给他,然后我转了之后总是多了冒号,后来又看了自己的报错,原来是报了404错误,说明路径找不到, 数据格式 后来发现怎么都不行了,然后突然查看了报错报的是404,说明 ...

  6. Java多线程并发02——线程的生命周期与常用方法,你都掌握了吗

    在上一章,为大家介绍了线程的一些基础知识,线程的创建与终止.本期将为各位带来线程的生命周期与常用方法.关注我的公众号「Java面典」了解更多 Java 相关知识点. 线程生命周期 一个线程不是被创建了 ...

  7. javascript中indexOf()和lastIndexOf()详解

    ECMAScript5为数组实例添加两方法:indexOf()和lastIndexOf().这两个方法接受两个参数:要查找的项和(可选的)表示查找起点位置的索引.其中,indexOf()方法从数组的开 ...

  8. Python基础篇_实例练习1

    1.逢7跳过小游戏:从1-100之间,遇到带7的数字或者7的倍数跳过. for i in range(1,101): if i == 7 or i % 10 == 7 or i // 10 == 7: ...

  9. 普通人学习rust——从零到放弃 简单输入输出

    普通人学习rust--从零到放弃 简单输入输出 环境 本文章内容基于如下环境,如若出入请参考当前环境. rustc 1.42.0 (b8cedc004 2020-03-09) cargo 1.42.0 ...

  10. Fluent算例精选|02瞬态滑移网格分析叶轮机械内部流动

    本算例使用的软件:fluent.icem 通过学习本算例您将获得? 1.学会周期区域创建 2.学会瞬态求解器及滑移网格边界条件设置 3.学会周期面.滑移面设置 4.学会如何监测压力脉动(声学仿真) 5 ...