ES6學習筆記第二章

let 和 const命令

    1 let命令

    用法:

    ES6新增let命令,用於聲明變量,用法類似var,只是let聲明的變量是塊級作用域內有效

    例:

    {

        let a = 10;

        var b = 1;

    }

    a // a is not defined

    b // 1

    根據返回值可以看出,let聲明變量時的作用域只在其代碼塊內

    for 循環的計數器就很適合使用let來聲明變量。

    var a = [];

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

        a[i] = function(){

            console.log(i);

        };

    }

    a[6]();//10

    如果用let聲明變量i;

    a[6]();//6

    因爲let聲明的i只在本輪循環內有效。所以每次循環的i其實都是新的變量,於是輸出6。

    


    let聲明變量不存在變量提升;

    例:

    console.log(foo);

    let foo = 2;

    執行會報錯,但是如果用var聲明,得到的結果就是2。

    

    暫時性死區:

    只要塊級作用域內存在let命令,它所聲明的變量就“綁定這個區域”,不受外部影響。

    例

    var tmp =123 ;

    if(true){

        tmp = 'abc';

        let tmp;

     }

    報錯,let綁定了if內的塊級作用域,在let聲明變量前,對tmp賦值會報錯。

    

    ES6明確規定,如果區塊 存在let和const命令,則這個區塊對這些命令聲明的變量從一開始就形成封閉作用域。

    在代碼塊內,使用let命令聲明變量之前,該變量都是不可用的。語法上稱“暫時性死區”,簡稱TDZ。

    

    let不允許在相同作用域內重複聲明同一個變量。(這個就不解釋了)

    

    2.塊級作用域到底是個啥

    ES5只有函數作用域和全局作用域,沒有塊級作用域,那麼會帶來以下不合理情況:

    例1

    var tmp = new Date();

    funciton f(){

        console.log(tmp);

        if(false){

            var tmp = "hello world";

        }

    }

    f() //undefined;

    變量提升內層tmp變量覆蓋了外層的tmp變量

   例2

     for 循環計數的變量泄露爲全局變量。

    


    ES6的塊級作用域

    function f1(){

        let n = 5;

        if(true){

            let n = 10;

        }

        console.log(n);//5

    }

    最後輸出5,表明外層代碼不受內層代碼塊的影響。如果使用var, 最後的輸出值爲10.

    ES6允許塊級作用域任意嵌套;

    另外ES6規定,函數本身作用域在其所在的塊級作用域內。

    fuction f(){ console.log(1)};

    (function (){

        function f(){
            console.log(2);
        }

        f();

    }());

    ES5//2,

    ES6//1。


    嚴格模式下,函數只能在頂層作用域和函數內聲明,其他情況(if,for)下的聲明都會報錯。


3.const命令

    const 用來聲明常量。 一旦聲明,其值不可改變。

    const 作用域等同於let,只在聲明所在的塊級作用域內有效。

    const 命令只是保證變量名指向的地址不變,並不保證該地址的數據不變,所以將一個對象聲明爲常量必須非常小心。

    例 

    const a=[];

    a.push("hello");//可執行

    a.length = 0; //可執行

    a = ['Dave'];// 報錯。

    數組本身是可寫的,但是要把另一個數組賦值給a,就會報錯。

    如果想讓對面被凍結,本身也不可寫,應該使用Object.freeze方法。

    ES6一共6中聲明變量的方法:

    var function let const import class

    

4.跨模塊常量

    // constants.js 模塊

    export const A= 1;

    export const B= 3;

    export const C= 4;

    

    // test1.js 模塊

    import * as constants from './constants';

    console.log(constanst.A);//1

    console.log(constanst.B);//3 

    

    //test2.js模塊

    import {A,B} from './constants';  

    console.log(A);//1

    console.log(B);//3 


5.全局對象的屬性

    ES5:

    window.a = 1;

    a //1;

    

    a = 2;

    window.a //2


   ES6: 

    let b = 1;

    window.b // undefined; 

    

    ES6規定 var 命令和function 命令聲明的全局變量依舊是全局對象的屬性

    let命令 、 const命令、 class命令聲明的全局變量不屬於全局對象的屬性

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章