ES6语法:var、let、const的区别详解

今天来讲说es6的语法，最基础的也就是var，let，const 的用法与区别了，咱们来看看他们之间的恩怨情仇。
首先来讲说var，这个只要是学过js的都知道，它是用来声明一个变量的，可是它在开发中也会遇到一些问题，比较难解决。先来看看下面的代码：

 

var str="hello world";
​
function testVar(){
　　var str="hello";
}
testVar();
console.log(str);

这段代码的结果是 "hello world"，这说明在var 申明的变量，即便是一样的名字，在不一样的块中，在外层块中的变量优先级更高，也就是说，在外层优先使用而且只能使用当前块中的变量；而在他的内部块中的变量，好比说这个函数里面的str，他其实也是优先使用块内的str变量，会屏蔽掉外面的str变量，这是一点。再来看看下面一段代码

function variableHoisting(){
　　if(condition){
　　　　var test="hello javaScript";
　　}else{
　　　　console.log(test)
　　　　//这里能够访问到test，可是它是undefined，由于初始化为它赋值成了undefined
　　}
　　//这里也能够访问到test
}

可能你会感到奇怪，个人var 申明的变量在if 代码块里面，为何个人else里面也能访问呢，其实上面这段代码至关于下面这段代码

 

function variableHoisting(){
　　var test;
　　if(condition){
　　　　test="hello javaScript";
　　}else{
　　　　console.log(test)
　　　　//这里能够访问到test，可是它是undefined，由于初始化为它赋值成了undefined
　　}
　　　　//这里也能够访问到test
}

如今知道了吧？这就是所谓的变量提高，我在if里面申明的变量，其实浏览器在预解析的时候就对var ，以及function关键字的变量或者方法进行了处理，处理后的代码就是上面这段代码（固然，我以前讲过一篇函数声明与函数表达式的区别，你能够看看，你会知道更多。）看到这里，也许你不会感受var 有什么很差的地方，再往下看看:

```javascript

var funcs = [];
for (var i = 0; i < 10; i++) {
　　funcs.push(function() {
　　　　console.log(i); 
　　});
}
funcs.forEach(function(func) {
　　func(); // 输出数值 "10" 十次
});

可能你想的是输出0,1,2,3,4,5,6,7,8,9可是这不是正确答案，这只能输出10个10，为何呢？由于循环完成事后，i已是10了，再次调用的时候，这个i值在每次迭代过程当中共享了。
下面咱们就来引入一下let，以及const。let 也是用来申明变量的，可是他申明的变量是块级做用域，什么意思呢，看下面

function testLet(){
　　if(condition){
　　　　let str="hello let"
　　}else{
　　　　//这里访问不到str 
　　}
　　　　//这里也访问不到str
}

 

看了上面，你也许就知道了什么是块级做用域，也就是一个大括号嘛，括号里面就是一块。用let申明的变量是没有以前所说的变量提高这一说的，因此在外部块里面是访问不到let申明的变量的。这样，以前说var缺陷的哪一块代码通过小小的改变就能正常输出0..9了，你看看

var funcs = [];
for (let i = 0; i < 10; i++) {
    funcs.push(function () {
        console.log(i);
    });
}
funcs.forEach(function (func) {
    func(); // 输出数值 0-9
});    

 

这就是let，与var的一个小区别，固然若是说你申明变量的时候不指名是用的var，仍是let，编译的时候会将这个变量解析为var申明的变量。

无论是var，仍是let，他们是不能重复申明的，好比像下面这样

var str="var";
let str="let";

这样是会报错的，编译的时候，不能重复定义。

而后就是const了，这个其实就是常量的单词的英文缩写（constant），没错，这是用来申明一个常量的。什么事常量呢，顾名思义，就是一旦赋值就不能再改变了。好比说：

 

const MAX=3.1415926;
MAX=3.14;

 

这样是不行的，会报错，常量不能改变的。来看看const的循环，在最基础的for -i的循环里面，他是会报错的，运行一次事后就会报错，可是在for-in 循环里面他是不会报错的，固然在for-of循环里面也不会

 

var funcs = [],
object = {
　　a: true,
　　b: true,
　　c: true
};
// 不会致使错误
for (const key in object) {
　　funcs.push(function () {
　　console.log(key);
　　});
}
funcs.forEach(function (func) {
　　func(); // 依次输出 "a"、 "b"、 "c"
});

 

这样是不会报错的，来看看到底是为何呢？

上面说了，const申明的变量是不能改变的，可是，咱们试试申明一个对象呢，而后改变对象里面的属性的值。

 

const object={
name:"学习笔记",
age:18
}
console.log(object.name)
​
object.name="hello world"
console.log(object.name)

 

这段代码，第一个会打印出来“学习笔记”，第二个会打印出来“hello world”，为何呢？缘由在这，其实，这段代码改变的不是object这个对象变量，而是这个变量的属性，知道了这个就不难理解为何在for-in ，for-of循环里面，const不会报错了吧？若是对你有帮助的话，记得点个关注哦，若是你发现文中有错误，记得帮我指出来。

微信公众号