ES6新特性--var、let、const

qingshanli1988 發(fā)布于2019-08-23 17:20 / 723人閱讀

摘要：不存在塊級作用域，具有變量提升機制。在同一作用域內(nèi)只能聲明一次。注意其針對的是和所在的塊級作用域。在編程過程中如果需要變量提升則使用聲明變量，否則采用和聲明變量，以便更好地控制作用域，避免變量的混用不可控。

1、 var、let、const

var不存在塊級作用域，具有變量提升機制。
let和const存在塊級作用域，不存在變量提升。在同一作用域內(nèi)只能聲明一次。

## var的說明 ##
function a(flag){
    if(flag){
        console.log(value);      //結(jié)果為undefined，已聲明但未初始化
        var value=1;
        return value;
    }else{
        console.log(value);      //仍舊可以訪問到value;值為undefined
    }
}
//上述代碼等價于
function a(flag){
    var value;
    if(flag){
        value=1;
        return value;
    }else{
        console.log(value);      //仍舊可以訪問到value;值為undefined
    }
}

## let說明 ##
function a(flag){
    if(flag){
        console.log(value);       // 報錯,因為value此時位于TDZ(后面講)內(nèi)，無法訪問
        let value=1;
        return value;
    }else{
        console.log(value);      //value is not defined
    }
}

## const說明 ##
function a(flag){
    if(flag){
        console.log(value);       // 報錯,因為value此時位于TDZ(后面講)內(nèi)，無法訪問
        const value=1;        //const必須在聲明的時候初始化，并且其值無法被重新賦值
        return value;
    }else{
        console.log(value);      //value is not defined
    }
}

2、const在聲明時需要賦值且無法修改，但如果常量是對象，則對象的屬性可以修改

const obj={
    name:"Alisa",
    age:25
}
obj=23;        //報錯
obj.age=23;    //允許修改

3、TDZ暫存性死區(qū)
JavaScript引擎在掃描代碼發(fā)現(xiàn)變量聲明時，如果是使用var聲明的變量，則講變量提升至作用域頂部；如果是采用let和const聲明的變量，則將其放到TDZ中。訪問TDZ中的變量會觸發(fā)運行時錯誤，只有執(zhí)行過變量聲明語句后，變量才會從TDZ中移出，然后才可以正常訪問。注意：其針對的是let和const所在的塊級作用域。

if(flag){
    console.log(typeof value);     //引用錯誤
    let value="time";
}

console.log(typeof value);         //undefined
if(flag){
    console.log(typeof value);     //引用錯誤
    let value="time";
}

4、let、const在循環(huán)中的應用

//輸出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變?yōu)閏onst則會報錯，因為i++操作試圖修改const聲明的常量

//遍歷對象
var person={
    name:"Alisa",
    age:23
};
for(let key in person){
    console.log(key);    //輸出name、age
}
//將上面的let換位const不會報錯，因為每次key的值并不相同，即每次定義一個新的變量

5、var可能修改全局屬性（如瀏覽器環(huán)境下的window對象的屬性），而let和const不會修改只是遮蔽

var RegExp="hello";
console.log(window.RegExp);       //"hello"
var say="hi";
console.log(window.say);          //"hi"

let RegExp="hello";
console.log(RegExp);       //"hello"
console.log(window.RegExp === RegExp);       //false

const say="hi";
console.log(say);          //"hi"
console.log(window.say);          //undefined

6、實際應用時的tips
使用塊級綁定時：聲明變量默認采用const，只有確實需要改變變量時才使用let。
在編程過程中如果需要變量提升則使用var聲明變量，否則采用let和const聲明變量，以便更好地控制作用域，避免變量的混用、不可控。