【翻译】JavaScript循环和作用域
我的翻译小站:https://www.zcfy.cc/article/javascript-loops-and-scope
翻译原文链接:https://flaviocopes.com/javascript-loops-and-scope/
JavaScript有一个特点,也许会让开发者头痛, 是与循环和作用域相关的.
举个例子:
const operations = [] for (var i = 0; i < 5; i++) {
operations.push(() => {
console.log(i)
})
} for (const operation of operations) {
operation()
}
它基本是循环了5次,将一个函数添加到operations数组里面。这个函数可打印出循环变量索引值i
.
运行这些函数后
期望的结果应该是:
0
1
2
3
4
但实际发生的是这样的:
5
5
5
5
5
为什么会有这种情况? 因为使用的是var
.
由于提升了var
变量, 上面的代码等同于
var i;
const operations = [] for (i = 0; i < 5; i++) {
operations.push(() => {
console.log(i)
})
} for (const operation of operations) {
operation()
}
因此,在for-of循环中, i
依然是可见的, 它等于5,并且每次在函数中涉及到i
,都将使用这个值。
那么我们应该如何做让其变成我们想的这样呢?
最简单的方案是用 let
声明. 在ES2015中介绍到, 它们有很大的帮助,能避免关于使用var
声明的一些奇怪问题。
简单的在循环变量时将var
变成 let
,能够很好的运行:
const operations = [] for (let i = 0; i < 5; i++) {
operations.push(() => {
console.log(i)
})
} for (const operation of operations) {
operation()
}
这是输出结果:
0
1
2
3
4
这是怎么实现的呢?这是因为每次循环重复的时候,都将重新创造i
,同时每个函数添加operations
数组时,能获取它本身的i
。
记住你不能使用 const
在这种情况下, 因为这会导致for
在第二次循环时, 尝试赋新值报错。
另外一个非常普遍的解决这个问题是使用pre-ES6代码, 同时它被称作即时调用函数表达式 (IIFE).
在这种情况下,你可以包装整个函数,并将i
绑定在它上面。自这种方式,你正在创造一个能立即执行的函数,你从其返回的一个新的函数。因此我们可以稍后执行它。
const operations = [] for (var i = 0; i < 5; i++) {
operations.push(((j) => {
return () => console.log(j)
})(i))
} for (const operation of operations) {
operation()
}
【翻译】JavaScript循环和作用域的更多相关文章
- 【翻译】JavaScript中的作用域和声明提前
原文:http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html ===翻译开始=== 你知道下面的JavaScript脚本执 ...
- javascript(面向对象,作用域,闭包,设计模式等)
javascript(面向对象,作用域,闭包,设计模式等) 1. 常用js类定义的方法有哪些? 参考答案:主要有构造函数原型和对象创建两种方法.原型法是通用老方法,对象创建是ES5推荐使用的方法.目前 ...
- 认识javascript中的作用域和上下文
javascript中的作用域(scope)和上下文(context)是这门语言的独到之处,这部分归功于他们带来的灵活性.每个函数有不同的变量上下文和作用域.这些概念是javascript中一些强大的 ...
- Javascript之变量作用域
分析: 无论是强类型语言c#.c++.java等语言,还是弱类型语言如Javascript,所有变量可以抽象为两种类型,即局部变量和全局变量. 全局变量:整个作用域可见. 局部变量:局部可见,退出作用 ...
- 深入理解 JavaScript 变量的作用域和作用域链
一个变量的作用域(scope)是程序源代码中定义这个变量的区域.简单的说,作用域就是变量与函数的可访问范围.全局变量拥有全局作用域,在JavaScript代码中的任何地方都有定义.局部变量是在函数体内 ...
- javascript篇-----函数作用域,函数作用域链和声明提前
在一些类似C语言的编程语言中,花括号内的每一段代码都具有各自的作用域,而且变量在声明它们的代码段之外是不可见的(也就是我们不能在代码段外直接访问代码段内声明的变量),我们称之为块级作用域,然而,不同于 ...
- JavaScript之函数作用域
有过类似C语言编程经验的同学应该都知道“块级作用域(block scope)”:花括号内的每一段代码都具有各自的作用域,而且在声明它们的代码段之外是不可见的.而在JavaScript中是没有块级作用域 ...
- JavaScript中的作用域和声明提前
[翻译]JavaScript中的作用域和声明提前 原文:http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html ===翻译 ...
- JavaScript函数变量作用域
变量作用域 在JavaScript中,用var申明的变量实际上是有作用域的. 如果一个变量在函数体内部申明,则该变量的作用域为整个函数体,在函数体外不可引用该变量. 如果两个不同的函数各自申明了同一变 ...
随机推荐
- springMVC学习记录3-拦截器和文件上传
拦截器和文件上传算是springmvc中比较高级一点的内容了吧,让我们一起看一下. 下面先说说拦截器.拦截器和过滤器有点像,都可以在请求被处理之前和请求被处理之到做一些额外的操作. 1. 实现Hand ...
- ArcGIS案例学习笔记4_1
ArcGIS案例学习笔记4_1 联系方式:谢老师,135-4855-4328, xiexiaokui(#)qq.com 时间:第四天上午 案例1:矢量校正案例 教程:Editing编辑教程 pdf 数 ...
- dubbo-admin 管理平台
一.前言 dubbo的使用,其实只需要有注册中心,消费者,提供者这三个就可以使用了,但是并不能看到有哪些消费者和提供者,为了更好的调试,发现问题,解决问题,因此引入dubbo-admin.通过dubb ...
- sql:查询课程号'0312091006'成绩排名第5到第10之间的学生学号
select top 6 sno from (select top 10 sno,mark from student_Coursewhere ccno='0312091006' order by ma ...
- crsf 跨站请求伪造
[crsf 跨站请求伪造] CSRF(Cross-site request forgery),中文名称:跨站请求伪造.核心为利用浏览器帮助提交cookie.采用随机数方可防御.估计大部小站均无CSRF ...
- Android Studio和SDK下载、安装和环境变量配置
win10下Android Studio和SDK下载.安装和环境变量配置 - ...
- 使用Ansible部署etcd 3.2高可用集群
之前写过一篇手动搭建etcd 3.1集群的文章<etcd 3.1 高可用集群搭建>,最近要初始化一套新的环境,考虑用ansible自动化部署整套环境, 先从部署etcd 3.2集群开始. ...
- Canvas游戏计算机图形教程
TechbrooD 主站 WOW 登录 注册 0首页 1简介 1.1WWW 技术变迁和生态 1.2WWW 学习建议 1.3WWW 互联网基础知识 1.4WWW Web 1.5 WWW Web ...
- C#设计模式之简单工厂模式(过渡模式)
一.引言 之所以写这个系列,是了为了自己更好的理解设计模式,也为新手提供一些帮助,我都是用最简单的.最生活化的实例来说明.在上一篇文章中讲解了单例模式,今天就给大家讲一个比较简单的模式——简单工厂模式 ...
- Loadrunner12.5-录制http://www.gw.com.cn/网页时提示“SSL身份验证失败”错误,这是为什么呢?
问题:LR产品,录制http://www.gw.com.cn/ 网页时提示下图错误,这是为什么呢? 请在如下recording options中选择正确的SSL版本,再进行录制. 注:如何确定那个SS ...