对比var、let、const的区别

ECMAScript 6 引入了 let 和 const 关键字，彻底改变了 JavaScript 的变量声明方式。与传统的 var 相比，它们在作用域、提升行为和重复声明等方面有显著差异，这些特性使得代码更可预测且易于维护。

作用域差异

var 声明的变量属于函数作用域或全局作用域，而 let 和 const 属于块级作用域（由 {} 界定）。

// var 的函数作用域
function varExample() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 输出 10（变量泄露到函数作用域）
}

// let/const 的块级作用域
function letExample() {
  if (true) {
    let y = 20;
    const z = 30;
  }
  console.log(y); // ReferenceError: y is not defined
  console.log(z); // ReferenceError: z is not defined
}

变量提升与暂时性死区

var 存在变量提升现象，声明前访问会得到 undefined；let 和 const 虽然也存在提升，但会进入暂时性死区（TDZ），访问直接报错。

console.log(a); // undefined（变量提升）
var a = 1;

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 2;

重复声明

var 允许重复声明同名变量（后者覆盖前者），而 let 和 const 禁止在相同作用域内重复声明。

var c = 1;
var c = 2; // 合法

let d = 3;
let d = 4; // SyntaxError: Identifier 'd' has already been declared

全局对象属性

全局作用域下，var 声明的变量会成为 window 对象的属性，let 和 const 则不会。

var globalVar = 'foo';
let globalLet = 'bar';

console.log(window.globalVar); // 'foo'
console.log(window.globalLet); // undefined

const 的特殊性

const 用于声明常量，必须初始化且不可重新赋值（但对象/数组内部属性可修改）。

const PI = 3.14;
PI = 3.1415; // TypeError: Assignment to constant variable

const obj = { name: 'Alice' };
obj.name = 'Bob'; // 合法（修改属性）
obj = {}; // TypeError（重新赋值）

循环中的表现差异

在 for 循环中，var 会导致变量共享，而 let 会为每次迭代创建独立绑定。

// var 的问题
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 输出 3, 3, 3
}

// let 的解决方案
for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 100); // 输出 0, 1, 2
}

实际应用建议

• 默认使用 const，除非需要重新赋值
• 需要重新赋值时用 let
• 避免使用 var（除非需要兼容旧环境）
• 对象/数组常量推荐用 const 声明

// 推荐写法
const API_URL = 'https://api.example.com';
let requestCount = 0;

function fetchData() {
  requestCount++;
  // ...
}

性能考量

现代 JavaScript 引擎对块级作用域变量有更好的优化。let 和 const 在严格模式下运行更快，因为它们的作用域更明确，引擎更容易做静态分析。