什么是JavaScript？根据Wikipedia的说法，它是一种符合ECMAScript规范的脚本语言。ES6，ES7等…您可能听说过这些名称，您很可能已经使用ES6一段时间了（在很多情况下是使用Babel的）。

我确定你们中的大多数人都在使用许多其他有趣的ES6功能，而不会问自己：这真的是ES6，浏览器是否仍不支持该功能？在您和我之间，您对Babel在2019年仍将进行的转换了解多少？您是否重新了解了ES中的内容？自从首次提出ES6提案以来，删除了哪些内容？自最初的ES7提案以来增加了什么？

因为我相信每个人都应该关注何时最终在JS中获得replaceAll函数，所以让我们坐下来回顾一下ES场景的当前状态。即将发生什么，自Babel和ES6诞生以来已经完全整合了什么？

一点历史和科学

让我们回到过去！如果像我一样，您在2014–2015年左右第一次听说过ES6和Babel，您很可能仍然认为事物在同一个地方或多或少在同一个地方。这很公平，因为多亏了Babel，我们只需要关心幕后的实际情况。但是正如您可能想像的那样，Babel允许我们在当时可用的“建议阶段”功能在5年内一直没有保留“建议阶段”功能。

为了使我在撰写本文时停止用引号引起来的“建议阶段”（在键入时很难用引号引起来），我认为让您重新了解某项目的不同阶段是很有用的要合并的JS功能。

本质上，这些功能经历了从0到4的阶段，0是最早的阶段，而4是“准备发布”。

阶段0是纯属有人提出的想法，将其整理为阶段1的提案，进行审查和讨论，直到阶段3为止，最后将其优先级划分为阶段4。功能到达阶段4后，便会在浏览器中实现并计划发布。

在此处获取所有说明

ES6和ES7-提醒

简而言之，ES6（或ES2015）是根据2015里程碑通过阶段4的一批功能。换句话说，如果您对ES6有很好的了解，并且对ES7有一定的了解，那么您大约有4年的时间可以赶上……没有压力。

让我们看一下ES6的正式组成部分。顺便说一下，所有这些功能在浏览器中都得到正式支持。换句话说，您不需要Babel来使用它们中的任何一个（除非您支持IE 11）。

在ES6中，我们具有：

创建和继承类的能力。

class MyComponent extends React.Components {
}

具有导入和导出功能的ES6模块。

import * from 'React';
export default MyComponent;

Generators

let fibonacci = {     
  *[Symbol.iterator]() {         
    let pre = 0, cur = 1         
    for (;;) { 
      [ pre, cur ] = [ cur, pre + cur ]
        yield cur
    }
  }
}

我们还提供：模板，箭头函数，Promise，新数字，Const / Let，类型化数组，数组解构，Map/Set，Symbols。此处所有功能的列表

你注意到了吗？装饰器，对象解构（例如React props：{…props}）等都不属于ES6！

关于ES7（ES2016）， 这就是我们拥有的。这是一个很小的更新：

幂运算符 base ** exponent
数组包含 array.includes(myItem) // true or false

您可能已经注意到，Async / Await不是ES7的一部分，而是ES8！

ES8，ES9，ES10

在过去2年中，每个接受过JavaScript相关采访的人都至少被问到1671次ES6是什么以及它带来什么功能。但是有人发现JS显然并没有突然停在ES6和ES7上，但是，没有人问你这件事吗？这是您纠正问题的机会！

在ES8（ES2017）中，以下是可用功能：

Object.entries / Object.values（数组的值/对象的键等效项）
字符串填充 myString.padStart(2); // or padEnd
尾随逗号 function test(a,b,c, ) // notice the comma after c
原子和共享内存

当然，Async / Await函数：

async MyAjaxGetCall(url) {
  return ajax.get(url)
}
const response = await MyAjaxGetCall("/getUsers");
console.log(response) // response is available without using promise.then

如果您已经阅读了这篇文章，那么现在您应该明白了：除少数例外，这些功能是Stage 4，您可以在没有Babel的浏览器中使用它们（也就是说，ES8是ES2017，它仍然是很新的， Edge和Opera的本机引擎之类的某些实现滞后了一点）。

