1. 程式人生 > >es6 -- 基本用法

es6 -- 基本用法

一、let 命令 -基本用法

1、塊及作用域

     var d = 1;    
     if(true){
        var d = 4;     // 6之前的js作用域有 1、全域性作用域  2、函式級作用域 3、eval作用域
     }
     console.log(d)    ->  4   d被覆蓋

     let c = 2;
     if (true) {
        let c = 7;
     }
     console.log(c)    ->  2 

上面的程式碼中 分別用 var 和 let 聲明瞭兩個變數 。var 宣告的即使在作用域的也可以覆蓋之前宣告 。 let 宣告的變數不會被覆蓋,這表明 let 宣告的變數在塊級作用域外無效。

    // for 迴圈的計數器就很適合使用 let 命令。
    for (let i = 0; i < 10; i++){
       // .....
    }
    console.log(i)
    //ReferenceError: i is not defined 

上面程式碼中 計數器 i 只在 for 迴圈體內部有效,在迴圈體外引用就回報錯。 如果用 var 宣告變數 i  的話,那麼 i 在全域性作用域內全都有效,所以全域性只有一個變數 i。

 2、不存在變數提升

    
    console.log(a)  -> undefined
    var  a =  9;
   
    console.log(b)  -> ReferenceError
    let b =  10;

在上面程式碼中, 表明了 var 存在變數提升  let 不存在變數提升(也稱 預解釋)。"變數提升"的現象,既變數可以在宣告之前使用,值為 undefined  。一般邏輯上,變數應該在宣告語句之後才可以被使用。而 let  糾正了這一現象,它所宣告的變數一定要在聲明後才可以使用否則報錯。

3、暫時性死區

    var a = 124;
    if(true){
        a = 'abc';  -> ReferenceError 
        let a
    }

在上面的程式碼中,存在全域性變數 a 但在塊級作用域內 let 又聲明瞭一個區域性變數 a ,導致後者繫結這個塊級作用域,所以在let宣告變數前,對 a 賦值會報錯。

也就是說,在區塊中有 let 和 const 命令 ,則這個區塊對當前宣告的變數,形成一個封閉作用域。只要在宣告前就是用這些變數,就回報錯。

總之在程式碼塊內,使用 let 宣告變數之前,該變數都是不可使用的。這在語法上成為 "暫時性死區"(temporal dead zone) 簡稱TDZ。

4、不允許重複宣告

  function () {
         let a = 3;
        let a = 5; // ->報錯
     }

5、結構賦值

    let cat = 'maomao';
    let dog = 'gougou';
    let zoo = {cat, dog}
    console.log(zoo)  // -> {cat: "maomao", dog: "gougou"}

6、 拼接字串

    var string = document.getElementById("string");
    var as = "3";
    var ex = "4";
    string.innerHTML = (`
    There are <b>${as}</b>items
    in your basket,<em>${ex}</em>
    are on sale;
    `)

 

二、const 命令 

 

1、基本用法 

const 用來宣告一個只讀的常量。而且常量一旦宣告,常量的值就不能被改變。

   const a = 3.14;
    console.log(a);  //-> 3.14 

    a = 4.21;
    console.log(a)  //-> TypeError: Assignment to constant variable.

在上面程式碼中 改變常量 a 的值會報錯。

   const  foo ;      //-> SyntaxError: Missing initializer in const declaration 

在上面程式碼中 const 只宣告不賦值會報錯。這就意味著,const 一旦宣告常量就立即初始化,不能以後在賦值。

const 同 let 一樣不存在常量提升,存在暫時性死區。

2、本質 

實際上const保證的並不是常量的值不可被改動,而是變數指向的那個記憶體地址不能改動。常量指向的記憶體地址只是一個指標,const只能保證這個指標是固定的,至於它的資料結構是否可變就不一定了。

   const foo = {};

   foo.value = 'hello';  // 給 foo 新增一個屬性可以實現

   console.log(foo.value)  // -> hello

   foo = {}; //把 foo 指向另一個物件 就會報錯

在上面程式碼中 常量 foo 存貯的是一個地址,這個地址是不可變 ,所以報錯。但是物件本身是可以變得,所以我們可以為其新增新屬性。

再來看一個數組

const arr = [];
arr.push('1');
console.log(arr.length); // -> 1
arr = ['die']  // ->將arr重新賦值  報錯

在上面程式碼中 arr 這個陣列本身是可寫的,但是將另一個賦給 arr 就會報錯。

因此 當我們宣告常量遇到陣列、物件時要小心。

ps: 將物件凍結方法 Object.feeeze  =>  const foo = Object.feeeze ( {} );  

end: 本人接觸es6 有段時間了,最近又在看阮一峰es6 所以就當一個小結好啦。 有問題,多多指教。