ES6变量声明 ------ let and const

Posted 2020-09-21

　　在ES5中，声明变量的方式只有一种, 那就是var, 如var mes =”hello”, 但是用var声明变量有一个比较奇怪的地方，就是变量声明的提升，比如在函数中，无论我们声明变量的代码写在什么地方，它都是在函数顶部声明变量，在全局作用域下，则是在script标签顶部声明变量，这就有点郁闷了，因为按照我们正常的思维方式，我们代码是一行一行写的，只有用到某个变量的时候，才进行声明变量，并且声明变量后，只有它后面的代码才可以用，现在成了，我们在后面声明变量，在前面也可以用了，这不符合我们的直觉，而不符合我们直觉的东西就会经常会出问题。 比如我们经常碰到的一道题目

var a = "global";
function getValue() {
    console.log(a);  // undefined
    var a=5;
    console.log(a)   // 5
}

　　第一个输出竟然是undefined,   就是因为在函数内部对变量的声明var a; 进行的提升，如果对变量声明进行提升的同时把赋值进行提升也好理解一些，但这是不可能的。变量声明提升， 只把变量声明的部分提升到函数顶部，而变量赋值的部分却在原来的位置不动，这也很郁闷，因为就像上面我们写的代码一样，经常声明变量的同时进行初始化操作，这也是一个反人类设计，也就是造成了上面的问题。

var a = "global";
function getValue() {
    var a;  // 变量声明提升
    console.log(a);  
    a=5;    // 变量的赋值操作
    console.log(a)  
}

　　还有一个问题，就是块级作用域。当我们在一个大括号（所谓的块）中声明一个变量时，本来想只在这个大括号中起作用，没想到它在整个函数内都起作用，这也是js中没有块级作用域，只有函数作用域的原因。在下面的代码中，只有if 条件成立时，才声明变量进行赋值，但是我们发现，value 值在else 中也能访问，原因也是把var value 声明提到了函数的顶部。

  function getValue(condition){
            if(condition) {
                var value = ‘blue‘;
                return value
            }else {
                console.log(value)  
                return null;
            }
        }

 　　为了解决var 声明变量带来的问题，ES6引入let 和const 两个关键字来声明变量。

　　let 声明变量的方式和 var 是一样的，我们怎么使用var，就可以怎么使用let, 只不过let解决了var 声明变量带来的问题，使用let 声明的变量，它拥有块级作用域，而且它也不会进行变量声明提升. 我们把上面代码中的var 改成let 看一下，

function getValue(condition){
    console.log(value)  // Uncaught ReferenceError: value is not defined
    if(condition) {
        let value = ‘blue‘;
        return value
    }else {
        console.log(value)  //Uncaught ReferenceError: value is not defined
        return null;
    }
}
getValue(false)

　　可以看到报错了, 这两个报错证明了它是块级作用域（在if 块中声明的，只能在if 块中访问），且不会自动提升；由于let 声明不会进行自动提升,那么在声明之前访问该 变量，肯定是不可以的，所以

　　除此之外，let 不允许重复声明变量。在同一个作用域内，不论我们用什么方式, var, let 还是const , 声明了一个变量，如果再用let声明该变量，它就会报错。这也算修正了 var 重复声明的问题。在ES5中，如果我们用var 声明了一个变量，再用var 声明该变量，它就当该声明没有发生，如果再次声明的时候还有初始化操作，它就当成一个普通的赋值操作。

// es6 let声明不允许重复声明变量。
var value = 5;
let value;   //Uncaught SyntaxError: Identifier ‘value‘ has already been declared 报错，value 已经声明过了。

//var 对一个已经声明的变量再次声明，它只会视而不见，什么都没有发生
var value = 6;
var value; 
console.log(value) // 6

// var重复声明变量时，如果还带有初始化操作，它就当成一次普通的赋值操作
var value =7;
var value = 8;
console.log(value)  //8