首页 > 代码库 > ES6变量声明 ------ let and const

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

  在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 = http://www.mamicode.com/‘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 = http://www.mamicode.com/5;
let value;   //Uncaught SyntaxError: Identifier ‘value‘ has already been declared 报错,value 已经声明过了。

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

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

 

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