Array.forEach原理,仿造一个类似功能
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原理,仿造一个类似功能的更多相关文章
- Mysql 没有nvl()函数,却有一个类似功能的函数ifnull()
今天自己无聊写了看了一个查询需求随手写了一个sql语句,发现竟然不能运行,MySQL报[Err] 1305 - FUNCTION ceshi.nvl does not exist的错.才意识到自己写的 ...
- .net学习之集合、foreach原理、Hashtable、Path类、File类、Directory类、文件流FileStream类、压缩流GZipStream、拷贝大文件、序列化和反序列化
1.集合(1)ArrayList内部存储数据的是一个object数组,创建这个类的对象的时候,这个对象里的数组的长度为0(2)调用Add方法加元素的时候,如果第一次增加元神,就会将数组的长度变为4往里 ...
- 实现一个类似Chrome新功能提示的popoup
先让我们看一下Chrome的popup是什么样的: 这个“直接搜索网页”与“在打开的标签页之间切换”就是两个功能导航,还做了一个动画效果,会不停的上下晃. 我通过WindowManager的addVi ...
- 一个类似indexOf()的功能的函数
之前面试的时候遇到了这样的一道题,不过写的时候有些细节没注意到,现在重新写了一下. 写一个类似indexOf()的功能的函数 var str = "dafdfgvdahjfbhyuyvtur ...
- Foreach原理
本质:实现了一个IEnumerable接口, 01.为什么数组和集合可以使用foreach遍历? 解析:因为数组和集合都实现了IEnumerable接口,该接口中只有一个方法,GetEnumerato ...
- Office365开发系列——开发一个全功能的Word Add-In
2016年10月我参加了在北京举行的DevDays Asia 2016 - Office 365应用开发”48小时黑客马拉松“,我开发的一个Word Add-In Demo——WordTemplate ...
- PHP操作实现一个多功能购物网站
PHP操作实现一个多功能购物网站 一.需要实现的页面: Index.aspx:浏览商品页面,显示商品列表,用户可以点击“加入购物车“. ViewCart.aspx:查看购物车页面,显示已购买的商品信息 ...
- Spring MVC 原理探秘 - 一个请求的旅行过程
1.简介 在前面的文章中,我较为详细的分析了 Spring IOC 和 AOP 部分的源码,并写成了文章.为了让我的 Spring 源码分析系列文章更为丰富一些,所以从本篇文章开始,我将来向大家介绍一 ...
- Java 实现《编译原理》简单词法分析功能 - 程序解析
Java 实现<编译原理>简单词法分析功能 - 程序解析 简易词法分析功能 要求及功能 (1)读取一个 txt 程序文件(最后的 # 作为结束标志,不可省去) { int a, b; a ...
随机推荐
- Ubuntu gnome 美化与个别组件安装
1. 安装 gnome 工具 sudo apt install gnome-tweaks# 打开时中文直接选择 "优化" 即可 1.1. gnome 官网 # https://ex ...
- hue初识
Hue Web应用的架构 Hue 是一个Web应用,用来简化用户和Hadoop集群的交互.Hue技术架构,如下图所示,从总体上来讲,Hue应用采用的是B/S架构,该web应用的后台采用python编程 ...
- 阿里sentinel说明及使用
使用说明 如果只是为了让使 用Sentinel 的限流功能,只需要引入相关的jar包依赖. 添加依赖 添加相关模块的Adapter Sentinel为每个构建项目的各个组件都打包成了相应的Adapte ...
- react-native 使用leanclound消息推送
iOS消息推送的基本流程 1.注册:为应用程序申请消息推送服务.此时你的设备会向APNs服务器发送注册请求.2. APNs服务器接受请求,并将deviceToken返给你设备上的应用程序 3.客户端应 ...
- disruptor 链路实战 三
一.创建Event类 Trade import java.util.concurrent.atomic.AtomicInteger; public class Trade { private Stri ...
- 一起学习vue源码 - Object的变化侦测
作者:小土豆biubiubiu 博客园:www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e894d 简书:h ...
- 玩转 .NET Core 3.0:逐浪CMS新版发布,建站更简单、网站更安全
2019年11月11日,在大家都忙于网上体会“双11 ”的热闹气氛的时候,逐浪CMS开发者团队正在做着新版本发布的最后工作.此次更新是基本于 .NET Core 3.0开发,也是全国首个基于 .NET ...
- 01-初识InfluxDB
初识InfluxDB 1. InfluxDB介绍 时间序列数据库,简称时序数据库,Time Series Database,一个全新的领域,最大的特点就是每个条数据都带有Time列. 时序数据库到底能 ...
- NoVNC安装部署
noVNC 是一个 HTML5 VNC 客户端,采用 HTML 5 WebSockets, Canvas 和 JavaScript 实现,noVNC 被普遍用在各大云计算.虚拟机控制面板中,比如 Op ...
- LCN解决分布式事务原理解析+项目实战(原创精华版)
写在前面: 原创不易,如果觉得不错推荐一下,谢谢! 由于工作需要,公司的微服务项目需解决分布式事务的问题,且由我进行分布式事务框架搭建和整合工作. 那么借此机会好好的将解决分布式事务的内容进行整理一下 ...