理解let并 const在JavaScript ES6中（2）

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 ）{ //新块</font></font><font></font><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;" >      console.log（mybrother） //杰森</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;" > console.log（mybrother） //保罗</font></font>

我们已经宣布 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;" > //记录'5,5,5,5,5'</font></font>

这失败了，你得到的只是 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> //logs '0, 1, 2, 3, 4'

现在它起作用了，但是，如此丑陋和冗长。

替换 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> //logs '0, 1, 2, 3, 4'

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博客 ” ，链接：http://blog.itpub.net/69933200/viewspace-2651012/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/69933200/viewspace-2651012/