JavaScript 中 let 和 var 的区别

---

首先，let 和 var 都是用于声明变量的关键字，在老版 JavaScript 中也许你会见到 var 方式来声明变量，而现如今几乎都是使用 let 进行声明，接下来看看这两个关键字之间的区别。

1、作用域

• var

  var 声明的变量在函数内部有效，如果在函数内部使用 var 声明一个变量，那么该变量在整个函数内部都是可见的。

  function example() {
    var x = 10;
    if (true) {
      var y = 20;
      console.log(x); // 输出: 10
    }
    console.log(y); // 输出: 20
  }
  

• let

  let 声明的变量在块级作用域内有效，如果在块级作用域内使用let声明一个变量，那么该变量只在该块级作用域内可见。

  function example() {
    let x = 10;
    if (true) {
      let y = 20;
      console.log(x); // 输出: 10
    }
    console.log(y); // 报错: ReferenceError: y is not defined
  }
  

• 小结

  使用 var 声明的变量具有函数作用域，而使用 let 声明的变量具有块级作用域。

2、变量提升

• var

  var声明的变量会在其作用域内的顶部被提升，即可以在声明之前使用变量。

  console.log(x); // 输出: undefined
  var x = 10;
  

• let

  let声明的变量不会被提升，即在声明之前使用变量会导致引用错误。

  console.log(x); // 报错: ReferenceError: x is not defined
  let x = 10;
  

• 小结

  使用 var 声明的变量存在变量提升，而使用 let 声明的变量不存在变量提升。

3、重复声明

• var

  使用var重复声明同一个变量不会报错，而是会覆盖之前的值。

  var x = 10;
  var x = 20;
  console.log(x); // 输出: 20
  

• let

  使用let重复声明同一个变量会导致语法错误。

  let x = 10;
  let x = 20; // 报错: SyntaxError: Identifier 'x' has already been declared
  

• 小结

  使用 var 可以重复声明同一个变量，而使用 let 不允许在同一个作用域内重复声明同一个变量。

—END