来到ES9。就像ES8和ES6一样，ES9（或ES2018）是一个相当重要的更新：

解除模板字面量限制（https://tc39.es/proposal-template-literal-revision/）。现在，允许在模板中使用复杂的语法（例如：LaTex）
异步迭代器：可以将迭代器用于异步操作，例如读取HTTP流（https://tc39.es/proposal-async-iteration/）以及引入for-wait-of
Promise.finally：https : //github.com/tc39/proposal-promise-finally
对象解构。是的！最后在这里，您已经使用了很多年了，嗯，它是ES9的功能。非React开发人员的提醒：它允许您：myNewObject = {a，b，c，…object}
还包括unicode转义和对Regexes的改进

大多数浏览器已经支持这些功能！

最后，来到ES10（或ES2019）！

Array.flat： [[1,2],3]).flat() // [1,2,3]
Array.flatMap：等同于map（）。flat（）
Object.fromEntries：Object.entries的反向操作（请参阅此处）
String.trimStart（）和String.trimEnd（）：删除字符串中的多余空格
可选的Catch绑定：无需在catch中添加参数（现在您可以} catch {代替} catch(e) {
已重新考虑Function.toString具有一致的行为🥳🥳🥳
symbol说明
BigInt —任意大数（感谢@ redeyes2015进行更正）
改进了对JSON.stringify（）的Unicode支持
现在，如果键相等，则Array.sort保留顺序

const array = [
 {key: 2, value: 'd'},
 {key: 1, value: 'a'},
 {key: 1, value: 'b'},
 {key: 1, value: 'c'},
];
array.sort(...)
/*
[
 {key: 1, value: 'a'},
 {key: 1, value: 'b'},
 {key: 1, value: 'c'},
 {key: 2, value: 'd'},
]
*/

使JavaScript成为JSON的超集（此处的ee详细信息）

那ES5呢？

如果ES6是ES2015，ES7是ES2016，您能猜出ES5是多少年？

ES5是ES2009！

在ES5之前，最新的ES更新是在1999年！

如您所见，从97到99，更新非常频繁，然后ES5将成为16年内唯一的更新！

我们如何解释呢？好吧，我认为这有两个因素。第一个是技术性的：JavaScript很烂。老实说，确实如此。那时，我们有一些JS替代品：Java Applets，ActiveX甚至Flash。

直到2011年代（Chrome开始成为子弹时代）时，这些技术不仅比JS快了 一个数量级，而且 它们还具有我们如今仍在努力获得的JS的大多数功能。（Java具有所有语言功能，例如类和装饰器，支持多线程，OpenGL，套接字等）。当Chrome和Google进入现场并在2013年宣布Java淘汰（然后是Flash）时，促使JS赶上其竞争对手的征战正在进行 。两年后，我们有了ES6。

第二个因素是经济的：2000年是网络泡沫破灭的一年。对于你们中最小的孩子，想像一下几年前的比特币，互联网初创公司在90年代后期是一样的。初创企业在名称的末尾添加了.com，以获得大量的风险投资（就像如今我们Promise的mySuperStartup .ai一样），直到其价值在20年代突然下降。

关键是，Internet不再获得使JS和与Web相关的技术成为焦点所需的吸引力。后来，随着Amazon，Facebook和Google的兴起，网络有了一个新的理由，也有了一个蓬勃发展的新理由。我们选择JS备份是合乎逻辑的！Google于2004年公开发布，Chrome于2008年发布，并在2014年成为最受欢迎的浏览器：比ES6发行早一年。

缺少了什么？（被拒绝的提案）

这是一份从未进入阶段4的提案的详尽列表。您可以在此处阅读更多信息：https : //github.com/tc39/proposals/blob/master/inactive-proposals.md

Object.observe

这可能是所有人中最大的拒绝。最初，它允许JS观察代码中的任何值：

var obj = {
  foo: 0,
  bar: 1
};

Object.observe(obj, function(changes) {
  console.log(changes);
});
obj.baz = 2;
// [{name: 'baz', object: <obj>, type: 'add'}]

这是一个很棒的功能，很明显，您可以通过代码（或使用polyfill）来实现它，但是在浏览器中实现它是实现更快的响应式代码的保证（例如：Angular进行了大量观察）。之所以撤回是因为他们无法实现性能稳定的实现。更多细节在这里。

可取消的Promise

不言而喻，我敢肯定，它并不是唯一缺少的一项功能。这个想法是允许开发人员在任何时候取消任何Promise的执行。

用例会有所不同，例如在异步操作上使客户端超时，或者例如，如果您具有选项卡驱动的导航系统，并且用户在有时间加载当前选项卡的内容之前先单击了一个选项卡。

其他

还提出了其他一些有趣的建议，例如可调用的构造函数。其中大多数要么由于原始作者的原因而被撤回，要么因与现有/计划中的特征冲突或重叠而被拒绝。

下一步是什么？

目前，阶段0–3中有一些令人兴奋的事情。我以为我会强调一些：

可观察的（阶段0）

Observe被拒绝了，但是战斗并没有停止，Observable是一项旨在改进API的建议，以消除Observe（）遇到的性能瓶颈。

顶层等待（阶段3）

使用Await要求您处于异步函数中，这意味着您不能简单地删除其中包含await的脚本标签，这不一定有意义，并且是ES6模块在浏览器中无缝运行的限制。它还允许您执行获取操作以及不执行操作。

// You can do this in a .js file:
fetch(...).then((res) => something = res);
// But you can't do this unless you have a Async keyword
const res = await fetch(...);

Optional 链接

可让您轻松浏览对象而不会引发任何错误：

const test = myObject && myObject.a;
// equivalent to
const test = myObject?.a;

之所以称为Elvis运算符，是因为从侧面看原始的运算符？：看起来像Elvis。

该提案还提到了一个Nullish合并运算符，我希望我们也能找到一个更好的名称：

let x = 0 || 1; // x is 1 because 0 is falsy
let x = 0 ?? 1; // Since 0 is defined, x is 0

结论和常见问题解答

可以肯定的是，您将不会记住所有内容，并且坦率地说，我也不会！希望这对您有一个很好的概述，并鼓励您重新考虑对JavaScript的看法！我想从所有最重要的问题开始常见问题解答：

我还需要babel吗？

很好的问题！考虑到JS（ES6至ES9）的最常见功能，除了IE11之外，还可以在浏览器中完全实现。您可能会认为：“那么，这还不够好”。但是答案还不够好，并且因为您做出了选择，所以您应该考虑：

—在我撰写本文时，IE11目前占浏览器总数的1.86％。但是，不支持IE11并不意味着您会失去1.86％的受众群体，因为您应该考虑到人们能够切换浏览器，而且您的目标受众群体实际使用IE11的比例可能要低得多（例如：如果您定位的是年轻人）人员或技术爱好者）。

—与不支持IE11所失去的金钱相比，支持IE11是否会给您带来更多的收入？为IE11开发不只是使用Babel。您还需要在该浏览器上测试所有功能，因为即使使用Babel，其中某些功能也会损坏，然后找到所有这些问题的修复程序。间接费用可能不值得。

同样，使用本机函数而不是Babel的已编译代码的速度最高可提高3倍，如该基准测试所强调的那样：https : //www.inovex.de/blog/node-js-10/。Babel还会增加包的大小，最后，开发时会减慢构建时间。因此，为什么要在每个项目中重新考虑使用Babel！

与使用本机函数相比，Babel减慢了代码的速度，增加了包的大小并减慢了构建时间。您真的在每个项目中都需要它吗？

为什么要添加诸如let之类的新关键字而不是进行更新？

您可能想知道为什么JS引入let而不是改进现有的var关键字。答案很简单：这样做是为了保持向后兼容性。您不想破坏网络，对吗？（我的意思是……这次是真实的！）

参考

JavaScript, ES6, ES7, ES10 where are we?

JavaScript，ES6，ES7，ES10 详细梳理