从 JavaScript、ES六、ES7 到 ES10，你学到哪儿了？

做者：Yann s

翻译：疯狂的技术宅

原文：https://medium.com/engineered...

未经容许严禁转载

什么是 JavaScript？据 Wikipedia 的描述，它是一种符合 ECMAScript 规范的脚本语言。 ES6，ES7等这些名字你可能据说过，你也极可能已经使用 ES6 有一段时间了（在不少状况下经过 Babel 使用）。

我肯定大家中的大多数人都在使用许多不一样的 ES6 新功能，而无需问本身：这真的是 ES6吗，浏览器支持该功能吗？不过你对 Babel 在 2019 年进行的转换了解多少？你是否从新了解了 ES 中的内容？自从首次提出 ES6 提案以来，删除了哪些内容？自最初的 ES7 提案以来又增长了什么？

让咱们坐下来回顾一下 ES 的当前状态。自 Babel 和 ES6 诞生以来都发生了什么，什么已彻底集成？

一些历史和扫盲

我认为让你从新了解某项目的不一样阶段是颇有用的。

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

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

在此处获取全部 deets：https://tc39.es/process-docum...

---

---

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;

生成器

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

咱们还有：模板，箭头函数，Promise，新的数字类型，Const/Let，类型化数组，数组解构，Map/Set，符号。

这里是全部功能的列表：http://es6-features.org

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

关于在 ES7（ES2016） 中，如下是咱们可以获得的。这是一个很小的更新：

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

资料来源： http://ecma-international.org...

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

ES8, ES9, ES10

在过去的两年中，每一个接受过 JavaScript 相关面试的人都被问到过 ES6 是什么以及它带来什么功能。可是有人发现 JS 显然并无忽然停留在 ES6 和 ES7 上，可是没有人问你个吗？这是你纠正问题的机会！

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

• Object.entries / Object.values（数组的值/键等效对象）
• 字符串填充 myString.padStart(2); // 或 padEnd
• Trailing coma function test(a,b,c, ) // notice the coma after c
• 原子和共享内存：https://developer.mozilla.org...

固然还有 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-temp...）。如今，容许在模板中使用复杂的语法（例如：LaTex）
• 异步迭代器：能够将迭代器用于异步操做，例如读取 HTTP 流（https://tc39.es/proposal-asyn...）以及引入 for-wait-of
• Promise.finally：https://github.com/tc39/propo...
• 对象销毁。是的，在这里，你已经用了不少年了，它是一项 ES9功能。来自非 react 开发人员的提醒：它容许你：myNewObject = {a,b,c, …object}
• 还包括 unicode 转义和对正则表达式的改进（https://github.com/tc39/propo... ，https://github.com/tc39/propo...）和 https://github.com/tc39/propo...）。

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

最后，转到 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 的行为一致性的问题🥳🥳🥳
• 符号说明
• BigInt（64位数字）
• 改进了对 JSON.stringify() 的 Unicode 支持
• 若是 key 相同，则 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 的超集（此处有详细信息）

那么 ES5 呢？

若是 ES6 是 ES2015，而 ES7 是 ES2016，你能猜出 ES5 属于哪一年吗？

…你输了！ （除非你真的知道，但由于我听不到你的声音，因此我假设你错了）。 ES5 是 ES2009！

在 ES5 以前，最后一次 ES 更新是在 1999 年！

如你所见，从 97 到 99 更新很是频繁，在以后的 16 年里，ES5 是惟一的更新！

咱们如何解释呢？好吧，我认为这有两个因素。

第一个是技术上的：“JavaScript 很烂”。老实说，确实如此。那时，咱们有一些 JS 的替代品：Java Applets，ActiveX 甚至 Flash。

直到 2011 年以前，不只这些技术比 JS 快好几个数量级， 并且它们还具备咱们仍在为 JS 努力争取的不少功能。 （Java 具备全部的语言功能，例如类和装饰器，支持多线程，OpenGL，套接字等）。当 Chrome 和 Google 入场后并在 2013 年宣布淘汰 Java（而后是 Flash）时，JS 遇上其竞争对手的征战已经开始。两年后，咱们有了ES6。

