JavaScript 变量声明：var, let, const 到底有什么区别？

一、基础用法对比

// var：函数作用域，可重复声明
var a = 10;
var a = 20; // 允许重复声明

// let：块级作用域，不可重复声明
let b = 10;
let b = 20; // 报错：重复声明

// const：块级作用域，不可重新赋值
const c = 10;
c = 20; // 报错：无法修改常量

二、作用域差异

// var的函数作用域
function test() {
  var x = 10;
  if (true) {
    var x = 20; // 覆盖外部声明
  }
  console.log(x); // 输出20
}

// let的块级作用域
function test() {
  let y = 10;
  if (true) {
    let y = 20; // 新作用域声明
  }
  console.log(y); // 输出10
}

三、变量提升现象

// var的变量提升
console.log(a); // undefined
var a = 10;

// let/const的暂时性死区
console.log(b); // 报错：未初始化
let b = 10;

四、特殊场景应用

// 循环中的经典案例
for (var i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i); // 输出5次5
  }, 100);
}

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

 五、对象属性修改

const obj = { name: 'Tom' };
obj.name = 'Jick'; // 允许修改属性
console.log(obj.name) //输出Jick
obj = { name: 'Mary' }; // 报错：无法重新赋值

六、最佳实践建议

1. 优先使用 const：如果变量不需要重新赋值，强制使用 const 提升代码安全性
2. 必要时用 let：需要修改值但不需要重复声明时使用
3. 避免使用 var：除非需要兼容老旧浏览器（现代项目已极少使用）

七、总结表格

特性	var	let	const
作用域	函数作用域	块级作用域	块级作用域
重复声明	允许	不允许	不允许
重新赋值	允许	允许	不允许
变量提升	存在	不存在	不存在
暂时性死区	无	有	有

掌握这三个关键字的核心区别，能帮助我们写出更安全、更易维护的 JavaScript 代码。在日常开发中，建议遵循 "const 优先，let 其次，var 最后" 的原则，让代码风格更加规范统一。