JavaScript 中 var、let 和 const 的区别与应用

在 JavaScript 的发展历程中，变量声明方式经历了重要的演变。从最初的var，到 ES6 引入的let和const，每种声明方式都有其独特的特性和使用场景。本文将结合具体代码示例，详细解析这三种声明方式的区别与应用。

1. var 的特性与问题

var是 JavaScript 最早的变量声明方式，但它存在一些与直觉不符的特性，在现代开发中已不推荐使用。

ini 复制代码

// 早期的JS 就用来页面交互，有一些缺失甚至设计不合理的地方
// 语言精粹， The Good Parts, The Bad Parts
// es5 只有var 声明变量，没有常量
var age = 18; // js 弱类型，由值决定
age++;
var PI = 3.1415926; // 变量大写 约定就不应该改变 编程习惯
console.log(age);

var的主要问题在于变量提升特性：

ruby 复制代码

// var age=18;// undefined
// age = 18; // 赋值
// JS 脚本语言，它的编译阶段和执行阶段不像Java/C++ 一样分开的那么清晰
// 编译阶段有，就在代码执行之前的一霎那，var 就变量提升了
// 接下来代码进入执行阶段
// 变量提升 不利于代码的可读性，应该废弃的糟粕

变量提升意味着var声明的变量会在代码执行前被提升到作用域顶部，这可能导致意外的行为和降低代码可读性。

2. let 的块级作用域

ES6 引入的let解决了var的许多问题，其中最关键的是引入了块级作用域：

arduino 复制代码

{   // 块级作用域
    var age=18; // 不支持块级作用域
    let height = 188; // 支持块级作用域 最大型项目或高级语言的核心
}

console.log(age); // 输出18，var声明的变量在块级作用域外仍可访问
console.log(height); // 报错：ReferenceError: height is not defined

上述代码中，let声明的height只在块级作用域（{}内）有效，在作用域外访问会抛出ReferenceError。这一特性让 JavaScript 更符合其他高级编程语言的特性，也更适合大型项目开发。

let还解决了变量提升的问题，引入了暂时性死区：

arduino 复制代码

// 暂时性死区
// 在编译阶段的变量提升是为了编译阶段就知道有哪些变量和常量
// let/const + 暂时性死区 解决了变量提升的问题
let height=188;

在let声明变量之前访问该变量会抛出ReferenceError: Cannot access '变量名' before initialization，这避免了因变量提升导致的意外行为。

3. const 的常量特性

const用于声明常量，它具有let的块级作用域特性，同时还保证变量引用不可更改：

ini 复制代码

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保证的是引用不可变，而非值不可变：

对于简单数据类型（如数字、字符串），const声明的变量值不可更改
对于复杂数据类型（如对象、数组），const只保证引用地址不变，但可以修改引用地址中的属性值

如果需要完全冻结对象，使其属性也不可修改，可以使用Object.freeze()：

ini 复制代码

const wes = Object.freeze(person); // 冻结对象
console.log(wes);
wes.age = 17; // 尝试修改冻结对象的属性，不会生效也不会报错
console.log(wes); // 输出：{ name: 'nwk', age: 21 }

4. 函数提升与作用域

JavaScript 中函数是一等公民，存在函数提升 现象，与var的变量提升有所不同：

scss 复制代码

// js 中函数是一等公民，编译阶段就会进行函数提升
// 和var 相同的地方都会提升，不同的地方在于var只会提升变量声明
// 而函数不只提升声明，连赋值也一起提升
setWidth(); // 可以在函数声明前调用，因为函数被完全提升

// 全局作用域
function setWidth(){
    // 函数作用域 局部
    var width=100;
    { // 块级作用域
        let a=1;
    }
    console.log(width); // 输出100
}

setWidth();
// console.log(width); // 报错：ReferenceError: width is not defined

函数提升允许在函数声明前调用函数，而var声明的变量只会提升声明部分，不会提升赋值。

5. 常见错误总结

使用这三种声明方式时，常见的错误包括：

ReferenceError: 变量名 is not defined：在作用域外访问let或const声明的变量
TypeError: Assignment to constant variable：尝试修改const声明的变量引用
ReferenceError: Cannot access '变量名' before initialization：在暂时性死区内访问let或const声明的变量

6. 最佳实践

优先使用const，当确实需要修改变量时使用let
避免使用var，以减少因变量提升和作用域问题导致的错误
对于不需要修改的对象，可使用Object.freeze()进行冻结

通过合理使用var、let和const，可以写出更清晰、更可靠的 JavaScript 代码，尤其在大型项目开发中，这些特性显得尤为重要。