1.let關(guān)鍵字

1.1基本用法

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

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

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

參數(shù)說(shuō)明：

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

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)簡(jiǎn)單的定義一個(gè)全局變量?jī)烧卟](méi)有什么區(qū)別。

在塊作用域中定義變量

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

// 在塊作用域中定義變量
{
  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是在代碼塊中使用的，其代碼塊則是一個(gè)全新的作用域，在作用域外則無(wú)法訪問(wèn)其變量。

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

示例代碼如下所示：

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

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

示例代碼如下所示：

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

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

1.2不存在變量提升

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

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

我們?cè)谧兞柯暶髦笆褂眠@個(gè)值，其并不會(huì)報(bào)錯(cuò)，而結(jié)果是undefined，這是一個(gè)奇怪的邏輯，按照一般的邏輯如果這樣使用的話，其應(yīng)該會(huì)拋出異常。

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

如下代碼所示：

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

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

1.3暫時(shí)性死區(qū)

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

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

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

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

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

ECMAScript 2015提供的let關(guān)鍵字是不允許進(jìn)行重復(fù)聲明，這點(diǎn)與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ù)聲明會(huì)拋出SyntaxError異常

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

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

// 使用 let 聲明變量
let a = 100;
// 定義一個(gè)函數(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)鍵字用于聲明一個(gè)常量，我們可以將const關(guān)鍵字生成的常量理解為不可變的let變量，這里因?yàn)閏onst關(guān)鍵字具有l(wèi)et關(guān)鍵字的所有特性，在原基礎(chǔ)上增加了不可變這個(gè)特性。

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

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

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

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

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

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

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

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

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