行动中的ES6：let和const

在本教程中，我将介绍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); // prints 1
    console.log(bar); // prints 2
  }
  console.log(par); // prints 1
  console.log(bar); // prints 2
}
foo();

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

1
2
1
2

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

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

为了说明您为什么喜欢let ，请考虑以下摘自我的文章5更多JavaScript采访练习的代码 ：

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
  nodes[i].addEventListener('click', function() {
    console.log('You clicked element #' + i);
  });
}

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

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

var nodes = document.getElementsByTagName('button');
for (let i = 0; i < nodes.length; i++) {
  nodes[i].addEventListener('click', function() {
    console.log('You clicked element #' + i);
  });
}

Node和所有现代浏览器均支持let语句。 但是，Internet Explorer 11中有一些陷阱，您可以在ES6兼容性表中阅读这些陷阱。

下面显示了一个演示var和let之间差异的实时演示，也可在JSBin获得 ：

行动中的ES6：jsbin.com上的let和const

const

const解决了开发人员将助记符名称与给定值相关联的普遍需求，以使该值无法更改（或更简单地说，定义一个常量）。 例如，如果您使用的是数学公式，则可能需要创建一个Math对象。 在此对象内，您要将π和e的值与助记符名称相关联。 const使您可以实现此目标。 使用它可以创建一个常量，该常量对于声明它的函数可以是全局的或局部的。

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

但是请注意， const与不变性无关 。 正如Mathias Bynens在其博客文章ES2015中所指出的那样， const与不可变性无关 ， const创建不可变绑定，但并不表示值是不可变的，如以下代码所示：

const foo = {};
foo.bar = 42;
console.log(foo.bar);
// → 42

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

浏览器对const支持与let一样好。 Node和所有现代浏览器均支持语句const 。 但是在这里，Internet Explorer 11也有一些陷阱，您可以在ES6兼容性表中阅读这些陷阱。

const用法示例如下所示：

'use strict';

function foo() {
  const con1 = 3.141;
  if (con1 > 3) {
    const con2 = 1.414;
    console.log(con1); // prints 3.141
    console.log(con2); // prints 1.414
  }
  console.log(con1); // prints 3.141
  try {
    console.log(con2);
  } catch(ex) {
    console.log('Cannot access con2 outside its block');
  }
}
foo();

下面显示了先前代码的实时演示，并且在JSBin上也可以找到 。

行动中的ES6：jsbin.com上的let和const

结论

在本教程中，我向您介绍了let和const ，这是两种声明变量的新方法，这些方法是ES6语言引入的。 尽管var不会很快消失，但我建议您使用const并尽可能let减少代码对错误的敏感性。 通过进一步阅读，您可能还喜欢我们的快速技巧“ 如何在JavaScript中声明变量” ，该技巧进一步探讨了变量声明的机制。

From: https://www.sitepoint.com/es6-let-const/