JavaScript中l(wèi)et關(guān)鍵詞聲明變量的好處

1. for循環(huán)索引值不會(huì)泄露

如果在for循環(huán)中使用let關(guān)鍵詞聲明變量，索引值只會(huì)在循環(huán)體內(nèi)有效，循環(huán)結(jié)束后，索引值會(huì)被回收;

如果在for循環(huán)中使用var關(guān)鍵詞聲明變量，索引值在循環(huán)結(jié)束后，索引值仍然可以訪問(wèn)，所以在for循環(huán)中使用let關(guān)鍵字聲明變量時(shí)最合適的。

如下面案例：

<script>
    for (var i = 0; i <= 10; i++) {

    }
    console.log(i);     // 輸出：11

    for(let j = 0; j <= 10; j++){

    }
    console.log(j);     // ReferenceError: j is not defined
</script>

運(yùn)行結(jié)果

2. 可以避免變量提升導(dǎo)致變量覆蓋問(wèn)題

<script>
    var name = 'zhang';
    function name_change() {
        console.log(name);      // undefined
        if(false){
            var name = 'wang';
        }
    }
    name_change();          // undefined
</script>

上面代碼中，使用var關(guān)鍵字定義了全局變量name，在name_change()函數(shù)中輸出變量name，但是var關(guān)鍵字存在變量提升，在if代碼塊內(nèi)的變量name會(huì)提升至函數(shù)name_change()函數(shù)頂部，導(dǎo)致輸出的name覆蓋了外層的全局變量name，因此輸出“undefined”。

<script>
    var name = 'zhang';
    function name_change() {
        console.log(name);      // zhang
        if(false){
            let name = 'wang';
        }
    }
    name_change();              // zhang
</script>

如果使用let定義if代碼塊兒內(nèi)的name，那么name變量只在if代碼塊塊內(nèi)有效，不會(huì)影響到全局變量name，所以能夠輸出“zhang”。

3. 代替立即執(zhí)行函數(shù)IIFE

立即執(zhí)行函數(shù)(Immediately-Invoked Function Expression，簡(jiǎn)稱IIFE)的內(nèi)部是一個(gè)獨(dú)立的函數(shù)級(jí)作用域，使用IIFE的目的主要是避免污染當(dāng)前作用域內(nèi)的變量，而使用塊級(jí)作用域則可以直接避免這個(gè)問(wèn)題。

// IIFE 寫法
(function () {
   var arg = ...;
    ...
}());


// 塊級(jí)作用域?qū)懛?{
    let arg = ...;
    ...
}

猜你喜歡：

JavaScript中l(wèi)et和var和const有什么區(qū)別?

Javascript事件類型以及常用方法有哪些?

javascript開(kāi)發(fā)工具有哪些？

JavaScript中如何獲取標(biāo)簽屬性？

黑馬程序員web前端培訓(xùn)課程