與Var關(guān)鍵字相比let有哪些新特性？

let是ES6中新增的用于聲明變量的關(guān)鍵字。在ES6之前，使用var關(guān)鍵字來聲明變量。與var關(guān)鍵字相比，let關(guān)鍵字有一些新的特性，下面針對(duì)這些新特性進(jìn)行講解。

1.let關(guān)鍵字聲明的變量只在所處的塊級(jí)作用域有效

使用let關(guān)鍵字聲明的變量具有塊級(jí)作用域。塊級(jí)作用域有以下兩個(gè)作用：①防止代碼塊內(nèi)層變量覆蓋外層變量;②防止循環(huán)變量變成全局變量。為了讓讀者更好地理解，下面將詳細(xì)講解塊級(jí)作用域這兩個(gè)作用的使用場(chǎng)景。

(1)防止代碼塊內(nèi)層變量覆蓋外層變量，示例代碼如下。

< script >
    if (true){
      let a = 10; 
      console.log(a)； //輸出結(jié)果：10
    }
    console.log(a): //報(bào)錯(cuò)，a未定義
< /script>

上述代碼中，第3行代碼使用lt關(guān)鍵字在if語句的大括號(hào)內(nèi)聲明了一個(gè)變量a，此時(shí)if語句的大括號(hào)內(nèi)就是變量a的塊級(jí)作用域范圍。第4行代碼輸出變量a，結(jié)果為10。第6行代碼在let關(guān)鍵字所處的塊級(jí)作用域之外輸出變量a，結(jié)果是瀏覽器會(huì)在控制臺(tái)中報(bào)錯(cuò)，錯(cuò)誤信息為ais nt defined(a未定義)。這說明let關(guān)鍵字聲明的變量只在所處的塊級(jí)作用域內(nèi)有效，也就是說變量a只能在if語句的大括號(hào)中被訪問。

(2)防止循環(huán)變量變成全局變量，示例代碼如下。

<script>
  for (let i = 0; i < 2; i++) { }
  console.log(i)；//報(bào)錯(cuò)，i未定義
</script>

上述代碼中，第2行代碼在for循環(huán)的小括號(hào)中使用let關(guān)鍵字聲明了變量i，該變量是與for循環(huán)進(jìn)行綁定的，只能在for循環(huán)的小括號(hào)內(nèi)和大括號(hào)內(nèi)訪問。由于在for循環(huán)的外面是訪問不到變量;的，所以第3行代碼嘗試輸出變量i會(huì)報(bào)錯(cuò)，錯(cuò)誤信息為iis not defined(i未定義)。

2.let關(guān)鍵字聲明的變量不存在變量提升

使用JavaScript中的var關(guān)鍵字聲明變量時(shí)，變量可以先使用后聲明，這種現(xiàn)象稱為變量提升。但在其他大多數(shù)編程語言中，變量只有聲明后才可以使用。vau關(guān)鍵字的變量提升很容易給開發(fā)人員帶來困擾。在ES6中，變量的使用規(guī)范更加嚴(yán)格，使用let關(guān)鍵字聲明的變量只能在聲明之后才可以使用，否則就會(huì)報(bào)錯(cuò)。

下面通過代碼演示let關(guān)鍵字聲明的變量不存在變量提升的現(xiàn)象，示例代碼如下。

<script>
  console.log（a)；//報(bào)錯(cuò)，無法在初始化之前訪問a
  let a = 10;
</script>

上述代碼中，第2行代碼在使用變量a時(shí)，因?yàn)樽兞縜沒有被定義，所以變量a是不存在的，這時(shí)若是使用它，就會(huì)報(bào)錯(cuò)誤信息Cannot access' before initialization(無法在初始化之前訪問a)。這表明使用let關(guān)鍵字聲明的變量a不會(huì)發(fā)生變量提升。

3.let關(guān)鍵字聲明的變量具有暫時(shí)性死區(qū)特性

使用let關(guān)鍵字聲明的變量具有暫時(shí)性死區(qū)特性。let關(guān)鍵字聲明的變量不存在變量提升，其作用域都是塊級(jí)作用域，在塊級(jí)作用域內(nèi)使用let關(guān)鍵字聲明的變量會(huì)被整體綁定在這個(gè)塊級(jí)作用中形成封閉區(qū)域，不再受外部代碼影響，這種特性就稱為“暫時(shí)性死區(qū)”。

下面通過代碼演示let關(guān)鍵字聲明的變量的暫時(shí)性死區(qū)特性，示例代碼如下。

<script>
  var num = 10;
  if (true) {
    console.log(num)； //報(bào)錯(cuò)，無法在初始化之前訪問num
    let num = 20;
  } 
</script>

上述代碼中，第2行代碼在全局作用域下使用var關(guān)鍵字聲明了一個(gè)變量mum，賦值為10;第5行代碼在if語句的大括號(hào)內(nèi)使用let關(guān)鍵字聲明了相同名字的變量mum，這兩個(gè)變量之間是毫無關(guān)系的。根據(jù)let關(guān)鍵字暫時(shí)性死區(qū)的特性，第4行代碼在聲明變量num前使用變量mum會(huì)出錯(cuò)。上述代碼執(zhí)行后，在瀏覽器控制臺(tái)會(huì)看到Cannot access 'num' before initialization(無法在初始化之前訪問num)的錯(cuò)誤信息。