1. 程式人生 > >ES6語法的let與var的區別

ES6語法的let與var的區別

最近做小程式,看到了ES6語法,於是就學習學習。ES6是JavaScript的下一代標準,所以學習學習是有必要的。多的不說了,現在我們來看看最簡單的letvar的宣告變數的區別!

下面我們來一些片段程式碼:

    {
        var a = 1;
        let b = 2;
        console.log('區塊內a=',a);
        console.log('區塊內b=',b);
    }
    console.log('區塊外a=',a);
    console.log('區塊外b=',b);

上面程式碼說明,let宣告的程式碼只在所宣告的區塊內有效,在其外面訪問就報 b is not defined

 的錯誤 ,因此let很適合在for迴圈中使用,下面我們來看看相關例子。

    var a = [];
    for (var i = 0; i < 6; i++){
        console.log("for迴圈中的i",i);
        a[i] =function () {
            console.log(i)
        }

    }
    console.log("for迴圈外的i",i);
    a[2]();

上述程式碼為什麼是6呢?當初我看到時也是很懵逼,後來想了想才明白,就是因為var宣告的變數是全域性的,在循壞挖I外部也可以訪問到,而循壞外的 i

已經是 6 了,所以只要是在迴圈外訪問裡面的函式,即 a[下標0~5之間任意一個數](),該函式裡的 i 都是迴圈外部i的值 6。但是如果a下標>=6,會報錯,如圖所示

而let在for中宣告的變數,外部不能訪問:

    var a = [];
    for (let i = 0; i < 6; i++){
        console.log("for迴圈中的i",i);
        a[i] =function () {
            console.log(i)
        }

    }
    a[3]();
    console.log('迴圈外i',i);

上面程式碼中,變數ilet宣告的,當前的i只在本輪迴圈有效,所以每一次迴圈的i其實都是一個新的變數,所以最後輸出的是3。你可能會問,如果每一輪迴圈的變數i都是重新宣告的,那它怎麼知道上一輪迴圈的值,從而計算出本輪迴圈的值?這是因為 JavaScript 引擎內部會記住上一輪迴圈的值,初始化本輪的變數i時,就在上一輪迴圈的基礎上進行計算。

特別注意:

for迴圈中小括號中宣告的變數與迴圈體中宣告的變數處在不同的作用域中,如下

for (let i = 0; i < 3; i++) {
    let i = 'ddd';
    console.log(i);
}
//ddd
//ddd
//ddd

輸出3次 ddd

 

另外,let宣告的變數不能在宣告變數之前呼叫,而var宣告的變數就可以用使用(let宣告是為了讓大家養成良好的編碼習慣)

console.log(b);    //undefined
var b;

console.log(a);     //a is not defined
let a; 



這是let“暫時性死區”   ,這是用typeof就要特別注意了,比如下面的程式碼

console.log( typeof s); //s is not defined

let s;


console.log(typeof v); //undefined

var v;

還有一些死區不容易發現,比如:

    //不容易發現的死區,y在宣告之前呼叫
    function demo1(x=y,y=2) {
        return [x,y]
    }
    demo1();    //y is not defined


    //不容易發現的死區 ,x在宣告之後呼叫
    function demo1(x=2,y=x) {
        return [x,y]
    }
    demo1();    //[2,2]




    var x=x;    //undefined
    let z=z;    //z is not defined

好啦,今天就到這吧!繼續碼程式碼。。。。