ES6系列之变量声明

在之前的js版本中，声明变量一直都是用var, 这个估计大家都很熟悉了。

那么它的作用呢就是用来声明一个变量，比如像这样子：

var a = 10

在这里我们就用var声明了一个变量a 并且在声明的同时给这个变量a赋值了 也就是10；

那么这时候如果我们去引用这个变量，那么得到的结果就是10，这没什么稀奇的，在这里就不再赘述了。

那么在es6里面新增了两个声明变量的方法：

一个是let，用于声明变量。
一个是const，用于声明常量。

我们来看一下这三者之间的区别：

一、let和var的区别

这两个关键字都是用于声明变量的，在这种情况（先声明后使用）下使用let和var的时候其实是没有区别的。

区别一：变量提升

用var声明的变量会被提升，而用let声明的变量不会被提升。

不过呢，我们都知道var关键字声明变量的时候有一个东西，叫“变量提升”；

也就是将变量声明提升到它所在作用域的最开始的部分，比如：

如果在声明这个变量之前去引用这个变量，如果这个变量是用var进行声明的，那么得到的结果其实是undefined。

也就是为定义的意思，但是这个变量是存在的。

我们知道js在运行之前其实有一个与解析的过程，所以上面代码在js去进行解析的时候，其实变成了这样：

可以看到变量a的声明跑到console.log的前面去了，只是赋值还是在console.log之后进行赋值的。

console.log得到的结果就是undefined. 这就是所谓的变量提升了。

这时候区别就来了：用var声明的变量会被提升，而用let声明的变量不会被提升。

也就是说：

在声明之前去引用let声明的变量会直接报错，会直接阻断程序的运行。

区别二：重复声明

用var可以重复声明同一个变量，而let不可以。

我们知道，用var声明一个变量之后，其实还可以再次用var去声明这个变量，不过是后者覆盖前者，并没有太大意义。

不过至少不会报错，而如果用let去声明变量的话，就得稍微注意一点，因为let不可以在同一个作用域下重复声明同一个变量：

如果用let重复声明同一个变量，那么这时候就会报错：变量b已经被声明了。

区别三：块级作用域

用let声明的变量支持块级作用域

es6新提出来了一个块级作用域的概念，在之前，作用域只存在函数里面，或者全局。

而es6提出的块级作用域则是一个大括号就是一个块级作用域，也就是说if语句里面都存在作用域概念了，比如：

二、const和let的相同点

const的特性

和let一样，const也是es6新增的关键字，let用于声明变量，而const用于声明常量。

当然，const和let也有一些相同点：

• const 不会变量提升，准确来说应该是常量提升，也就是说不会被提前与解析
• const 不能重复声明同一个常量
• const 支持块级作用域

然后我们再来说一下这两个家伙的不同点：

区别一：const声明的常量不能被修改

正常来说，我们不管是用var声明的变量，还是用let声明的变量，后期都是可以对这个变量再次赋值的，也就是说可以修改。

而常量一旦定义了，后期就不能修改了。

如：

一旦你尝试着去修改一个常量的时候，浏览器就会告诉你，常量不可以被修改！

不过有一个方法是可以做到修改常量的，就是声明常量的时候，给常量赋值一个对象。

然后后期再去修改这个对象里面的值就可以了，不过这么做没有任何的意义。

常量存在的意义就在于其不可更改性。

所以这个方法也就不再多说了

区别二：常量在声明的时候，必须赋值

其实这一点特别好理解，常量在后期没有办法再次进行赋值，所以只能在声明的时候进行赋值。

三、全局变量

另外有一点要特别关注一下，比如：
在上面的代码中，存在全局变量abc, 但是块级作用域内let又声明了一个变量abc, 导致后者绑定这个块级作用域。

所以在let变量声明之前，对tmp的赋值会报错。

ES6中明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量。

从一开始就形成了封闭作用域，凡是在声明之前就使用这些变量就会报错。

那么以上就是关于es6在变量声明这一块的小改动啦！

---

摘至开课吧前端团队，阅读后颇有收获分享至此，希望对大家有所帮助~