第二个因素是经济上的：2000 年是互联网泡沫爆发的一年。对于大家中最小的孩子，想像一下几年前的比特币，互联网初创公司在 90 年代后期是同样的。初创公司为了得到大量的风险投资在名称的末尾添加了 .com（就像如今的 mySuperStartup.ai 同样），直到其价值在 20 年代忽然降低。这是一个很是基本的解释，请你看一下 wikipedia 上文章来得到更详细的解释。

关键是，Internet 再也不得到使 JS 和与 Web 相关的技术成为焦点所需的吸引力。后来随着 Amazon、Facebook 和 Google 的兴起，Web 有了新的发展理由，咱们选择 JS 是合乎逻辑的！ Chrome 于2008 年发布，并在 2014 年成为最受欢迎的浏览器：这是 ES6 发行的第一年。

少了些什么东西？ （被拒绝的提案）

这是一份从未进入第 4 阶段提案的详尽列表。你能够在此处阅读更多信息：https://github.com/tc39/propo...

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 的执行。

用例会有所不一样，例如，在异步操做时使客户端超时，或者，若是你有一个选项卡驱动的导航系统，而且用户在加载当前选项卡的内容以前单击了另外一个选项卡。

blöcks

我之因此仅说起这一点，是由于我喜欢它的名字，也由于它是一个与 Go Routines 或 C# Tasks 相似的出色功能。

const blöck = await {|
  // This code is Async, but most importantly, executed in another thread
|};

其余

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

---

下一步是什么？

目前，阶段 0 ～ 3 中有一些使人兴奋的东西。我会强调一些：

Observables (Stage 0)

Observe 已被拒绝，但战斗并无中止，Observable 是一项改进 API 的提案，旨在消除 Observe() 遇到的性能瓶颈。

https://tc39.es/proposal-obse...

String.ReplaceAll (Stage 3)

https://github.com/tc39/propo...

顶级 Await (Stage 3)

使用 Await 要求你处于异步函数内，这意味着你不能简单地删除包含 await 的脚本标签，这不必定有意义，而且限制了 ES6 模块在浏览器中无缝运行。它还容许你执行 fetch 操做或者不执行操做。

// 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(...);

https://github.com/tc39/propo...

可选链

也称为猫王(Elvis)运算符（我就是要这样称呼它，你没法阻止我！），可以让你轻松浏览对象而不会引起错误：

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

之因此称为猫王（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/no...。 Babel 还会增长包的大小，最后，在开发时会增长构建时间。因此为何要在每一个项目中都使用 Babel 呢！

与使用原生函数相比，Babel 下降了代码执行速度，增长了包大小，并增长了构建时间。你真的在 每一个项目中都须要它吗？

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

你可能想知道为何 JS 引入 let 而不是改进现有的 var关键字。答案很简单：这样作是为了保持向后兼容性。你不想破坏 web，对吧？ （我是认真的！）

那么 Typescript 呢？

Typescript 的规则是第 3 阶段的提案。

在哪里能够找到更多信息？

Github 和官方网站在这里：

https://github.com/tc39/propo...

https://tc39.es/?source=post_...

---

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

---

欢迎继续阅读本专栏其它高赞文章：

• 深刻理解Shadow DOM v1
• 一步步教你用 WebVR 实现虚拟现实游戏
• 13个帮你提升开发效率的现代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工做的？从调用栈到Promise你须要知道的一切
• WebSocket实战：在 Node 和 React 之间进行实时通讯
• 关于 Git 的 20 个面试题
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什么？
• 30分钟用Node.js构建一个API服务器
• Javascript的对象拷贝
• 程序员30岁前月薪达不到30K，该何去何从
• 14个最好的 JavaScript 数据可视化库
• 8 个给前端的顶级 VS Code 扩展插件
• Node.js 多线程彻底指南
• 把HTML转成PDF的4个方案及实现

---

• 更多文章...