我的翻译小站: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循环和作用域的更多相关文章

  1. 【翻译】JavaScript中的作用域和声明提前

    原文:http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html ===翻译开始=== 你知道下面的JavaScript脚本执 ...

  2. javascript(面向对象,作用域,闭包,设计模式等)

    javascript(面向对象,作用域,闭包,设计模式等) 1. 常用js类定义的方法有哪些? 参考答案:主要有构造函数原型和对象创建两种方法.原型法是通用老方法,对象创建是ES5推荐使用的方法.目前 ...

  3. 认识javascript中的作用域和上下文

    javascript中的作用域(scope)和上下文(context)是这门语言的独到之处,这部分归功于他们带来的灵活性.每个函数有不同的变量上下文和作用域.这些概念是javascript中一些强大的 ...

  4. Javascript之变量作用域

    分析: 无论是强类型语言c#.c++.java等语言,还是弱类型语言如Javascript,所有变量可以抽象为两种类型,即局部变量和全局变量. 全局变量:整个作用域可见. 局部变量:局部可见,退出作用 ...

  5. 深入理解 JavaScript 变量的作用域和作用域链

    一个变量的作用域(scope)是程序源代码中定义这个变量的区域.简单的说,作用域就是变量与函数的可访问范围.全局变量拥有全局作用域,在JavaScript代码中的任何地方都有定义.局部变量是在函数体内 ...

  6. javascript篇-----函数作用域,函数作用域链和声明提前

    在一些类似C语言的编程语言中,花括号内的每一段代码都具有各自的作用域,而且变量在声明它们的代码段之外是不可见的(也就是我们不能在代码段外直接访问代码段内声明的变量),我们称之为块级作用域,然而,不同于 ...

  7. JavaScript之函数作用域

    有过类似C语言编程经验的同学应该都知道“块级作用域(block scope)”:花括号内的每一段代码都具有各自的作用域,而且在声明它们的代码段之外是不可见的.而在JavaScript中是没有块级作用域 ...

  8. JavaScript中的作用域和声明提前

    [翻译]JavaScript中的作用域和声明提前 原文:http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html ===翻译 ...

  9. JavaScript函数变量作用域

    变量作用域 在JavaScript中,用var申明的变量实际上是有作用域的. 如果一个变量在函数体内部申明,则该变量的作用域为整个函数体,在函数体外不可引用该变量. 如果两个不同的函数各自申明了同一变 ...

随机推荐

  1. springMVC学习记录3-拦截器和文件上传

    拦截器和文件上传算是springmvc中比较高级一点的内容了吧,让我们一起看一下. 下面先说说拦截器.拦截器和过滤器有点像,都可以在请求被处理之前和请求被处理之到做一些额外的操作. 1. 实现Hand ...

  2. ArcGIS案例学习笔记4_1

    ArcGIS案例学习笔记4_1 联系方式:谢老师,135-4855-4328, xiexiaokui(#)qq.com 时间:第四天上午 案例1:矢量校正案例 教程:Editing编辑教程 pdf 数 ...

  3. dubbo-admin 管理平台

    一.前言 dubbo的使用,其实只需要有注册中心,消费者,提供者这三个就可以使用了,但是并不能看到有哪些消费者和提供者,为了更好的调试,发现问题,解决问题,因此引入dubbo-admin.通过dubb ...

  4. sql:查询课程号'0312091006'成绩排名第5到第10之间的学生学号

    select top 6 sno from (select top 10 sno,mark from student_Coursewhere ccno='0312091006' order by ma ...

  5. crsf 跨站请求伪造

    [crsf 跨站请求伪造] CSRF(Cross-site request forgery),中文名称:跨站请求伪造.核心为利用浏览器帮助提交cookie.采用随机数方可防御.估计大部小站均无CSRF ...

  6. Android Studio和SDK下载、安装和环境变量配置

    win10下Android Studio和SDK下载.安装和环境变量配置                                                               - ...

  7. 使用Ansible部署etcd 3.2高可用集群

    之前写过一篇手动搭建etcd 3.1集群的文章<etcd 3.1 高可用集群搭建>,最近要初始化一套新的环境,考虑用ansible自动化部署整套环境, 先从部署etcd 3.2集群开始. ...

  8. Canvas游戏计算机图形教程

    TechbrooD   主站 WOW 登录   注册 0首页 1简介 1.1WWW 技术变迁和生态 1.2WWW 学习建议 1.3WWW 互联网基础知识 1.4WWW Web 1.5 WWW Web ...

  9. C#设计模式之简单工厂模式(过渡模式)

    一.引言 之所以写这个系列,是了为了自己更好的理解设计模式,也为新手提供一些帮助,我都是用最简单的.最生活化的实例来说明.在上一篇文章中讲解了单例模式,今天就给大家讲一个比较简单的模式——简单工厂模式 ...

  10. Loadrunner12.5-录制http://www.gw.com.cn/网页时提示“SSL身份验证失败”错误,这是为什么呢?

    问题:LR产品,录制http://www.gw.com.cn/ 网页时提示下图错误,这是为什么呢? 请在如下recording options中选择正确的SSL版本,再进行录制. 注:如何确定那个SS ...