demo阐述js中let和var 的不同

当我们使用 var 和 let 来声明变量时，它们在作用域和变量提升方面的差异会产生一些不同的结果。下面是一个示例来说明这些差异。

// 使用 var 声明变量
function varExample() {
  console.log(x); // 输出 undefined
  var x = 10;
  console.log(x); // 输出 10
  if (true) {
    var x = 20;
    console.log(x); // 输出 20
  }
  console.log(x); // 输出 20
}
varExample();

// 使用 let 声明变量
function letExample() {
  console.log(y); // 抛出 ReferenceError: y is not defined 错误
  let y = 10;
  console.log(y); // 输出 10
  if (true) {
    let y = 20;
    console.log(y); // 输出 20
  }
  console.log(y); // 输出 10
}
letExample();

在上述示例中，我们分别使用 var 和 let 声明了变量 x 和 y。我们可以看到以下不同之处：

变量提升：使用 var 声明的变量 x 在整个函数作用域中都是可见的，因此在第一个 console.log(x) 中输出 undefined，而不是抛出错误。这是因为变量 x 被提升到作用域的顶部，但其赋值操作在后面的语句中才执行。而使用 let 声明的变量 y 不会发生变量提升，因此在第一个 console.log(y) 中抛出了 ReferenceError 错误。

块级作用域：在 if 语句块中，使用 var 声明的变量 x 覆盖了外部作用域中的 x，导致在第三个 console.log(x) 中输出 20。这是因为 var 声明的变量只有函数作用域，没有块级作用域的概念。而使用 let 声明的变量 y 存在块级作用域，在 if 语句块中声明的 y 不会影响外部作用域中的 y，因此在第三个 console.log(y) 中输出的是外部作用域中的值 10。

通过这个示例，我们可以清楚地看到 var 和 let 在作用域和变量提升方面的差异。使用 let 声明变量可以更好地控制作用域，并避免一些意外的错误。因此，在现代 JavaScript 开发中，推荐优先使用 let 来声明变量。