前言

在JS中，var早已深入人心，因此本文將不再贅述，僅在必要時拉出來溜溜。

聲明方式變量提升暫時性死區(qū)重復聲明可修改值塊級作用域全局變量屬于頂層對象

var	是	否	是	是	否	是
let	否	是	否	是	是	否
const	否	是	否	否(引用類型僅保證地址不被修改)	是	否

變量提升

a // a is not definedlet a = 'a'b // b is not definedconst b = 'b'c // undefinedvar c = 'c' 復制代碼

暫時性死區(qū)

在代碼塊內(nèi)，使用let、const命令聲明變量之前，該變量都是不可用的。

其本質(zhì)是，只要一進入當前作用域，所要使用的變量就已經(jīng)存在了，但是不可獲取，只有等到聲明變量的那一行代碼出現(xiàn)，才可以獲取和使用該變量。

typeof a // a is not definedlet a = 'a'typeof b // b is not definedconst b = 'b'typeof c // "undefined"var c = 'c' 復制代碼

以下為幾個比較隱蔽的死區(qū)：

賦值

var a = a let b = b // b is not defined 復制代碼

函數(shù)參數(shù)

function foo(a = b, b = 2) {console.log([a, b]) } foo() 復制代碼

重復聲明

let a = 'a1'let a = 'a2' // Identifier 'a' has already been declareda // a1const b = 'b1'const b = 'b2' // Identifier 'b' has already been declaredb // b2var c = 'c1'var c = 'c2'c // c2 復制代碼

修改值

let a = 'a1'a = 'a2' a // a2const b = 'b1'b = 'b2' // Assignment to constant variableb // b1var c = 'c1'c = 'c2'c // c2 復制代碼

const 引用類型僅保證引用地址不可修改

const a = {a1: 1,a2: 2}a.a3 = 3a // {a1: 1, a2: 2, a3: 3} 復制代碼

塊級作用域

{let a = 'a' const b = 'b' var c = 'c'}a // a is not definedb // b is not definedc // c 復制代碼

全局變量不再屬于頂層對象

頂層對象：瀏覽器中指window,Node中指global。

let a = 'a'window.a // undefined const b = 'b'window.b // undefined var c = 'c'window.c // "c" 復制代碼

再也不用擔心手抖修改了頂層對象~

解決的問題

內(nèi)層變量覆蓋外層變量；

用來計數(shù)的循環(huán)變量變?yōu)槿肿兞?#xff1b;

上面代碼中，變量j是let聲明的，當前的j只在本輪循環(huán)有效，所以每一次循環(huán)的j其實都是一個新的變量，那么如果每一輪循環(huán)的變量j都是重新聲明的，那它怎么知道上一輪循環(huán)的值，從而計算出本輪循環(huán)的值？這是因為 JavaScript 引擎內(nèi)部會記住上一輪循環(huán)的值，初始化本輪的變量j時，就在上一輪循環(huán)的基礎(chǔ)上進行計算。

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

閉包與垃圾回收；

有塊級作用域

無塊級作用域

不再需要使用立即執(zhí)行函數(shù)，減少代碼冗余提升可讀性；

允許在塊級作用域中聲明函數(shù)，函數(shù)聲明語句的行為類似于let;

原來，如果改變了塊級作用域內(nèi)聲明的函數(shù)的處理規(guī)則，顯然會對老代碼產(chǎn)生很大影響。為了減輕因此產(chǎn)生的不兼容問題，ES6 在附錄 B里面規(guī)定，瀏覽器的實現(xiàn)可以不遵守上面的規(guī)定，有自己的行為方式。

1.允許在塊級作用域內(nèi)聲明函數(shù)。

2.函數(shù)聲明類似于var，即會提升到全局作用域或函數(shù)作用域的頭部。

3.同時，函數(shù)聲明還會提升到所在的塊級作用域的頭部。

注意，上面三條規(guī)則只對 ES6 的瀏覽器實現(xiàn)有效，其他環(huán)境的實現(xiàn)不用遵守，還是將塊級作用域的函數(shù)聲明當作let處理。

參考

ECMAScript 6 入門

你不知道的JavaScript（上）

小結(jié)

本文主要介紹了let、const與var定義變量的區(qū)別以及優(yōu)點。推薦我用了兩個月的時間才理解 let這篇文章，供大家思考。

之前聲明變量只能使用var、function，現(xiàn)在ES6添加了let、const、import、class4種方式（import、class 后續(xù)也會一一總結(jié)），所以現(xiàn)在總共有6種聲明變量的方式。SO聲明變量，請合理選擇。

感謝閱讀，如有問題，歡迎指正。

最最最最最后，在這四天的五一小長假里，為大家獻上美景 —— 摩洛哥藍色小鎮(zhèn)??祝大家五一愉快呦~

轉(zhuǎn)載于:https://juejin.im/post/5ccc342d5188250f3a050f5f

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的let const —— ES6基础总结（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。