JavaScript 中 let, const 和 var 的区别是什么？

推荐答案

在 JavaScript 中，let、const 和 var 都用于声明变量，但它们之间存在一些关键区别：

1. 作用域：

   • var 声明的变量具有函数作用域（function scope），即在函数内部声明的变量在整个函数内都有效。
   • let 和 const 声明的变量具有块级作用域（block scope），即只在声明它们的块（如 {}）内有效。

2. 变量提升：

   • var 声明的变量会被提升到其作用域的顶部，这意味着你可以在声明之前访问它们，但值为 undefined。
   • let 和 const 声明的变量也会被提升，但在声明之前访问它们会抛出 ReferenceError，这种现象称为“暂时性死区”（Temporal Dead Zone, TDZ）。

3. 重复声明：

   • var 允许在同一作用域内重复声明变量，后面的声明会覆盖前面的声明。
   • let 和 const 不允许在同一作用域内重复声明变量，否则会抛出 SyntaxError。

4. 值的可变性：

   • var 和 let 声明的变量可以重新赋值。
   • const 声明的变量不能重新赋值，但如果声明的是对象或数组，其属性或元素可以被修改。

本题详细解读

1. 作用域

• var：

  • var 声明的变量具有函数作用域。这意味着在函数内部声明的变量在整个函数内都有效，甚至在声明之前也可以访问（尽管值为 undefined）。
  • 例如：

    function example() {
      console.log(x); // undefined
      var x = 10;
      console.log(x); // 10
    }

• let 和 const：

  • let 和 const 声明的变量具有块级作用域。这意味着它们只在声明它们的块（如 {}）内有效。
  • 例如：

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

2. 变量提升

• var：

  • var 声明的变量会被提升到其作用域的顶部，这意味着你可以在声明之前访问它们，但值为 undefined。
  • 例如：

    console.log(a); // undefined
    var a = 5;

• let 和 const：

  • let 和 const 声明的变量也会被提升，但在声明之前访问它们会抛出 ReferenceError，这种现象称为“暂时性死区”（Temporal Dead Zone, TDZ）。
  • 例如：

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

3. 重复声明

• var：

  • var 允许在同一作用域内重复声明变量，后面的声明会覆盖前面的声明。
  • 例如：

    var c = 1;
    var c = 2;
    console.log(c); // 2

• let 和 const：

  • let 和 const 不允许在同一作用域内重复声明变量，否则会抛出 SyntaxError。
  • 例如：

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

4. 值的可变性

• var 和 let：

  • var 和 let 声明的变量可以重新赋值。
  • 例如：

    var e = 5;
    e = 6;
    console.log(e); // 6
    
    let f = 7;
    f = 8;
    console.log(f); // 8

• const：

  • const 声明的变量不能重新赋值，但如果声明的是对象或数组，其属性或元素可以被修改。
  • 例如：

    const g = 9;
    g = 10; // TypeError: Assignment to constant variable.
    
    const h = { name: 'Alice' };
    h.name = 'Bob';
    console.log(h.name); // Bob