基於JavaScript ES新特性let與const關鍵字

Posted on by

1.let關鍵字

1.1基本用法

let是ECMAScript 2015新增的一個關鍵字，用於聲明變量，其用法類似於var，與之不同的是聲明的變量隻能在所在的代碼塊中使用。

語法結構如下所示：

let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];

參數說明：

var1, var2, …, varN：變量名。必須是合法的標識符。

value1, value2, …, valueN：變量的初始值。可以是任意合法的表達式。

示例代碼如下所示：

在全局作用域是定義變量

// 定義全局變量
var a = 100; // 使用 var 關鍵字
let b = 200; // 使用 let 關鍵字
console.log(a); // 100
console.log(b); // 200

我們發現簡單的定義一個全局變量兩者並沒有什麼區別。

在塊作用域中定義變量

關於塊級作用域可以參考這篇。

// 在塊作用域中定義變量
{
  var a = 100; // 使用 var 關鍵字
  let b = 200; // 使用 let 關鍵字
}
console.log(a); // 100
console.log(b); // 拋出異常，描述信息為 ReferenceError: b is not defined

如果let是在代碼塊中使用的，其代碼塊則是一個全新的作用域，在作用域外則無法訪問其變量。

ES6 提供的let關鍵字，特別適合在作為for循環計算器的變量使用，如果這樣做的話，其變量隻能在循環體內使用，出瞭這個循環體就會拋出異常，

示例代碼如下所示：

// 定義一個循環體
for (let v = 0; v < 10; v++) {
  console.log("這是一個 for 循環"); // 這是一個 for 循環 * 10
}
console.log(v); // 拋出異常，描述信息為：ReferenceError: v is not defined

值得註意的是，for循環還有一個特別之處，那就是設置循環變量的那一部分是一個父作用域，而循環體又是一個單獨的子作用域，

示例代碼如下所示：

for (let v = 0; v < 10; v++) {
  let v = 10
  console.log(v); // 100 * 10
}

得出上面的那種結果就表示兩個v並不是處於同一個作用域。

1.2不存在變量提升

如果使用var定義變量，就會發生所謂的變量提成，如下代碼所示：

console.log(v); // undefined
var v = 100;

我們在變量聲明之前使用這個值，其並不會報錯，而結果是undefined，這是一個奇怪的邏輯，按照一般的邏輯如果這樣使用的話，其應該會拋出異常。

在ECMAScript 2015中，let關鍵字就解決瞭這個奇怪的現象，

如下代碼所示：

console.log(v); // 拋出異常 描述信息為 ReferenceError: Cannot access 'v' before initialization
let v = 100;

在上述代碼中，則會拋出異常，描述信息為 在聲明之前不能使用某變量。

1.3暫時性死區

隻要塊級作用域中存在let關鍵字定義的變量，他所聲明的變量就綁定 這個區域，不會再受外界的影響。示例代碼如下所示：

let v = 100; 
{
  console.log(v); // 拋出異常 描述信息為 ReferenceError: Cannot access 'v' before initialization
  // 此變量綁定在該塊級作用域中，該作用域隻能隻用此變量
  let v = 200;
}

ECMAScript 2015明確規定，如果區塊中存在let關鍵字，則這個區塊對這些命令聲明的變量從一開始就形成封閉作用域。隻要在聲明之前使用這些變量，就會報錯。

總的來說，在塊級作用域中，使用let關鍵字聲明變量之前，該變量是不可用的，這在語法上稱為暫時性死區 ，英文temporal dead zone 簡稱TDZ。

1.4不允許重復聲明

ECMAScript 2015提供的let關鍵字是不允許進行重復聲明，這點與var又不相同，示例代碼如下所示：

// 使用 var 聲明變量
var a = 100;
console.log(a); // 100
var a = 1000; // 重復聲明
console.log(a); // 1000

// 使用 let 聲明變量
let b = 100;
console.log(b); // 100
let b = 1000; // 重復聲明
console.log(b); // 拋出異常 描述信息為：SyntaxError: Identifier 'b' has already been declared

如果重復聲明會拋出SyntaxError異常

1.5與函數的關系

我們在的函數參數相當於使用let關鍵字定義的變量，如果在函數體中重新使用let關鍵字重新聲明一個與參數名一樣的變量則會拋出SyntaxError異常，當然，函數體中使用let也不允許出現變量提升

// 使用 let 聲明變量
let a = 100;
// 定義一個函數
function fun(b) {
  // let b = 10; // 拋出異常，描述信息為：SyntaxError: Identifier 'b' has already been declared
  console.log(a); // 拋出異常，描述信息為：ReferenceError: Cannot access 'a' before initialization
  let a = 200;
}
fun(20)

2.const關鍵字

2.1基礎用法

const關鍵字用於聲明一個常量，我們可以將const關鍵字生成的常量理解為不可變的let變量，這裡因為const關鍵字具有let關鍵字的所有特性，在原基礎上增加瞭不可變這個特性。

所謂的常量就是初始化之後不可變，且聲明時必須初始化，示例代碼如下：

const a = 2
a = 3 // 拋出異常

const b // 未初始化拋出異常

但是我們通過const去初始化一個對象或者數組，我們可改變裡面的值，它並不是報錯，示例代碼如下：

const arr = []
arr[0] = 100 
console.log(arr) // [100]
const obj = {}
obj.name = '一碗周'
console.log(obj) // {name: "一碗周"}

出現這種問題的原因是因為const關鍵字實際上保證的並不是變量的值不能被改動，而是變量所指向的那個內存地址不被改動，對於簡單的數據類型，例如String、Number、Boolean，這些值就保存在變量所指向的那個內存地址，所以它不可以進行二次修改。

但是對於復合類型的數據，主要指Array和Object，變量指向的內存地址，保存的隻是一個指針，const隻能保證這個指針指向的內存地址是固定的，至於它指向的內存地址中保存的數據結構是不是可變的，就完全不能控制瞭。

在實際的開發中，我們避免使用var關鍵字，而是使用const關鍵字，需要使用變量時，我們使用let關鍵字。

到此這篇關於基於JavaScript ES新特性let與const關鍵字的文章就介紹到這瞭,更多相關ES新特性let與const關鍵字內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：