ES6行动：让和const

ES6 中 let 和 const 的关键要点

ES6 引入了两个新的关键字 let 和 const，它们提供了一种定义块作用域变量和常量的方法，增强了 JavaScript 的功能并减少了潜在的错误。

let 关键字允许在特定块作用域内声明变量，这与 JavaScript 之前仅限于函数和全局作用域的限制相比是一个重大变化。用 let 声明的变量不会被提升（hoisted），这意味着在块内声明之前无法引用它们。

const 关键字用于定义不能重新声明的常量。虽然 const 创建了一个不可变的绑定，但它并没有使值本身不可变。要实现值不可变性，应该使用 Object.freeze()。let 和 const 都在 Node 和所有现代浏览器中受支持。

本教程将介绍 let 和 const，这两个关键字是 ES6 中添加到 JavaScript 的新关键字。它们通过提供一种定义块作用域变量和常量的方法来增强 JavaScript。

本文是关于 ES6 中引入的 JavaScript 新特性的众多文章之一，其中包括 Map 和 WeakMap、Set 和 WeakSet、可用于 String、Number 和 Array 的新方法以及可用于函数的新语法。

let

在 ES5 之前，JavaScript 只有两种作用域：函数作用域和全局作用域。这给来自 C、C 或 Java 等其他语言的开发人员带来了很多挫折和意外行为。JavaScript 缺乏块作用域，这意味着变量只能在其定义的块内访问。块是指一对花括号内的所有内容。让我们来看下面的例子：

function foo() {
  var par = 1;
  if (par >= 0) {
    var bar = 2;
    console.log(par); // 输出 1
    console.log(bar); // 输出 2
  }
  console.log(par); // 输出 1
  console.log(bar); // 输出 2
}
foo();

运行此代码后，您将在控制台中看到以下输出：

<code>1
2
1
2</code>

大多数来自上述语言的开发人员所期望的是，在 if 块之外无法访问 bar 变量。例如，在 C 中运行等效代码会导致错误“bar 未声明”，这指的是在 if 块之外使用 bar。

这种情况在 ES6 中随着块作用域的可用性而改变。ECMA 组织成员知道他们不能改变关键字 var 的行为，因为这会破坏向后兼容性。因此，他们决定引入一个名为 let 的新关键字。后者可用于定义变量，将其作用域限制为声明它们的块。此外，与 var 不同，使用 let 声明的变量不会被提升。如果您在遇到该变量的 let 声明之前引用块中的变量，则会导致 ReferenceError。但这在实践中意味着什么？它只对新手有好处吗？一点也不！

为了解释您为什么喜欢 let，请考虑以下代码，摘自我的文章《5 个 JavaScript 面试练习题》：

function foo() {
  var par = 1;
  if (par >= 0) {
    var bar = 2;
    console.log(par); // 输出 1
    console.log(bar); // 输出 2
  }
  console.log(par); // 输出 1
  console.log(bar); // 输出 2
}
foo();

在这里，您可以识别出一个众所周知的与变量声明、作用域和事件处理程序相关的问题。如果您不知道我在说什么，请查看我提到的文章，然后再回来。

感谢 ES6，我们可以通过在 for 循环中使用 let 声明 i 变量来轻松解决此问题：

<code>1
2
1
2</code>

let 语句在 Node 和所有现代浏览器中受支持。但是，Internet Explorer 11 中有一些需要注意的地方，您可以在 ES6 兼容性表中阅读相关信息。

下面显示了一个演示 var 和 let 之间区别的实时演示，该演示也位于 JSBin 上。

const

const 解决了开发人员将助记名与给定值关联的常见需求，这样该值就不能更改（或更简单地说，定义一个常量）。例如，如果您使用数学公式，则可能需要创建一个 Math 对象。在这个对象中，您想将 π 和 e 的值与助记名关联起来。const 允许您实现此目标。使用它，您可以创建一个常量，该常量可以是全局的，也可以是声明它的函数的局部变量。

用 const 定义的常量遵循与变量相同的作用域规则，但它们不能重新声明。常量还与使用 let 声明的变量共享一个特性，即它们是块作用域的而不是函数作用域的（因此它们不会被提升）。如果您尝试在声明常量之前访问常量，您将收到 ReferenceError。如果您尝试为用 const 声明的变量分配不同的值，您将收到 TypeError。

但是，请注意，const 与不可变性无关。正如 Mathias Bynens 在他的博客文章《ES2015 const 与不可变性无关》中所述，const 创建了一个不可变的绑定，但这并不表示值是不可变的，如下面的代码所示：

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
  nodes[i].addEventListener('click', function() {
    console.log('您点击了元素 #' + i);
  });
}

