es6 let介紹及應用場景

時間 2019-12-09

標籤 es6 let 介紹應用場景欄目 JavaScript 简体版

原文原文鏈接

關於更多es6建議去看阮一峯的博客~javascript

es6入門：http://es6.ruanyifeng.com/java

源碼倉庫：https://github.com/ruanyf/es6tutorialgit

let介紹es6

一.塊級做用域（重點）。

　　　咱們知道，在javascript中只有全局做用域和函數做用域，並不存在塊級做用域。這樣，在使用時就會出現一些問題。下面咱們先來舉例說明let塊級做用域的使用。github

　　　例：安全

　　代碼以下所示：　閉包

        {
            var a=5;
            let b=10;
        }
        console.log(a);
        console.log(b);

　　咱們在控制檯獲得的結果以下所示：函數

　　也就是說，var聲明的變量因爲不存在塊級做用域因此能夠在全局環境中調用，而let聲明的變量因爲存在塊級做用域因此不能在全局環境中調用。this

二.不存在變量提高

var定義變量：能夠先使用，後聲明；而let定義變量：只可先聲明，後使用。spa

例：

        var num1=100;
        console.log(num1);

        let num2=200;
        console.log(num2);

        console.log(i);
        var i=10;

        console.log(j);
        let j=5;

　　　　咱們能夠看到結果以下：

即前兩個都是先聲明後使用，沒有問題。然後兩個都是先使用，後聲明，用var 聲明的顯示undefined，而 let聲明的直接報錯。

說明：console.log(i);

　　　var i=10;

實際上至關於：

　　 var i;

　　 console.log(i);

　　　i=10;

因此會出現undefined的狀況。

三.暫時性死區

　　暫時性死區即：只要一進入當前做用域，所要使用的變量就已經存在，可是不可獲取，只有等到聲明變量的那一行代碼出現，才能夠獲取和使用該變量。

例5：

    var tmp=123;
    if(true){
        tmp="abc";
        let tmp;
    }

結果以下：

也就是說：雖然上面的代碼中存在全局變量tmp，可是塊級做用域內let又聲明瞭一個局部變量tmp，致使後者綁定了塊級做用域，因此在let聲明變量前，對tmp賦值會報錯。此即暫時性死區。

　　注意：ES6規定暫時性死區和不存在變量提高就是爲了減小運行時的錯誤，防止在變量聲明前就使用這個變量，從而致使意料以外的行爲。

　　暫時性死區就是：只要塊級做用域內存在let，那麼他所聲明的變量就綁定了這個區域，再也不受外部的影響。

　　暫時性死區即 Temperary Dead Zone，即TDZ。

注意：暫時性死區也意味着 typeof 再也不是一個百分之百安全的操做。以下：

    if (true) {
      console.log(typeof x);
      let x;
    }

　　這裏若是沒有let x，那麼typeof x的結果是 undefined，可是若是使用了let x，由於let不存在變量提高，因此這裏造成了暫時性死區，即typeof x也是會報錯的。。。從這裏能夠理解暫時性死區實際上就是這一部分是有問題的。

四.不容許重複聲明

    function func (){
        let b=100;
        var b=10;
    }

    function add(num){
        let num;
        return num+1;
    }

    function another(){
        let a=10;
        let a=5;
    }

上述三個獲得的結果均爲：

只是前二者爲 b和num被聲明過了。注意：第二個函數，雖然咱們沒有明確的聲明，可是參數其實是至關於用var聲明的局部變量。

let應用

由於閉包的存在，會給咱們的應用中帶來一些沒必要要的麻煩。好比下面的例子：
```
<body>
    <input type="button" value="按鈕1"    >
    <input type="button" value="按鈕2"    >
    <input type="button" value="按鈕3"    >
    <script type="text/javascript">
        var btns = document.getElementsByTagName("input");
        for (var i = 0; i < 3; i++) {
            btns[i].onclick = function () {
                alert("我是第" + (i + 1) + "個按鈕");
            };
        }
    </script>
</body> 
```
在實際點擊button的時候，彈出的都是」我是第4個按鈕」，這又是爲何呢？是由於閉包致使的，給onclick賦值的函數內部已經訪問了另外一個外部做用域的變量i，而閉包中使用的局部變量的值，必定是局部變量的最後的值。所以點擊的時候，老是會讀取i的最後一個值3，所以形成了每次點擊都是「第4個按鈕」。
遇到這種問題，有三種解決方式供參考。

方式1：給每一個按鈕添加一個屬性，來保存每次i的臨時值。

<body>
    <input type="button" value="按鈕1"    >
    <input type="button" value="按鈕2"    >
    <input type="button" value="按鈕3"    >
    <script type="text/javascript">
        var btns = document.getElementsByTagName("input");
        for (var i = 0; i < 3; i++) {
            //把i的值綁定到按鈕的一個屬性上，那麼之後i的值就和index的值沒有關係了。
            btns[i].index = i;
            btns[i].onclick = function () {
                alert("我是第" + (this.index + 1) + "個按鈕");
            };
        }
    </script>
</body>

方式2：使用匿名函數的自執行

<body>
    <input type="button" value="按鈕1"    >
    <input type="button" value="按鈕2"    >
    <input type="button" value="按鈕3"    >
    <script type="text/javascript">
        var btns = document.getElementsByTagName("input");
        for (var i = 0; i < 3; i++) {   
            //由於匿名函數已經執行了，因此會把 i 的值傳入到num中，注意是i的值，因此num
            (function (num) {
                btns[i].onclick = function () {
                    alert("我是第" + (num + 1) + "個按鈕");
                }
            })(i);
        }
    </script>
</body>

方式3：使用es6新增的let聲明變量i

<body>
    <input type="button" value="按鈕1"    >
    <input type="button" value="按鈕2"    >
    <input type="button" value="按鈕3"    >
    <script type="text/javascript">
        var btns = document.getElementsByTagName("input");
        for (let i = 0; i < 3; i++) {
            btns[i].onclick = function () {
                alert("我是第" + (i + 1) + "個按鈕");
            };
        }
    </script>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。