ES6 中的 var 和 let 有何区别？

2023-10-27 05:22:30

ES6 中，let 和 var 都是用于声明变量的，但它们之间存在着一些关键区别。

1. 变量提升

var 变量存在变量提升，而 let 变量不存在。

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

console.log(b); // ReferenceError: b is not defined
let b = 20;

在上面的代码中，var 变量 a 在声明之前就被提升到了函数的顶部，因此在声明之前使用它不会报错。但是，let 变量 b 在声明之前没有被提升，因此在声明之前使用它会报错。

2. 作用域

var 变量的作用域是函数级，而 let 变量的作用域是块级。

function test() {
  var a = 10;
  if (true) {
    var a = 20;
    console.log(a); // 20
  }
  console.log(a); // 20
}

test(); // 输出：20 20

在上面的代码中，var 变量 a 的作用域是整个函数，因此在函数内部的任何地方都可以使用它。当在 if 语句中重新声明 a 时，它会覆盖函数级作用域中的 a，因此在 if 语句内部，a 的值是 20。当离开 if 语句时，a 的值仍然是 20，因为函数级作用域中的 a 已经被覆盖了。

function test() {
  let a = 10;
  if (true) {
    let a = 20;
    console.log(a); // 20
  }
  console.log(a); // 10
}

test(); // 输出：20 10

在上面的代码中，let 变量 a 的作用域是块级，因此只能在声明它的块内使用。当在 if 语句中重新声明 a 时，它不会覆盖函数级作用域中的 a，因此在 if 语句内部，a 的值是 20。当离开 if 语句时，a 的值仍然是 10，因为函数级作用域中的 a 没有被覆盖。

3. 块级作用域

let 变量具有块级作用域，这意味着它们只能在声明它们的块内使用。这与 var 变量不同，var 变量具有函数级作用域，这意味着它们可以在声明它们的函数的任何地方使用。

if (true) {
  let a = 10;
  console.log(a); // 10
}

console.log(a); // ReferenceError: a is not defined

在上面的代码中，let 变量 a 的作用域仅限于 if 语句块，因此在 if 语句块之外使用它会报错。

4. 全局变量

var 变量可以声明为全局变量，而 let 变量不能声明为全局变量。

var a = 10;
window.a; // 10

let b = 20;
window.b; // undefined

在上面的代码中，var 变量 a 可以通过 window 对象访问，而 let 变量 b 则不能通过 window 对象访问。

5. 变量声明

var 变量可以使用 var 关键字声明，而 let 变量可以使用 let 关键字声明。

var a = 10;
let b = 20;

在上面的代码中，var 变量 a 和 let 变量 b 都被声明了。

6. 语法

var 变量的语法与 let 变量的语法不同。

var a = 10;
let b = 20;

在上面的代码中，var 变量 a 的语法是 var a = 10;，而 let 变量 b 的语法是 let b = 20;。

7. 循环

let 变量可以在循环中使用，而 var 变量不能在循环中使用。

for (let i = 0; i < 10; i++) {
  console.log(i); // 0 1 2 3 4 5 6 7 8 9
}

for (var i = 0; i < 10; i++) {
  console.log(i); // 0 1 2 3 4 5 6 7 8 9 10
}

在上面的代码中，let 变量 i 只在循环体内有效，而 var 变量 i 在循环体外仍然有效。

8. 闭包

let 变量可以在闭包中使用，而 var 变量不能在闭包中使用。

function outer() {
  var a = 10;
  let b = 20;

  function inner() {
    console.log(a); // 10
    console.log(b); // ReferenceError: b is not defined
  }

  inner();
}

outer();