在 ES6 之前的代码中使用“let”和“const”可以吗？

Question

我正在（重新）学习 Javascript，建议我避免混合 ES5 和 ES6 类型代码。但是我的 IDE Webstorm 一直警告我应该在我的代码中使用 let 和 const —— 有大量的黄色标志。当然，我可以关闭这些警告，但我是否应该在适当的时候使用 let 和 const，即使我的其余代码目前是“旧的学校”的JavaScript？ （顺便说一句，我欢迎任何关于过渡到 ES6 的最佳实践的链接/建议，即开始将 ES6 引入代码的最佳方式）。谢谢！

Answer 1

您问题的基本答案：不，在真正的 ES5 中使用 let 和 const 是不行的。您需要使用var。补充一点：如果 Webstorm 发出了这些警告，但你正在编写 ES5，那么你的设置是错误的。转到设置 > 语言和框架 > Javascript，然后将您的 Javascript 语言版本更改为 ECMAScript 5.1。如果您知道您正在编写 ES5，那么您不应该将其设置为根据 ES6 规范验证您的代码。

这里有一些附加信息：

最近我一直在努力连接一个转译器 (Babel) 以在生产环境中将所有 Javascript 转换为 ES5 兼容的语法。如果您想使用 ES6 语法，但仍需要支持不符合 ES6 的浏览器（例如 IE9 - IE11），则需要像 Babel 这样的转译器。考虑到这一点，我想提出一些与let 和const 相关的具体说明。

在真正的 ES6 中，使用 let 定义变量会在其块的范围内创建它。这意味着一旦块退出，该命名变量就会被丢弃。因此，可能会出现以下情况：

const x = 'I am a constant';
if (1 == 1) {
  let x = 'Not here for long';
  console.log(x); // => 'Not here for long'
}
console.log(x); // => 'I am a constant';

当使用let 创建x 的块范围实例时，该实例优先于该块内的const x（本例中的 if 语句）。 Babel 把它变成了什么来使它与 ES5 浏览器兼容实际上是相当聪明的：

var x = 'I am a constant';
if (1 == 1) {
  var _x = 'Not here for long';
  console.log(_x); // => 'Not here for long'
}
console.log(x); // => 'I am a constant';

正如您在此处看到的，它实际上创建了一个具有不同名称的新 var，_x，因此它不会与原始 x 冲突。

最后一点：如果您使用Promise 和Symbol 等新功能，那么转译器是不够的。您还需要为这些使用 polyfill。