ES6精解：let、const、塊級作用域

BWrong 發布于2019-08-22 18:20 / 945人閱讀

摘要：命令新增了命令，跟類似，都是用來聲明變量的不允許重復聲明報錯不存在變量提升報錯正確寫法為既要先定義，后面才能有這個值，否則會報錯，如果改成會提示未定義，但是就直接報錯了暫時性死區只要在塊級作用域里面存在則它所聲明的變量就綁定在這個塊級作用域

let命令

ES6新增了let命令，跟var類似，都是用來聲明變量的

1.不允許重復聲明

{
    let a = 1;
    let a = 2;//報錯
}

2.不存在變量提升

    {
       console.log(b);//報錯
        let b = 1;
    }

正確寫法為：

    {
        let b = 1;
        console.log(b);
    }

既要先定義，后面才能有這個值，否則會報錯，如果改成var會提示undefined未定義，但是let就直接報錯了

3.暫時性死區

只要在塊級作用域里面存在let,則它所聲明的變量就綁定在這個塊級作用域上了，不受外界影響

   var a = 2;
   if(true){
       console.log(a); //報錯
       let a = 3;
   }

注意：a先是全局變量，但是let聲明之后，導致let聲明的變量已經綁定在這個塊級作用域上了，在塊級作用域里面a就變成局部變量，所以在let聲明變量前，輸出a會報錯

簡述： let不能重復聲明，不存在變量提升，暫時性死區，作用于塊級作用域，let聲明的變量只有在它所在的區域里面有效

4.let與var的區別

我們知道let和var都是定義變量的，那這兩者之間有什么區別呢，以下例子具體說明：

例1：

  {
        var a = 1;
        let b = 2;
    }
    console.log(a);//1
    console.log(b);//Uncaught ReferenceError: b is not defined

從這個例1可以看出var定義的是全局變量，而let定義的話只能在當前作用域下有效，如果出了作用域者無效

例2：

    {
        console.log(a); //undefined
        var a = 100;

        console.log(b); //Uncaught ReferenceError: b is not defined
        let b = 100;
    }

從例2可以看出let必須得定義后才能生效，否則會報錯；而var沒定義也是可以的，值為undefined,也就是var存在變量提升

塊級作用域

在講let的時候，我們提到了塊級作用域，那么什么是塊級作用域呢？

 var tmp =12;
    function f() {
        console.log(tmp);
        if (false) {
            var tmp = "hello world";
        }
    }
    f(); // undefined

tmp會被內層覆蓋，所以輸出undefined，因為var存在變量提升

let實際上就是塊級作用域，比如：

    {
        var a = 1;
        {
            var a = 2;
        }
        console.log(a);//2
    }

如果用var外部聲明的a會被內部聲明的給覆蓋，但是如果用let

    {
        let a = 1;
        {
            let a = 2;
        }
        console.log(a);//1
    }

用上let這個時候就不會被覆蓋，外部的a綁定的是外部作用域，內部的a綁定的是內部作用域

還有一個問題我們肯定經常會碰到，如：

  var callbacks = [];
    for(var i = 0;i < 5;i++){
        callbacks[i] = function () {
            return i;
        }
    }
    console.log(callbacks[0]()); //5

因為i被后面覆蓋，所以一直都是5
在es5中我們是這么解決的：

   var callbacks = [];
    for(var i = 0;i < 5;i++){
        (function (i) {
            callbacks[i] = function () {
                return i;
            }
        })(i);
    }
    console.log(callbacks[0]()); //0

然而ES6中我們就可以利用let的塊級作用域了

var callbacks = [];
for(let i = 0;i < 5;i++){
    callbacks[i] = function () {
         return i;
    }
}
console.log(callbacks[0]()); //0

從這里我們可以看出，塊級作用域其實就是立即執行函數(function(){})()

const命令

const跟let類似，只是const是聲明常量，而let是聲明變量

1.不能重復聲明

{
    const a = 1;
    const a = 2;//報錯
}

2.一旦聲明就不能改變

{
    const a = 1;
    a = 2;//報錯
}

