JavaScript中var、let和const的區(qū)別與應用具體代碼示例

更新時間：2026年03月05日 09:33:55 作者：凍梨政哥

在前端開發(fā)中,var、let 和const是我們經(jīng)常使用的變量聲明關鍵字,它們雖然看起來相似,但實際上有著不同的作用范圍和特性,這篇文章主要介紹了JavaScript中var、let和const的區(qū)別與應用具體代碼示例的相關資料,需要的朋友可以參考下

前言

在 JavaScript 的發(fā)展歷程中，變量聲明方式經(jīng)歷了重要的演變。從最初的var，到 ES6 引入的let和const，每種聲明方式都有其獨特的特性和使用場景。本文將結合具體代碼示例，詳細解析這三種聲明方式的區(qū)別與應用。

1. var 的特性與問題

var是 JavaScript 最早的變量聲明方式，但它存在一些與直覺不符的特性，在現(xiàn)代開發(fā)中已不推薦使用。

// 早期的JS 就用來頁面交互，有一些缺失甚至設計不合理的地方
// 語言精粹， The Good Parts, The Bad Parts
// es5 只有var 聲明變量，沒有常量
var age = 18; // js 弱類型，由值決定
age++;
var PI = 3.1415926; // 變量大寫 約定就不應該改變 編程習慣
console.log(age);

var的主要問題在于變量提升特性：

// var age=18;// undefined
// age = 18; // 賦值
// JS 腳本語言，它的編譯階段和執(zhí)行階段不像Java/C++ 一樣分開的那么清晰
// 編譯階段有，就在代碼執(zhí)行之前的一霎那，var 就變量提升了
// 接下來代碼進入執(zhí)行階段
// 變量提升 不利于代碼的可讀性，應該廢棄的糟粕

變量提升意味著var聲明的變量會在代碼執(zhí)行前被提升到作用域頂部，這可能導致意外的行為和降低代碼可讀性。

2. let 的塊級作用域

ES6 引入的let解決了var的許多問題，其中最關鍵的是引入了塊級作用域：

{   // 塊級作用域
    var age=18; // 不支持塊級作用域
    let height = 188; // 支持塊級作用域 最大型項目或高級語言的核心
}

console.log(age); // 輸出18，var聲明的變量在塊級作用域外仍可訪問
console.log(height); // 報錯：ReferenceError: height is not defined

上述代碼中，let聲明的height只在塊級作用域（{}內(nèi)）有效，在作用域外訪問會拋出ReferenceError。這一特性讓 JavaScript 更符合其他高級編程語言的特性，也更適合大型項目開發(fā)。

let還解決了變量提升的問題，引入了暫時性死區(qū)：

// 暫時性死區(qū)
// 在編譯階段的變量提升是為了編譯階段就知道有哪些變量和常量
// let/const + 暫時性死區(qū) 解決了變量提升的問題
let height=188;

在let聲明變量之前訪問該變量會拋出ReferenceError: Cannot access '變量名' before initialization，這避免了因變量提升導致的意外行為。

3. const 的常量特性

const用于聲明常量，它具有let的塊級作用域特性，同時還保證變量引用不可更改：

const PI = 3.1415926;
const person={
    name: "nwk",
    age: 20
}
// person = 'hahaha'; // 報錯：TypeError: Assignment to constant variable
person.age=21; // 允許修改對象屬性
console.log(person); // 輸出：{ name: 'nwk', age: 21 }

需要注意的是，const保證的是引用不可變，而非值不可變：

對于簡單數(shù)據(jù)類型（如數(shù)字、字符串），const聲明的變量值不可更改
對于復雜數(shù)據(jù)類型（如對象、數(shù)組），const只保證引用地址不變，但可以修改引用地址中的屬性值

如果需要完全凍結對象，使其屬性也不可修改，可以使用Object.freeze()：

const wes = Object.freeze(person); // 凍結對象
console.log(wes);
wes.age = 17; // 嘗試修改凍結對象的屬性，不會生效也不會報錯
console.log(wes); // 輸出：{ name: 'nwk', age: 21 }

4. 函數(shù)提升與作用域

JavaScript 中函數(shù)是一等公民，存在函數(shù)提升現(xiàn)象，與var的變量提升有所不同：

// js 中函數(shù)是一等公民，編譯階段就會進行函數(shù)提升
// 和var 相同的地方都會提升，不同的地方在于var只會提升變量聲明
// 而函數(shù)不只提升聲明，連賦值也一起提升
setWidth(); // 可以在函數(shù)聲明前調(diào)用，因為函數(shù)被完全提升

// 全局作用域
function setWidth(){
    // 函數(shù)作用域 局部
    var width=100;
    { // 塊級作用域
        let a=1;
    }
    console.log(width); // 輸出100
}

setWidth();
// console.log(width); // 報錯：ReferenceError: width is not defined

函數(shù)提升允許在函數(shù)聲明前調(diào)用函數(shù)，而var聲明的變量只會提升聲明部分，不會提升賦值。

5. 常見錯誤總結

使用這三種聲明方式時，常見的錯誤包括：

ReferenceError: 變量名 is not defined：在作用域外訪問let或const聲明的變量
TypeError: Assignment to constant variable：嘗試修改const聲明的變量引用
ReferenceError: Cannot access '變量名' before initialization：在暫時性死區(qū)內(nèi)訪問let或const聲明的變量