如果要使对象的 值真正不可变，请使用 Object.freeze()。

const 的浏览器支持与 let 一样好。const 语句在 Node 和所有现代浏览器中受支持。但是，在这里，Internet Explorer 11 也有一些需要注意的地方，您可以在 ES6 兼容性表中阅读相关信息。

下面显示了 const 的一个使用示例：

function foo() {
  var par = 1;
  if (par >= 0) {
    var bar = 2;
    console.log(par); // 输出 1
    console.log(bar); // 输出 2
  }
  console.log(par); // 输出 1
  console.log(bar); // 输出 2
}
foo();

下面显示了前面代码的实时演示，该演示也位于 JSBin 上。

结论

在本教程中，我向您介绍了 let 和 const，这是 ES6 中引入的两种声明变量的新方法。虽然 var 不会很快消失，但我鼓励您尽可能使用 const 和 let，以减少代码出错的可能性。作为进一步阅读，您可能还会喜欢我们的快速提示《如何在 JavaScript 中声明变量》，它更深入地探讨了变量声明的机制。

关于 ES6 let 和 const 的常见问题解答 (FAQ)

var、let 和 const 在 JavaScript ES6 中有什么区别？

在 JavaScript ES6 中，var、let 和 const 用于声明变量。它们之间的主要区别在于它们的作用域和重新赋值。var 是函数作用域的，这意味着它只在其声明的函数内可用。另一方面，let 和 const 是块作用域的，这意味着它们只在其声明的块内可用。至于重新赋值，用 var 和 let 声明的变量可以重新赋值，而用 const 声明的变量则不能。这使得 const 非常适合在整个程序中应保持不变的值。

我应该在代码中何时使用 let 和 const？

当您需要声明一个会随时间变化的变量时，例如循环中的计数器或算法中的值交换，应该使用 let。当您有一个已知不会更改的值时，例如配置设置或对 DOM 元素的引用，应该使用 const。使用 const 可以使您的代码更易于阅读和理解，因为它向其他开发人员表明该值不应更改。

我可以在 JavaScript ES6 中重新分配 const 变量吗？

不可以，您不能在 JavaScript ES6 中重新分配 const 变量。一旦 const 变量被赋值，尝试重新赋值将导致 TypeError。但是，如果 const 变量是一个对象，您可以更改对象的属性，但不能更改对象本身。

JavaScript ES6 中 let 变量的作用域是什么？

在 JavaScript ES6 中，let 变量具有块作用域。这意味着它只能在其定义的代码块内访问。如果您尝试在其块之外访问它，您将收到 ReferenceError。

如果我在没有初始化的情况下使用 let 或 const 声明变量会发生什么？

如果您在没有初始化的情况下使用 let 或 const 声明变量，它将是 undefined。但是，与 var 不同，您不能在声明之前使用 let 或 const 变量。这样做会导致 ReferenceError。

我可以在相同的作用域内使用 let 或 const 声明同名的变量吗？

不可以，您不能在相同的作用域内使用 let 或 const 声明同名的变量。这样做会导致 SyntaxError。这被称为“暂时性死区 (Temporal Dead Zone)”规则。

在 let 和 const 的上下文中，提升是什么？

提升是 JavaScript 中的一种机制，其中变量和函数声明在编译阶段被移动到其包含作用域的顶部。但是，与 var 不同，let 和 const 声明没有被初始化。它们被提升了，但是您不能在声明之前访问它们，因为它们从块的开始到声明被处理之前都处于“暂时性死区”。

我可以在所有浏览器中使用 let 和 const 吗？

let 和 const 是 ES6 (ES2015) 规范的一部分，并且在所有现代浏览器中都受支持。但是，对于不支持 ES6 的旧版浏览器，您需要使用 Babel 等转译器将 ES6 代码转换为 ES5 代码。

使用 let 和 const 的性能影响是什么？

使用 let 和 const 的性能影响可以忽略不计。JavaScript 引擎会针对这些关键字进行优化，因此它们与 var 之间没有明显的性能差异。let、const 和 var 之间的选择应该基于它们的作用域规则和重新赋值行为，而不是性能。

在 JavaScript ES6 中使用 let 和 const 的一些最佳实践是什么？

在 JavaScript ES6 中使用 let 和 const 的一些最佳实践包括默认使用 const，并且仅当您知道需要更改变量时才使用 let。这可以使您的代码更可预测且更易于理解。此外，始终在其作用域的顶部声明变量，以明确它们在何处可用。

以上是ES6行动：让和const的详细内容。更多信息请关注PHP中文网其他相关文章！