1.let關(guān)鍵字

1.1基本用法

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

語法結(jié)構(gòu)如下所示：

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

參數(shù)說明：

var1, var2, …, varN：變量名。必須是合法的標(biāo)識符。

value1, value2, …, valueN：變量的初始值?？梢允侨我夂戏ǖ谋磉_(dá)式。

示例代碼如下所示：

在全局作用域是定義變量

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

我們發(fā)現(xiàn)簡單的定義一個全局變量兩者并沒有什么區(qū)別。

在塊作用域中定義變量

關(guān)于塊級作用域可以參考這篇。

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

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

ES6 提供的let關(guān)鍵字，特別適合在作為for循環(huán)計算器的變量使用，如果這樣做的話，其變量只能在循環(huán)體內(nèi)使用，出了這個循環(huán)體就會拋出異常，

示例代碼如下所示：

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

值得注意的是，for循環(huán)還有一個特別之處，那就是設(shè)置循環(huán)變量的那一部分是一個父作用域，而循環(huán)體又是一個單獨的子作用域，

示例代碼如下所示：

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

得出上面的那種結(jié)果就表示兩個v并不是處于同一個作用域。

1.2不存在變量提升

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

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

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

在ECMAScript 2015中，let關(guān)鍵字就解決了這個奇怪的現(xiàn)象，

如下代碼所示：

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

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

1.3暫時性死區(qū)

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

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

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

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

1.4不允許重復(fù)聲明

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

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

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

如果重復(fù)聲明會拋出SyntaxError異常

1.5與函數(shù)的關(guān)系

我們在的函數(shù)參數(shù)相當(dāng)于使用let關(guān)鍵字定義的變量，如果在函數(shù)體中重新使用let關(guān)鍵字重新聲明一個與參數(shù)名一樣的變量則會拋出SyntaxError異常，當(dāng)然，函數(shù)體中使用let也不允許出現(xiàn)變量提升

// 使用 let 聲明變量
let a = 100;
// 定義一個函數(shù)
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關(guān)鍵字

2.1基礎(chǔ)用法

const關(guān)鍵字用于聲明一個常量，我們可以將const關(guān)鍵字生成的常量理解為不可變的let變量，這里因為const關(guān)鍵字具有l(wèi)et關(guān)鍵字的所有特性，在原基礎(chǔ)上增加了不可變這個特性。

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

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

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

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

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

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

但是對于復(fù)合類型的數(shù)據(jù)，主要指Array和Object，變量指向的內(nèi)存地址，保存的只是一個指針，const只能保證這個指針指向的內(nèi)存地址是固定的，至于它指向的內(nèi)存地址中保存的數(shù)據(jù)結(jié)構(gòu)是不是可變的，就完全不能控制了。

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

到此這篇關(guān)于基于JavaScript ES新特性let與const關(guān)鍵字的文章就介紹到這了,更多相關(guān)ES新特性let與const關(guān)鍵字內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！