ES6 let 与 var 区别：更强大的作用域

在 ES6 中，新增了 let 和 const 关键字，用于声明变量。与传统的 var 关键字相比，let 和 const 具有更强大的作用域。本文将详细介绍 let 和 var 的区别，并提供示例代码和指导意义。

var 关键字

在 ES6 之前，我们通常使用 var 关键字来声明变量。var 声明的变量具有函数作用域，即只在声明它的函数内部有效。

function foo() {
  var x = 1;
  if (true) {
    var x = 2;
    console.log(x); // 输出 2
  }
  console.log(x); // 输出 2
}

在上面的代码中，if 语句块内部声明了一个名为 x 的变量，但是由于 var 声明的变量具有函数作用域，所以这个变量的作用域实际上是整个函数 foo。因此，第二个 console.log 输出的是 2。

let 关键字

ES6 新增了 let 关键字，用于声明块级作用域的变量。let 声明的变量只在当前代码块内有效，包括 for 循环的计数器。

function foo() {
  let x = 1;
  if (true) {
    let x = 2;
    console.log(x); // 输出 2
  }
  console.log(x); // 输出 1
}

在上面的代码中，if 语句块内部声明了一个名为 x 的变量，由于 let 声明的变量具有块级作用域，所以这个变量的作用域只在 if 语句块内部。因此，第二个 console.log 输出的是 1。

另外，由于 let 声明的变量只在当前代码块内有效，所以可以用来解决闭包中变量共享的问题。

// javascriptcn.com 代码示例
function foo() {
  for (var i = 0; i < 5; i++) {
    setTimeout(function() {
      console.log(i); // 输出 5 个 5
    }, 1000);
  }
}

function bar() {
  for (let i = 0; i < 5; i++) {
    setTimeout(function() {
      console.log(i); // 输出 0 1 2 3 4
    }, 1000);
  }
}

在上面的代码中，foo 函数使用 var 声明的变量 i 在 setTimeout 回调函数中共享，导致输出了 5 个 5。而 bar 函数使用 let 声明的变量 i，每次循环都会重新声明一个新的变量 i，因此输出了 0 到 4。

const 关键字

const 关键字用于声明常量，常量的值不能被重新赋值。const 声明的变量同样具有块级作用域。

// javascriptcn.com 代码示例
const PI = 3.14;
PI = 3; // 报错，常量的值不能被重新赋值

function foo() {
  const x = 1;
  if (true) {
    const x = 2;
    console.log(x); // 输出 2
  }
  console.log(x); // 输出 1
}

总结

ES6 的 let 和 const 关键字具有更强大的作用域，可以有效地避免变量共享和重复声明的问题。在编写 JavaScript 代码时，应该尽可能地使用 let 和 const 关键字，避免使用 var 关键字。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658a3af5eb4cecbf2df6b970