ES6系列之宣告變數let與const

本篇文章主要是跟大家分享了關於ES6系列的宣告變數let與const，有興趣的朋友可以參考一下本文中的內容

簡介

#概念

ES6 的第一個版本，在2015 年6 月發布了，正式名稱就是《ECMAScript 2015 標準》（簡稱ES2015）。 ES6 既是歷史名詞，也是一個泛指，意義是5.1 版以後的JavaScript 的下一代標準，涵蓋了ES2015、ES2016、ES2017 等等，而ES2015 則是正式名稱，特指該年發布的正式版本的語言標準。
各大瀏覽器對ES6的支援：kangax

Babel

Babel 是個廣泛使用的ES6 轉碼器，可以將ES6 程式碼轉換為ES5程式碼，從而在現有環境執行。
Babel 的設定檔是.babelrc，存放在專案的根目錄下。使用 Babel 的第一步，就是設定這個檔案。

宣告變數

ES5 只有兩種宣告變數的方法：var指令和function指令，ES6 除了加入let、const、import和class指令。所以，ES6 一共有 6 種宣告變數的方法。

ES5 之中，頂層物件的屬性與全域變數是等價的。 ES6 為了改變這一點，一方面規定，為了保持相容性，var指令和function指令宣告的全域變量，依舊是頂層物件的屬性；另一方面規定，let指令、const指令、class指令宣告的全域變量，不屬於頂層物件的屬性。也就是說，從 ES6 開始，全域變數將逐步與頂層物件的屬性脫鉤。

let

ES6 新增了let指令，用來宣告變數。它的用法類似var，但是所宣告的變量，只在let指令所在的程式碼區塊內有效。

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

不允許重複宣告

let不允許在相同作用域內，重複宣告同一個變數。

// 报错
function func() {
  let a = 10;
  var a = 1;
}

function func(arg) {
  let arg; // 报错
}

function func(arg) {
  {
    let arg; // 不报错
  }
}

區塊層級作用域

• ES6 允許區塊層級作用域的任意巢狀。

• 內層作用域可以定義外層作用域的同名變數。

• 外層作用域無法讀取內層作用域的變數。

{{{{
  {let insane = 'Hello World'
   {let insane = 'Hello World'}
  }
  console.log(insane); // 报错
}}}};

區塊層級作用域與函數聲明

• #ES5 規定，函數只能在頂層作用域和函數作用域之中聲明，不能在區塊級作用域聲明。

• ES6 規定，在區塊級作用域之中，函數宣告語句的行為類似let，在區塊級作用域之外不可引用。

考慮到環境導致的行為差異太大，應該避免在區塊層級作用域內宣告函數。如果確實需要，也應該寫成函數表達式，而不是函數宣告語句。

不存在變數提升

let指令所宣告的變數一定要在宣告後使用，否則報錯。

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

暫時性死區

只要塊級作用域內存在let指令，它所宣告的變數就「綁定」（binding）這個區域，不再受外部的影響。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

在程式碼區塊內，使用let指令宣告變數之前，該變數都是不可用的。這在語法上，稱為「暫時性死區」（temporal dead zone，簡稱 TDZ）。

const

const宣告一個只讀的常數。一旦聲明，常量的值就不能改變。

• 只在宣告所在的區塊層級作用域內有效。

• const指令宣告的常數也是不提升，同樣存在暫時性死區，只能在宣告的位置後面使用。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

本質

const實際上保證的，並不是變數的值不得改動，而是變數指向的那個記憶體位址不得改動。對於簡單類型的資料（數值、字串、布林值），值就保存在變數指向的那個記憶體位址，因此等同於常數。但對於複合類型的資料（主要是物件和陣列），變數指向的記憶體位址，保存的只是一個指針，const只能保證這個指針是固定的，至於它指向的資料結構是不是可變的，就完全不能控制了。因此，將一個物件聲明為常數必須非常小心。

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

如果真的想將物件凍結，應該使用Object.freeze方法。

const foo = Object.freeze({});

// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;

#

以上是ES6系列之宣告變數let與const的詳細內容。更多資訊請關注PHP中文網其他相關文章！