ES6新语法之let关键字；有别于传统关键字var的使用

ES6新语法于2015年发布；而我这个前端小白在17年才接触到。惭愧惭愧！！不过到目前为止，似乎只有FireFox和Chrome对ES6的支持相对良好。不过既然人家ES6已经出来了，还是要跟上技术的潮流。

ES6给我的感觉就是让js越来越靠近传统的编程语言，如java；比如里面的面向对象的思想和语法就很接近java。所以如果有学习后端语言的童鞋的话，理解相对可能会比较好一点。额额。。好像扯得有点距离。

今天就只是说一下新增的let关键字：

传统的 var 关键字1：

以前我们定义变量都是使用的var关键字。那么ES6要新增一个let关键字来替换var的话，原因在哪里？代码中来呈现：

以上只是个很简单的小例子，以求能够说明问题即可。在for循环外面定义了一个变量n并且给它赋了值；而在for循环里面我又定义了一个变量n。循环结束之后在循环的外面调用n的值，结果为5；但是我这个时候想要的n的值是我之前的定义的n的值是等于10；现在却出现了与结果相悖。原因在于js是函数级作用域。上面的那个作用域是属于块级作用域的范围。恰好呢js没有！这就很好理解上面的小例子。也就是说，下面在循环体里面定义的n并不是一个局部变量，而是一个全局变量，它覆盖了上面定义的n。所以n自然是循环之后的结果。那如果我这么写：

得到的结果是多少呢？不言而喻了。既然是函数级作用域了。函数里面的n自然就是局部变量了。在函数外面是无法访问的。

如果说上面的例子不太直观展现的话，可以来看看一个比较经典的例子

运行arr[2]()函数之后的结果是2？还是10？结果又是不如人愿了。是10！！第一次敲得时候感觉有点小失望小崩溃。没有哪里存在语法错误，没有引用错误。但是结果就是10。永远不会得到2。究其原因又是我上面说到的作用域的问题。i这个时候是全局变量了。每一次的循环并不是一个单独体，而是一个受影响的整体。所以数组里的结果都是10；这个需要好好的理解一下。有点不太好懂。

传统的 var 关键字2：

var关键字还有一个比较明显的特质：变量提升的问题。变量提升，就是把变量的定义提升到函数的顶部，但是变量的赋值位置还是不变即赋值不会被提升。上面所说的作用域的问题可以和这个变量提升的问题一起合拢来看，也许对问题就有一个比较全面的理解。

在这个简单的例子中，得到的结果不是报错而是undefined。原因就是变量a,b,c的定义提升了。而值没有提升。那么执行到输出的时候自然是undefined。

上面那个的执行情况如下

这样看应该就比较好理解了。

说了那么多关于var的问题。那么来看看let是如何解决的

关键字let 1：

函数的作用域问题：

let关键字是更像是传统的编程语言中的变量的使用。他使得变量有了块级作用域。

再来看上面那个要出错的循环语句，用let关键字之后：

]

明显得到了想要的结果！！因为用let声明i变量的时候，i不是全局了而是局部。每一次的循环都是一次单独的个体。上一次的不会影响下一次。所以能够得到正解！

关键字let 2：

在之前说过var关键字存在变量的提升问题，也就是变量的定义会提升到顶部。而let则没有这个问题。

i在定义之间进行操作；在let里是不被允许的。而用var的时候不会报错，结果为undefined。这也说明了let不会存在变量提升的问题。所以使用的时候要先定义后使用。

由于let让js具有块级作用域，所以如果在块外面和里面都同时定义了相同的变量；那么块级里面进行操作的时候是不管外面有无定义，只管块级里面。