注意： const實際上不是變量不能改變，而是變量聲明的地址不能改變，如下：

{
    const a = {};
    a.name = "Lily";
    console.log(a); //輸出：{name: "Lily"}
}

但是如果改成：

{
    const a = {};
    a = {name:"Lily"};
    console.log(a); //報錯
}

所以改變變量里面的屬性是不會報錯的，只有把整個變量都改變即改變變量地址，那就會報錯

3.聲明一定要有值

{
    const a; //報錯
}

所以常量聲明一定要有初始值

4.暫時性死區

const a = 2;
{
    const a = 1;
}
console.log(a);//2

const跟let一樣都會產生塊級作用域，內部跟外部定義的變量毫不相干

5.不存在變量提升

{
    console.log(a);//報錯
    const a = 1;
}

const跟let一樣，還沒有定義都會報錯

簡述： const必須初始化，聲明一定要有值，無法重復聲明，是塊級作用域

以上個人總結，有什么不對的地方歡迎留言指出！

云服務器 GPU云服務器作用域中作用域作用域規則作用域實例

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95746.html

ES6學習第一章 let 和 const 命令

摘要：外層作用域不報錯正常輸出塊級作用域與函數聲明規定，函數只能在頂層作用域和函數作用域之中聲明，不能在塊級作用域聲明。規定，塊級作用域之中，函數聲明語句的行為類似于，在塊級作用域之外不可引用。同時，函數聲明還會提升到所在的塊級作用域的頭部。前言：最近開始看阮一峰老師的《ECMAScript 6 入門》(以下簡稱原...

番茄西紅柿 2021-11-24 09:39 評論0 收藏2637
ES6學習摘要（01）（新人學習）

摘要：入門一前言由于最近本人在學習，做一些筆記能夠更好的熟悉，就趁此機會來寫一篇關于的新人學習摘要吧。的作用域與命令相同只在聲明所在的塊級作用域內有效。塊級作用域新增方式和實際上為新增了塊級作用域。同時，函數聲明還會提升到所在的塊級作用域的頭部。 ECMAScript6/ES6 入門一、前言由于最近本人在學習ES6，做一些筆記能夠更好的熟悉，就趁此機會來寫一篇關于ES6的新人學習摘要吧。...

dmlllll 2019-08-21 17:59 評論0 收藏0
es6塊級作用域

摘要：塊級作用域存在于兩個地方函數內部。如下例應該返回創建數組的構造函數即這是數組返回這是數組從上例，我們可以知道即使全局作用域中已經定義了變量或者已經存在了屬性，但我們之后定義的變量則會覆蓋之前已經定義好的或者已經存在的變量屬性。一.var 聲明與變量提升機制在JavaScript中使用var定義一個變量，無論是定義在全局作用域函數函數的局部作用域中，都會被提升到其作用域的頂部，這也是...

cnTomato 2019-08-23 16:19 評論0 收藏0
es6學習之let和const命令

摘要：和命令命令是在它所在的代碼塊有效，它屬于塊級作用域，新增。只有全局作用域和函數作用域。 let和const命令 let命令是在它所在的代碼塊有效，它屬于塊級作用域，es6新增。es5只有全局作用域和函數作用域。let命令存在暫時性死區（TDZ），即在申明前使用就會報錯,不存在變量提升 console.log(a); // 報錯 let a = 111; ==let不允許在相同作用域中，...

DrizzleX 2019-08-23 16:49 評論0 收藏0
ES6走走看看—由塊級作用域引出的一場變革

摘要：塊級聲明塊級聲明是用于聲明在指定塊的作用域之外無法訪問的變量。美元符號可以放到任何一個位置，甚至單獨一個美元符號。塊級函數從開始，在嚴格模式下，塊里的函數作用域為這個塊。持續更新的github筆記，鏈接地址：Front-End-Basics 此篇文章的筆記地址：字符到底發生了什么變化 ES6走走看看系列，特別鳴謝奇舞讀書會~ 塊級作用域又稱詞法作用域，存在于：函數內部（...

荊兆峰 2019-08-23 11:49 評論0 收藏0