let
使用相同的名称
定义多个
变量
虽然您无法
let
在一个块中多次
定义同一个
变量，但没有什么可以阻止您在另一个块中执行此操作。
要记住的是ES6脚本将它们视为单独的变量：
|
1
2
3
4
五
6
|
<font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>让mybrother =
'保罗'
</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
if
（
true
）{
让mybrother =
'杰森'
</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
console.log（mybrother）
}</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
console.log（mybrother）
|
我们已经宣布
let
mybrother两次，每个块一次，这是有效的。
每个
mybrother
变量都与另一个变量不同，它是在其定义的块中的域之王。如果我们替换
let
了
var
，
console.log()
在两个实例中都会返回“Jason”，因为第二个
var
声明在遇到时会用值“Jason”覆盖第一个。
使用
let
里面的（...）循环
当谈到
for(var i;;)
JavaScript中的循环时，使用
let
而不是
var
跟踪迭代提供了独特的优势 - 我们不再需要在循环内使用IIFE（立即调用的函数表达式）来正确捕获每个迭代变量的值我们应该在以后需要这些值。
考虑以下传统的for循环，它尝试在循环运行时之后调用迭代变量的值，
setTimeout
例如：
|
1
2
3
4
五
6
|
<font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
for
（
var
i = 0; i <5; i ++）{</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
的setTimeout（函数（）{</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
的console.log（ⅰ）</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
}，i * 100）</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
}</font></font><font></font><font style=
"vertical-align: inherit;"
><font style=
"vertical-align: inherit;"
>
|
这失败了，你得到的只是
i
最后一次迭代
的值
，而不是0,1,2,3,4。问题是
var
变量没有作用于它所在的块，因此无处可访问，无论是在函数是在函数中定义的，或者在函数外部全局定义的函数。
这意味着
i
在for循环期间重复覆盖
变量
。
当
setTimeout
试图回忆时
i
，所有它得到的是最后一个值
i
被设置为。
在过去，克服这个麻烦问题的常用方法是在for循环中抛出一个IIFE来创建一个闭包，捕获
i
每次迭代
的值
：
|
1
2
3
4
五
6
7
8
|
for
(
var
i = 0; i < 5; i++){<font></font>
(
function
(x){<font></font>
setTimeout(
function
(){<font></font>
console.log(x)<font></font>
}, i * 100)<font></font>
})(i)<font></font>
}<font></font>
|
现在它起作用了，但是，如此丑陋和冗长。
替换
var
为
let
自动解决这个常见问题，因为迭代变量使用
let
范围
定义
i
了它所在的块的
每个实例
，创建了与围绕for循环包装IIFE相同的结果：
|
1
2
3
4
五
6
|
for
(let i = 0; i < 5; i++){<font></font>
setTimeout(
function
(){<font></font>
console.log(i)<font></font>
}, i * 100)<font></font>
}<font></font>
|
i
无论延迟如何，都会返回
正确的
gets
值
。
这在许多场景中都很有用，例如依赖于生成
i
不同请求
的值的循环内的Ajax请求
，或者利用值
i
来执行针对其绑定的元素定制的操作的
事件处理程序
。
这是后来的一个例子：
|
1
2
3
4
五
6
|
let links = document.getElementsByTagName(
'a'
)<font></font>
for
(let i=0; i<links.length; i++){<font></font>
links[i].onclick =
function
(){<font></font>
alert(
'You clicked on link '
+ (i+1))<font></font>
}<font></font>
}
|
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/69933200/viewspace-2651012/
，如需转载，请注明出处，否则将追究法律责任。
