這篇文章主要介紹了javascript中var和let有哪些區(qū)別，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)從2013年開始，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目網(wǎng)站設計制作、網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元遼源做網(wǎng)站,已為上家服務,為遼源各地企業(yè)和個人服務,聯(lián)系電話:18980820575

區(qū)別：1、var有變量提升，而let沒有；2、let不允許在相同的作用域下重復聲明，而var允許；3、let沒有暫時性死區(qū)問題；4、let創(chuàng)建的全局變量沒有給window設置對應的屬性；5、let會產(chǎn)生塊級作用域，var不會。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

想要了解var（ES5）和let（ES6）區(qū)別，首先就要了解ES5下JS的變量提升

一、變量提升（聲）

當瀏覽器開辟出供代碼執(zhí)行的棧內存后，代碼并沒有自上而下立即執(zhí)行，而是繼續(xù)做了一些事情：把當前作用域中所有帶var/function關鍵字的進行提前的聲明和定義 => 變量提升機制

• 帶var的只是提前聲明（declare）var a;，如果只聲明沒有賦值，默認值是undefined
  例如：

console.log(a);
var a = 13;

輸出：undefined
相當于：

var a;		// 只聲明沒有賦值，默認為undefined
console.log(a);
a = 13;

• 帶function的不僅聲明，而且還定義了（defined），準確來說就是讓變量和某個值進行關聯(lián)。

二、let和var的區(qū)別

1.let和const不存在變量提升機制

創(chuàng)建變量的六種方式中：var/function有變量提升，而let/const/class/import都不存在這個機制

2. var允許重復聲明，而let不允許重復聲明

在相同的作用域（或執(zhí)行上下文中）

• 如果使用var/function關鍵詞聲明變量并且重復聲明，是不會有影響的（聲明第一次之后，之后再遇到就不會再重復聲明了）

• 但使用let/const就不行，瀏覽器會校驗當前作用域中是否已經(jīng)存在這個變量了，如果已經(jīng)存在了，則再次基于let等重新聲明就會報錯

在瀏覽器開辟棧內存供代碼自上而下執(zhí)行之前，不僅有變量提升的操作，還有很多其他的操作 => “詞法解析”或者“詞法檢測”：就是檢測當前即將要執(zhí)行的代碼是否會出現(xiàn)“語法錯誤 SyntaxError”，如果出現(xiàn)錯誤，代碼將不會再執(zhí)行（第一行都不會執(zhí)行）

console.log(1)  // => 這行代碼就已經(jīng)不會執(zhí)行了
let a = 12
console.log(a)
let a = 13      // => 此行出錯：SyntaxError: Identifier 'a' has already been declared
console.log(a)

所謂重復就是：不管之前通過什么方法，只要當前棧內存中存在了這個變量，我們使用let/const等重復再聲明這個變量就是語法錯誤。eg：

console.log(a)
var a = 12
let a = 13  // => SyntaxError: Identifier 'a' has already been declared
console.log(a)

console.log(a)
let a = 13
var a = 12  // => SyntaxError: Identifier 'a' has already been declared
console.log(a)

3. let能解決typeof檢測時出現(xiàn)的暫時性死區(qū)問題（let比var更嚴謹）

console.log(a)
// => ReferenceError: a is not defined

typeof a 未報錯

console.log(typeof a)
// =>  'undefined' 這是瀏覽器的bug，本應報錯，因為沒有a（暫時性死區(qū)）

使用let后：

console.log(typeof a)
// => ReferenceError: Cannot access 'a' before initialization
let a

返回不能在a被定義之前使用它，解決暫時性死區(qū)問題。

4. let創(chuàng)建的全局變量沒有給window設置對應的屬性

首先看帶var與不帶var創(chuàng)建全局變量時的區(qū)別

/*
 * 不帶var的：相當于給全局對象window設置了一個屬性a
 *      window.a = 13
 */
a = 13
console.log(a)  // => window.a 13
/*
 * 棧內存變量存儲空間
 *            b
 * 帶var的：是在全局作用域下聲明了一個變量b（全局變量），
 * 但是在全局下聲明的變量也相當于給全局對象window增加了一個對應的
 * 屬性b（只有全局作用域具備這個特點）
 */
var b = 14
console.log(b)
console.log(window.b)

使用let創(chuàng)建時：

/*
 * 棧內存變量存儲空間
 *   c
 * 帶let的：僅僅在全局作用域下聲明了一個變量b（全局變量），
 * 并未給全局對象window增加對應的屬性c
 */
let c = 15
console.log(c)                          // => 15
console.log(window.c)                   // => undefined

5. let會產(chǎn)生塊級作用域

下面代碼能否實現(xiàn)點擊某個按鈕，body的背景色改為按鈕對應的顏色，若不能，如何改進（騰訊）

  
  
  
  




紅
綠
藍

答案當然是不能，因為通過var定義的變量，在for循環(huán)中的i是全局的，變量提升、3次循環(huán)過后，i=3，因為點擊每個都相當于點擊最后一個。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“javascript中var和let有哪些區(qū)別”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!