本篇文章主要講述JS中l(wèi)et與const命令使用，通過代碼展示給各位。

　　let命令

　　基本使用

　　在ES6中，let命令是新增的聲明變量，與var的差異在于let無法重復(fù)聲明，且let有效只是在其命令的代碼塊內(nèi)，let禁止變量出現(xiàn)變量提升現(xiàn)象，let的特點(diǎn)就是通過暫時(shí)性死區(qū)的方式來避免程序上的錯(cuò)誤

　　代碼塊：使用{}包括起來的內(nèi)容

　　聲明變量：分配一個(gè)存儲(chǔ)空間

　　不可重復(fù)聲明：let聲明過后的變量無法再再次聲明，而var可以重復(fù)聲明

　　{
　　let a = 10;
　　var a = 1; // 'a' has already been declared
　　}

　{
　　var a = 10
　　var a = 1
　　}
　　console.log(a) // 1

　　不同代碼塊可被重復(fù)聲明：我們知道let的不可重復(fù)聲明是作用在同一代碼塊中的，在后續(xù)中我們會(huì)具體解釋相關(guān)的概念即塊級(jí)作用域

　　{
　　let a = 1
　　console.log(a)
　　}
　　{
　　let a = 2
　　console.log(a)
　　}

　　有效區(qū)間的不同：上述中，我們知道let只在其命令的代碼塊內(nèi)有效，而var聲明的變量可全局有效，現(xiàn)在舉例為大家說明。

　　{
　　let a = 10;
　　var b = 1;
　　}
　　console.log(a) // a is not defined
　　console.log(b) // 1

　　變量提升：我們熟悉在聲明前調(diào)用為undefined，之前使用var聲明變量，ndefined就是我們熟悉的聲明但未賦值，這種現(xiàn)象叫做變量提升，可let禁止執(zhí)行，因此，要想使用let所聲明的變量，就要安排在聲明后使用。

　　console.log(bar) // Cannot access 'bar' before initialization
　　let bar = 2

　　變量提升的編譯：現(xiàn)在看看變量提升現(xiàn)象在編譯后的情況，更有利于了解變量提升現(xiàn)象出現(xiàn)的原因，所有的聲明變量語(yǔ)句在編譯后都會(huì)將聲明語(yǔ)句提到程序的最先級(jí)，所以才會(huì)出現(xiàn)聲明但未賦值的現(xiàn)象。

　　// 編譯前
　　console.log(a)
　　var a = '豬痞惡霸'
　　// 編譯后
　　var a
　　console.log(a)
　　a = '豬痞惡霸'

　　暫時(shí)性死區(qū)：在代碼塊中使用let聲明變量前，該變量不可用，這種現(xiàn)象稱為暫時(shí)性死區(qū)，其實(shí)這點(diǎn)和變量提升有些相似，我理解為：let禁止變量提升現(xiàn)象的原因是在聲明變量前的代碼區(qū)域?yàn)?strong>暫時(shí)性死區(qū)

　　{
　　// 暫時(shí)性死區(qū)
　　tmp = 'abc';
　　console.log(tmp)
　　// 暫時(shí)性死區(qū)
　　let tmp; // 聲明tmp，結(jié)束暫時(shí)性死區(qū)
　　console.log(tmp) // undefined 聲明未賦值
　　tmp = '123'
　　console.log(tmp) // 123
　　}

　　隱蔽的死區(qū)：有些暫時(shí)性死區(qū)會(huì)在我們注意不到的地方，比如

　　function bar(x = y, y = 2) {
　　return [x,y]
　　}
　　bar() // Cannot access 'y' before initialization
　　bar(2) // 無錯(cuò)誤

　　由于x的默認(rèn)值為y，且y的聲明還沒開始，所以x = y處于死區(qū)中

　　適用場(chǎng)景

　　let與var根據(jù)其各自不同的特點(diǎn)有著不同的適用場(chǎng)景

　　計(jì)數(shù)器的使用：假如我們現(xiàn)在需要一個(gè)用來計(jì)數(shù)的變量，那么我們就可以使用let來聲明。

　　var arr = []
　　for(let i = 0; i < 10; i++) {
　　arr[i] = () => {
　　console.log(i)
　　} // 利用計(jì)數(shù)進(jìn)行操作
　　}
　　arr[7]() // 7

　　for(var i = 0; i < 10; i++) {
　　arr[i] = () => {
　　console.log(i)
　　} // 利用計(jì)數(shù)進(jìn)行操作
　　}
　　arr[7]() // 10

　　上述可以看到var和let的輸出結(jié)果，也就知道這兩個(gè)適用場(chǎng)景是不同的，兩者之間差距也就顯現(xiàn)出來。

　　for循環(huán)中的父子關(guān)系：for循環(huán)中有兩個(gè)作用域，即父作用域與子作用域，設(shè)置循環(huán)變量的部分為父作用域，循環(huán)體內(nèi)部為子作用域

