注:本文为 《 JavaScript 完全手册(2018版) 》第27节,你可以查看该手册的完整目录。
JavaScript 中,和循环与作用域有关的特性可能会给开发人员带来一些麻烦。我们将学习一些关于 循环 和使用 var
和 let
作用域的技巧。
举个例子:
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
尝试第二次迭代中分配新值时会出现错误。
另一种解决此问题的方法在 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() }
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