var、let、const区别

在 JavaScript 中，var、let 和 const 是用于声明变量的关键字，但它们的作用域、提升行为以及可变性等方面有显著区别。以下是它们的详细对比：

1. var

• 作用域:

  • var 声明的变量是函数作用域（function-scoped），即在函数内部声明的变量只能在函数内部访问。

  • 如果在函数外部声明，则为全局作用域。

• 提升（Hoisting）:

  • var 声明的变量会被提升到其作用域的顶部，但赋值不会被提升。

  • 在声明之前访问变量会得到 undefined。

• 重复声明:

  • 允许重复声明同一个变量，不会报错。

• 示例:

  function example() {
    console.log(x); // undefined （变量提升）
    var x = 10;
    console.log(x); // 10
  }
  example();

2. let

• 作用域:

  • let 声明的变量是块级作用域（block-scoped），即只在 {} 代码块内有效。

  • 适用于循环、条件语句等块级作用域场景。

• 提升（Hoisting）:

  • let 声明的变量也会被提升，但不会初始化，访问时会抛出 ReferenceError（暂时性死区，TDZ）。

• 重复声明:

  • 不允许在同一个作用域内重复声明同一个变量。

• 示例:

  if (true) {
    let y = 20;
    console.log(y); // 20
  }
  console.log(y); // ReferenceError: y is not defined

3. const

• 作用域:

  • const 声明的变量也是块级作用域（block-scoped）。

• 提升（Hoisting）:

  • 与 let 类似，const 声明的变量也会被提升，但不会初始化，访问时会抛出 ReferenceError。

• 可变性:

  • const 声明的变量必须初始化，且不能重新赋值。

  • 如果变量是对象或数组，其属性或元素可以修改，但变量本身不能重新赋值。

• 重复声明:

  • 不允许在同一个作用域内重复声明同一个变量。

• 示例:

  const z = 30;
  z = 40; // TypeError: Assignment to constant variable
  
  const obj = { a: 1 };
  obj.a = 2; // 合法，修改属性
  obj = {}; // TypeError: Assignment to constant variable

4. var、let 和 const 的区别

（Temporal Dead Zone，暂时性死区） 

5. 使用建议

• 避免使用 var:

  • var 的作用域和提升行为容易导致 bug，现代 JavaScript 开发中建议避免使用。

• 优先使用 const:

  • 如果变量的值不需要改变，优先使用 const，以确保变量的不可变性。

• 必要时使用 let:

  • 如果变量的值需要改变，使用 let。

6. 总结

• var:

  • 函数作用域，变量提升，允许重复声明。

• let:

  • 块级作用域，变量提升但不初始化，不允许重复声明。

• const:

  • 块级作用域，变量提升但不初始化，不允许重复声明，不可重新赋值。

根据实际需求选择合适的变量声明方式，可以提高代码的可读性和可维护性。