　　for(let i = 0; i < 3; i++) {
　　let i = 'abc';
　　console.log(i)
　　}
　　// abc
　　// abc
　　// abc

　　上面的例子循環(huán)打出了三個(gè)abc就說明了兩個(gè)i的作用域不同，如果不在循環(huán)體內(nèi)聲明的話將會(huì)打印出0,1,2

　　塊級(jí)作用域

　　ES6新增了塊級(jí)作用域，此前ES5只有全局作用域與函數(shù)作用域

　　全局作用域：window對(duì)象的所有屬性都具有全局作用域，可以在程序的任意位置訪問，擁有全局作用域的變量。

　　函數(shù)作用域：也可以叫做局部作用域，意思就是每一個(gè)函數(shù)中都有一個(gè)函數(shù)作用域或者嵌套更多的函數(shù)作用域，在函數(shù)作用域中定義的變量只能在該函數(shù)作用域內(nèi)部使用。

　　概念

　　塊級(jí)作用域的出現(xiàn)其實(shí)是由新增聲明let產(chǎn)生的

　　let n = 5
　　function fn() {
　　if(true) {
　　let n = 10
　　}
　　console.log(n)
　　}
　　fn() // 5

　　上面的例子詮釋了塊級(jí)作用域的作用，即外層代碼塊不受內(nèi)層代碼塊的影響，我們?cè)趇f函數(shù)體內(nèi)聲明的n只有在if函數(shù)體內(nèi)可以訪問，而fn中訪問n不受if內(nèi)層的聲明影響。

　　存在意義

　　var tmp = new Date();
　　function fn() {
　　console.log(tmp);
　　if(false) {
　　var tmp = 'hello world'
　　}
　　}
　　fn()

　　如上，存在函數(shù)作用域與全局作用域，正常情況下fn()函數(shù)體內(nèi)if函數(shù)體外是使用外層即var tmp = new Date();但是由于變量提升現(xiàn)象的存在即if函數(shù)體內(nèi)的var tmp = 'hello world'發(fā)生了變量提升，即fn()函數(shù)體內(nèi)的編譯形式如下，所以輸出結(jié)果為undefined。

　　function fn() {
　　var tmp
　　console.log(tmp);
　　tmp = 'hello world'
　　}

　　而塊級(jí)作用域正是解決了這個(gè)問題

　let n = 5
　　function fn() {
　　if(true) {
　　let n = 10
　　}
　　console.log(n)
　　}
　　fn() // 5

　　除此之外還可以防止局部作用域變量的泄露到全局當(dāng)中

　　let arr = [1,2,3]
　　for(var i = 0; i < arr.length; i++) {
　　console.log(arr[i])
　　}
　　{
　　console.log(i) // 3
　　}

　　上述中其實(shí)讓變量泄露，也就是i變量被泄露到了整個(gè)全局中，但使用i is not defined，就可以說明變量未被泄露到全局中。

　let arr = [1,2,3]
　　for(let i = 0; i < arr.length; i++) {
　　console.log(arr[i])
　　}
　　console.log(i) // i is not defined

　　const命令

　　基本使用

　　const聲明的變量無法被再次賦值改變，且聲明的時(shí)候必須賦值

　　const name = '豬痞惡霸'
　　name = 'fzf404' // Assignment to constant variable.

　　const name // Missing initializer in const declaration
　　name = '豬痞惡霸'

　　const與let的特性很像，比如只在其聲明的塊級(jí)作用域內(nèi)有效，存在暫時(shí)性死區(qū)

　　不可被const的情況

　　javascript中有兩種數(shù)據(jù)類型即：簡(jiǎn)單數(shù)據(jù)類型，復(fù)雜數(shù)據(jù)類型

　　簡(jiǎn)單數(shù)據(jù)類型：數(shù)值，字符串，布爾值

　　復(fù)雜數(shù)據(jù)類型：數(shù)組，對(duì)象

　　我們看到兩種數(shù)據(jù)類型的訪問方式不同，簡(jiǎn)單數(shù)據(jù)類型的值直接保存變量所指向的內(nèi)存地址，這樣在直接訪問值而復(fù)雜數(shù)據(jù)類型的訪問是通過變量指向的內(nèi)存地址，內(nèi)存地址保存的是另一個(gè)指針（引用）

　　現(xiàn)在我們說說const聲明，由它所指向變量的那個(gè)內(nèi)存地址不能改動(dòng)，因此const聲明的復(fù)雜數(shù)據(jù)類型，就不會(huì)讓現(xiàn)數(shù)組的元素和對(duì)象的屬性可以發(fā)生改變

　　const person = {}
　　person.name = "豬痞惡霸"
　　console.log(person.name) // 豬痞惡霸

　　請(qǐng)大家關(guān)注后續(xù)更多精彩內(nèi)容。