• var 聲明的范圍是函數(shù)作用域，let 和 const 聲明的范圍是塊作用域

• var 聲明的變量會被提升到函數(shù)作用域的頂部，let 和 const 聲明的變量不存在提升，且具有暫時性死區(qū)特征

• var 允許在同一個作用域中重復聲明同一個變量，let 和 const 不允許

• 在全局作用域中使用 var 聲明的變量會成為 window 對象的屬性，let 和 const 聲明的變量則不會

• const 的行為與 let 基本相同，唯一 一個重要的區(qū)別是，使用 const 聲明的變量必須進行初始化，且不能被修改

關鍵字變量提升塊級作用域重復聲明同名變量重新賦值

var	√	×	√	√
let	×	√	×	√
const	×	√	×	×

1.作用域

var沒有塊級作用域，而let聲明的范圍是塊作用域;?一對大括號 就是 一個塊級作用域

if (true) {var message = "hello";console.log(message); // hello } console.log(message); // helloif (true) {let message = "hello";console.log(message); // hello } console.log(message); // error: message is not defined

let?不允許同一個塊作用域中出現(xiàn)冗余聲明：

if (true) { // error: 無法重新聲明塊范圍變量“a”let a;let a; }

JS 引擎會記錄用于變量聲明的標識符及其所在的塊作用域，因此嵌套使用相同的標識符不會報錯，這是因為同一個塊中沒有重復聲明：

let a = 666; console.log(a); // 666 if (true) {let a = '啊哈哈';console.log(a); // 啊哈哈 }

var和let聲明的并不是不同類型的變量，它們只是指出變量在相關作用域如何存在，所以對聲明冗余報錯不會因混用var和let而受影響：

// error var a; let a;// error let b; var b;

2.變量提升

//用var命名的變量有變量提升 console.log(num1); // undefined var num1 = 10; // 以上代碼運行時,相當于下面的寫法 ? var num2; // 聲明提升到作用域最頂端 console.log(num2); // undefined num = 10; /*****************************************/ //用 let 或 const 命名的變量有變量提升 console.log(num3); // Uncaught ReferenceError: num3 is not defined let num3 = 10; ? console.log(num4); // Uncaught ReferenceError: num4 is not defined const num4 = 10;

3.暫時性死區(qū)

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

var tmp = 123; // 聲明 if (true) {tmp = 'abc'; // 報錯 因為本區(qū)域有tmp聲明變量let tmp; // 綁定if這個塊級的作用域 不能出現(xiàn)tmp變量 }

暫時性死區(qū)和不能變量提升的意義在于:?為了減少運行時錯誤，防止在變量聲明前就使用這個變量，從而導致意料之外的行為。

4.重復聲明同名變量?和?重新賦值

//var 關鍵字可以聲明同名變量,實際第二次聲明是對第一次聲明的變量重新賦值 var num1 = 10; var num1 = 20; console.log(num1); // 20 ? //let 和const 關鍵字不能重復聲明同名變量,即使之前是用var聲明的也會報錯 var num2 = 10; let num2 = 20; // Uncaught SyntaxError: Identifier 'num2' has already been declared ? //let 和 var 在聲明變量時,可以不用初始化 let num3; console.log(num3); // undefined var num4; console.log(num4); // undefined ? //const 聲明常量時必須初始化,因為 `const` 關鍵字聲明的是常量,聲明后不能再賦值 const num5; // Uncaught SyntaxError: Missing initializer in const declaration ? //let 聲明的變量可以重新賦值 let num1 = 10; num1 = 20; console.log(num1); // 20 //const 只能在聲明時賦值，之后不能再重新賦值 const num2 = 10; num2 = 20; // Uncaught TypeError: Assignment to constant variable.

5.擴展

????????5.1.全局聲明

????????使用var在全局作用域中聲明的變量會成為window對象的屬性，let和const聲明的變量則不會：

var a = 666; console.log(window.a); // 666let b = 666; console.log(window.b); // undefinedconst c = 666; console.log(window.c); // undefined

? ? ? ? 5.2.for 循環(huán)中的var?和?let 聲明的區(qū)別

for (var i = 0; i < 5; i++) {setTimeout( () => {console.log(i); // 5、5、5、5、5}, 0 ) }for (let i = 0; i < 5; i++) {setTimeout( () => {console.log(i); // 0、1、2、3、4}, 0 ) }

var是因為在退出循環(huán)時，迭代變量保存的是導致循環(huán)退出的值，也就是 5。在之后異步執(zhí)行超時邏輯時，所有的i都是同一個變量，因此輸出的都是同一個最終值。

而在使用let聲明迭代變量時，JS 引擎在后臺會為每個迭代循環(huán)聲明一個新的迭代變量，每個 setTimeout 引用的都是不同的變量實例，所以 console.log 輸出的是我們期望的值，也就是循環(huán)執(zhí)行過程中每個迭代變量的值。

總結

以上是生活随笔為你收集整理的var 、let 和 const 的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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