let const 與var的區別是什么

本篇內容主要講解“let const 與var的區別是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“let const 與var的區別是什么”吧!

es6里面的一些新特性還是很好用的，但是有的時候看文檔會帶來一些疑惑。let、const這兩個東西和var到底有哪些不同呢？下面咱們結合一些小例子給大家展示一下。

首先來了解一下let與var的區別，主要有一下三點：

第一點，var在javascript中是支持預解析的，而let不支持預解析，代碼如圖：

執行結果如圖：

結果未報錯，下面將var換成let，代碼如下：

執行結果：

錯誤提示為：Uncaught ReferenceError: a is not defined，翻譯成中文大概意思就是a未定義。這與undefined是不同的，undefined是未賦值，但已經定義了。

第二點：var可以重復定義同一個變量，但是let不可以，看代碼：

執行結果如圖：

結果沒有報錯，將var換成let：

執行結果為：

錯誤信息為：Uncaught SyntaxError: Identifier 'a' has already been declared。翻譯為中文，意思是a已經被定義。

第三點：let可以形成塊級作用域，在es6之前javascript只有函數作用域，沒有塊級作用域。那在es6之前我們是怎么實現塊級作用域的呢？有朋友已經猜到了，立即執行函數表達式，簡稱IIFF。看代碼：

執行結果為：

可以看到通過一個立即執行函數表達式，我們實現了一個局部作用域或者塊級作用域，但是有了let之后就不需要寫這樣的代碼了，代碼修改如下。

執行結果：

可以看到兩者實現的效果是一樣的。

下面看一道經典面試題：

說出以上代碼的執行結果，并解釋其原理。將其改造為，依次輸出0,1,2,3,4

首先上面的代碼執行結果為：每隔200ms依次打印5，一共打印5次。

結果為什么是這樣的呢？這里面涉及里javascript里面的兩個知識點，作用域和定時器setTimeout回調函數異步執行。這段代碼用var聲明了一個全局變量i，循環執行完成之后，i變為5，此時javascript主線程空閑，異步回調隊列中的函數依次被eventloop放進主線程執行，因為此時的i已經變為了5，所以打印了5次5。

以上便是這道題目的前兩點的解析。那第三點，該如何改造代碼呢？

明白了原理就好改造了，既然定時器的回調函數中的i每次都是從全局作用域中取值，能不能在循環的時候將其放到局部作用域中呢，當然可以看代碼：

執行結果為：

那這些和let有什么關系呢？回憶一下let和var的第三點不同，let可以生成局部作用域，代碼再次改造：

執行結果為:

以上便是let和var的不同，如果大家還有補充歡迎留言。

下面是const與var的不同，以上三點完全適用const，但是const與let或是var還有兩點不同。

首先是第一點，const是用來定義常量的，常量定義之后是不允許改變的。看代碼：

執行結果:

錯誤提示為：Uncaught TypeError: Assignment to constant variable.意思是常量已經賦值了。

這里有一個小坑，看如下代碼：

來看看執行結果，看看和你心理預期是否一致。

沒有報錯？為什么 ？因為a的值并沒有改變，依然指向剛開始賦值的那個對象，并為重新賦值，如果將a重新賦值，就會報錯了。大家可以試試。用const定義的常量只要是引用類型數據，改變這個引用類型數據的結構或屬性，都是允許的。引用類型包括哪些呢？數組和對象。

第二點是用const定義常量必須賦值。不賦值的話，沒有任何意思，所以報錯，看代碼：

執行結果為：

錯誤提示為：Uncaught SyntaxError: Missing initializer in const declaration。意思是缺少初識值。

到此，相信大家對“let const 與var的區別是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！