var let const 之间的比较

var

特点

• 函数作用域：var 声明的变量在函数内有效，如果在函数外声明，则为全局作用域。
• 变量提升：var 声明的变量会被提升到函数的顶部，初始化为 undefined。即使在声明之前引用，JavaScript 也不会抛出错误。
• 可重复声明：在同一作用域内，可以多次声明同一个变量，不会引发错误。

用法

// 在函数内
function example() {
  var x = 1;
  if (true) {
    var x = 2; // 同一作用域内的重复声明
    console.log(x); // 2
  }
  console.log(x); // 2
}

// 在全局范围
var y = 10;
console.log(y); // 10

容易出错点

• 作用域问题：由于 var 的作用域是函数级别的，容易引起作用域混淆，特别是在循环和条件语句中。
• 提升问题：变量提升可能导致意料之外的结果，例如在使用变量之前访问它，结果是 undefined。
• 重复声明：允许重复声明变量可能导致难以追踪的错误。

let

特点

• 块级作用域：let 声明的变量只在块级作用域内有效（如 if 语句或循环）。
• 变量提升：let 声明的变量会被提升，但不会初始化。在声明之前访问会导致 ReferenceError。
• 不可重复声明：在同一作用域内不能重复声明同一变量，会引发 SyntaxError。

用法

function example() {
  let x = 1;
  if (true) {
    let x = 2; // 块级作用域内的声明
    console.log(x); // 2
  }
  console.log(x); // 1
}

// 在循环中
for (let i = 0; i < 3; i++) {
  console.log(i); // 0, 1, 2
}
console.log(i); // ReferenceError: i is not defined

容易出错点

• 暂时性死区：let 变量在声明之前访问会导致 ReferenceError，可能导致不易追踪的错误。
• 块级作用域：初学者可能会混淆 let 的块级作用域与 var 的函数作用域，特别是在循环和条件语句中。

const

特点

• 块级作用域：const 的作用域与 let 相同，也是块级作用域。
• 常量：const 声明的变量必须在声明时初始化，并且之后不能被重新赋值（对于基本数据类型）。对于对象和数组，const 保证引用不变，但对象的内容可以改变。
• 变量提升：const 声明的变量会被提升，但不会初始化。在声明之前访问会导致 ReferenceError。

用法

const x = 10;
console.log(x); // 10
// x = 20; // TypeError: Assignment to constant variable

const obj = { key: 'value' };
obj.key = 'newValue'; // 这是允许的
console.log(obj.key); // 'newValue'

// 对象或数组的内容可以被修改
const arr = [1, 2, 3];
arr.push(4); // 这是允许的
console.log(arr); // [1, 2, 3, 4]

容易出错点

• 重新赋值：const 变量必须在声明时初始化，并且不能重新赋值。尝试重新赋值会导致 TypeError。
• 内容修改：虽然 const 保证了变量绑定的引用不变，但对于对象和数组，内容是可以修改的。需要注意区分引用不变与内容可变。
• 块级作用域：与 let 一样，const 的块级作用域可能导致作用域混淆，特别是在循环和条件语句中。

总结

• var：适用于旧代码，函数作用域，存在提升和重复声明问题。
• let：推荐用于需要块级作用域的情况，避免提升和重复声明问题。
• const：推荐用于需要不可重新赋值的常量，块级作用域，但要注意对象和数组的内容可以修改。