JavaScript目前依旧很受欢迎。如GitHub的报告Octoverse中的图表所示，JavaScript是GitHub多年来最常用的语言。此外，Stack Overflow最近的“2019开发者调查报告”也将JavaScript列为最受欢迎的技术。

GitHub最流行语言的变迁

ECMAScript 2015和随后的ECMAScript规范看起来也被众多开发者顺利接受了。

“2018年JS现状”中的JavaScript偏好

本文将介绍ECMAScript 2018的主要功能，以及预计将包含在ECMAScript 2019和2020规范中的提案。

注明：本文的内容基于截止2019年6月的已知信息。文章中的内容和事实可能会随时间推移发生变化。

一些改动和新闻

有些改变不会对JavaScript的语言层面产生直接影响，但可能会带来间接影响，例如影响环境和生态系统等。

TC39的变化

TC39是一个讨论JavaScript标准规范的技术委员会，已决定从2019年开始改变其运营结构。TC39每年召开六次会议，规模已经发展到每次有40到60人参会的程度。

这个委员会以前是主席和副主席的运营结构，现在改为由三位联合主席（Aki Braun（PayPal）、Brian Terlson（微软）和Yulia Startsev（Mozilla））共同负责的架构。他们还在2019年3月开设了官方网站。

在TC39联合主席Aki Braun撰写的文章“TC39的一年（多）历程”中介绍了TC39会议的进展和成果。

2018年7月初，npm加入了ECMA International和TC39。

SharedArrayBuffer

受Meltdown和Spectre安全漏洞影响，浏览器厂商已更改其默认设置，禁用了自2018年1月5日起使用的SharedArrayBuffer对象。

除Chrome之外，其他浏览器依旧保持着这种设置。Chrome 67版之后通过站点隔离重新激活了该对象（参阅https://bugs.chromium.org/p/chromium/issues/detail?id=821270）。

微软Edge改用chromium引擎

2018年12月6日，微软宣布将其Edge浏览器转向Chromium引擎（参阅“微软Edge，通过开源协作让Web受益”，震惊业界。

在2019年1月29日举行的TC39会议期间，场下微软问答环节针对Edge的引擎转换披露了以下事实：

没有开源旧引擎的计划。
现有JavaScript引擎ChakraCore将继续更新，但没有长期更新计划。

ChakraCore团队成员Limin Zhu评论说：除了浏览器，还有很多项目在使用ChakraCore。因此尽管Edge改变了方向，我们的团队仍将继续支持ChakraCore（参阅“微软Edge向Chromium迁移以及ChakraCore的未来”）。

可以从微软Edge内部通道站点下载基于chromium的Edge（Canary/Dev/Beta版本）。

微软将Edge转向Chromium引擎的目的和未来计划可参阅这篇文章“微软Edge与开源Chromium：我们的意图”。

从开发者的角度来看，微软Edge的这种转变可以减轻跨浏览器开发的负担和困难。

但是从Web生态系统的角度来看，此举可能会带来令人担忧的结果。因为这会减少浏览器的多样性。

你可能还记得Internet Explorer处于垄断地位的时代，当时许多网站只支持Internet Explorer；类似地，基于chromium的浏览器越来越多也不是什么好事情。

有关多样性的担忧，请参阅文章“Chrome正在变成新的Internet Explorer 6“和Mozilla的“再见，EdgeHTML”。

模块支持

ECMAScript 2015引入了模块支持，现在模块作为基本功能已经广泛应用。

接下来看看动态import()语法和原生模块支持的概况与当前状态，进一步扩展模块的应用范围。

动态import()

基于Promise的import()语法可以动态加载模块。之前该提案在第3阶段停留了一阵儿，但最终于6月6日达到“第4阶段”并进入ECMAScript 2020规范。

有关import()语法的详细说明，请参阅文章“ES模块，深入图解”。
有关浏览器支持范围参阅https://caniuse.com/#feat=es6-module-dynamic-import。

import("./myModule.mjs")  
    .then(module => {
        ...
    });
// using async/await
(async () => {
    const module = await import("./myModule.mjs");
    ...
})();

Firefox从60版开始可以设置javascript.options.dynamicImport标志（flag）来使用import()语法，Firefox 67开始默认启用该设置。

微软Edge（旧引擎版本）尚不支持import()语法，但是基于chrome的Edge发布时可能会提供支持。

原生模块加载

从2018年5月发布的Firefox 60开始，Firefox可以无需标志就使用原生模块（ESM）（参阅文章“Firefox 60——模块和其他更新”）。2017年9月发布的Node.js 8.5.0实验性地支持ESM。

Node.js中的ESM需要–experimental-modules标志，如下例所示。在这）情况下，CommonJS的’request()'将被禁用以加载模块。

node --experimental-modules my-app.mjs

Node.js基金会为提供ESM的官方支持组建了“模块团队”。模块团队的工作分为4个阶段：

阶段0：从当前Node分支，但删除了Node 8.5.0之后版本中的大部分–experimental-modules实现。
阶段1：添加“最小内核”，凡是工作组认为会在新的ES模块实现中出现的模块都会包含进去。
阶段2：在实现中加入足够多的功能，这些功能应该对主流用户有益，从而构建出最小可行产品。
阶段3：改善用户体验并扩展MVP。

这项工作目前正处于第3阶段。

ECMAScript 2018

ECMAScript 2018于2018年6月宣布。

异步迭代器

异步运算符枚举异步流数据，其操作类似于典型的运算符，并使用语法形式for — await — of。异步运算符和普通运算符之间的区别在于前者返回的是Promise对象。

async function test() {  
    // Regular Iterator
    for (const i of list) ...
// Async Iterator
    for await (const i of asyncList) ...
}

处理异步调用流时可以创建异步运算符工厂。

// example from: https://jakearchibald.com/2017/async-iterators-and-generators/
async function* asyncRandomNumbers() {
    const url = "https://www.random.org/integers/?num=1&min=1&max=100&col=1&base=10&format=plain&rnd=new";
while (true) {
        const response = await fetch(url);
        const text = await response.text();
        yield Number(text);
    }
}
(async function() {
    let i = 0;
for await (const number of asyncRandomNumbers()) {
        console.log(++i, "=>", number);
        if (i === 10) break;
    }
})();
// 1 "=>" 65
// 2 "=>" 62
// ...

对象Rest/Spread属性

与ECMAScript 2015中的Rest参数和Spread运算符规范一样，此提案引入了对象字面量（literal）的对象解析分配和传播属性。

// Rest property
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };  
x; // 1  
y; // 2  
z; // { a: 3, b: 4 }
// Spread property
let n = { x, y, ...z };  
n; // { x: 1, y: 2, a: 3, b: 4 }

删除模板字面量语法限制

模板字面量删除了对转义序列使用的限制。

标记模板字面量是接收模板并返回修改后的字符串的函数。传递给函数的字符串可以是以下类型之一：

Cooked：转义序列已被解释。
Raw：转义序列是普通文本。模板字符串中的非解释值由String.raw()方法处理。

function tagFunc(str, substs) {  
    return str;
}
const result = tagFunc`\u{4B}`;  
result;  // ["K"]  
result.raw; // ["\u{4B}"]

以前，如果模板在反斜杠后有一些字符序列会被视为非法，并且不返回原始字符串。

\u：Unicode（例如\u004B）
\x：十六进制（例如\x4B）
\positive：八进制（例如\141）

ECMAScript 2018移除了与转义序列相关的所有语法限制，并以原始形式返回字符串。在这种情况下，解释的值返回undefined。

const result = tagFunc`\131`;  
result;  // [undefined]  
result.raw; // ["\131"]

查看http://2ality.com/2016/09/template-literal-revision.html了解有关模板字面量的问题和解决方案的更多信息。

Promise.prototype.finally

与try…catch语句的finally语法一样，此提案引入了对Promise对象的类似用法。

finally语法是在最后无条件执行的代码块，与Promise对象的处理状态（‘resolve’或’reject’）无关。调用Promise对象后，无论结果如何都将执行此代码块。

let isLoading = true;
fetch("https://www.random.org/integers/?num=1&min=1&max=100&col=1&base=10&format=plain&rnd=new")  
.then(function(res) {
    if(res) {
        return res.text();
    }
throw new TypeError("Error");
})
.then(function(text) { /* Success */ })
.catch(function(error) { /* Error */ })
.finally(function() {
    // will be performed regardless success or error
    isLoading = false;
});

查看MDN的Promise.prototype.finally文档了解更多信息。

正则表达式

新增了几个正则表达式提案。

正则表达式的s标志。点（.）能匹配所有字符，但\r和\n是例外。为了解决这个问题引入了新的s标志。

// previous
/./test("a");  // true
/./.test("\n");  // false
// dotAll flag
/./s.test("\n");  // true

RegEx命名捕获组。它可以命名一个捕获组。(?<name>pattern)将添加到捕获组模式，然后使用该名称作为捕获的引用。

const rx = /(?<year>[0-9]{4})-(?<month>[0-9]{2})/;  
const match = rx.exec('2018-03');  
match.groups.year; // 2018  
match.groups.month; // 03

RegExp Lookbehind断言。在正则表达式中，一个模式的值由字符串跟随（先行）或不跟随（负向先行）。相比之下，这个提案提供了寻找特定模式以前进（后行）或不前进（负向后行）的能力。

// positive lookahead
/aa(?=bb)/.test("aabb"); // true
// negative lookahead
/aa(?!bb)/.test("aac");  // true
// positive lookbehind
/(?<=aa)bb/.test("aabb");  // true
// negative lookbehind
/(?<!=aa)bb/.test("bbbb");  // true

RegEx Unicode属性转义。Unicode属性转义是在设置了u标志的正则表达式中新增的可用转义序列类型。

/^\p{White_Space}+$/u.test('\t \n\r');  // true /^\p{Script=Greek}+$/u.test('μετά');  // true

ECMAScript 2019

ECMAScript 2019尚处于候选草案状态。根据之前版本的发布日期推算，2019最终版本预计将在2019年6月左右公布。

Array.prototype.flat()/ Array.prototype.flatMap()

Array.prototype.flat()方法和Array.prototype.flatMap()方法以递归方式查找指定深度的子数组元素，并创建一个连接到其中的新数组。

// Array.prototype.flat
[1, 2, [3, 4]].flat();  // [1, 2, 3, 4]
[1, 2, [3, 4, [5, 6]]].flat(1);  // [1, 2, 3, 4, [5, 6]]
// Array.prototype.flatMap
[1, 2, 3, 4].map(x => [x * 2]);  // [[2], [4], [6], [8]]
[1, 2, 3, 4].flatMap(x => [x * 2]);  // [2, 4, 6, 8]

关于**.flat()**命名的小故事：

最初使用的名称是“.flatten()”。但是，MoTools（一个应用广泛的遗留库）有一个类似的名称“array.prototype.flatten()”，提供了类似的功能。如果继续使用“.flatten()”，可能会在使用MoTools的网站上出问题。

为了避免潜在的冲突，.flatten()被改名为.flat()。此外“.smoosh()“也是候选之一；还有人建议改变ECMAScript 2019中MoTools的flatten()行为（参阅https://github.com/mootools/mootools-core/issues/2797）。但这可能让许多不再更新的网站崩溃，Tom Dale的推文指出了这一点（他参与了Ember和SproutCore的开发）。

https://twitter.com/tomdale/status/971288054966247430

Object.fromEntries()

Object.fromEntries()将键值对列表转换为对象。

const entries = new Map([  
    ['foo', 'bar'],
    ['baz', 42]
]);
Object.fromEntries(entries);  // { foo: "bar", baz: 42 }

String.prototype.trimStart()/ .trimEnd()

删除字符串开头的空格（.trimLeft()）或删除字符串末尾的空格（.trimRight()）。

const greeting = "   Hello world!   ";
greeting.trimStart();  // "Hello world!   "  
greeting.trimEnd();  // "   Hello world!"

Symbol.prototype.description属性

Symbol.prototype.description属性返回Symbol对象的可选只读描述。

// will return 'Test Description'
Symbol("Test Description").description;

可选的catch绑定

可选的[catch绑定提案]（(https://github.com/tc39/proposal-optional-catch-binding)是说，如果try…catch语句中的catch语法中未使用参数，则允许省略参数。

// Traditional way
try { ··· } catch(e) { ··· }
// Optional catch binding
// if don't need the use of parameter, it can be omitted
try { ··· } catch { ··· }

Array.prototype.sort()稳定性

当对具有10个以上元素的数组排序时，Array.prototype.sort()方法使用了不稳定的快速排序算法。为了确保数组正确对齐，ECMAScript 2019对Array.prototype.short()使用了Timsort算法。

此规范目前适用于所有JavaScript引擎。但基于ChakraCore的微软Edge对包含超过512个元素的数组会出现排序错误。

下面的截图显示了Edge和Firefox上的稳定性测试结果。如图所示，Edge出错了。

稳定性测试结果：（左）Edge 17.17134/（右）Firefox 66.0.2

更详细的讨论参阅:https://docs.google.com/presentation/d/1mHvxDciqsAchhjepMZlU5fn1DBvglCXSjDWUEtsPGvI/edit#slide=id.g41da6c5107_0_0。

格式良好的JSON.stringify

RFC 8259指定要编码为UTF-8格式的JSON文本用于JSON对象数据交换。但是当使用JSON.stringify()时，一些UTF-16代码（从0xD800到0xDFFFF的字符被归类为“代理”）不会编码为UTF-8。

ECMAScript 2019会返回一个转义序列，而不是返回一个无效的、Unicode字符串，如下图所示（Edge）。

Edge和Firefox上的JSON.stringify()结果

更多详细信息请查看提案文档。

包含JSON

ECMAScript声明JSON是JSON.parse的一个子集，但事实并非如此，因为JSON字符串可以包含未转义的U+2028 LINE SEPARATOR和U+2029 PARAGRAPH SEPARATOR字符。

该提案建议扩展ECMA-262，允许这些字符不将JSON分解为ECMAScript的子集。

// if ECMA is superset of JSON, these must be true
eval('"\u2028"') === "\u2028"  // true  
eval('"\u2029"') === "\u2029"  // true

详细信息请查看提案文档

Function.prototype.toString修订

根据ECMAScript 2016中的定义，Function.prototype.toString()的结果可能因引擎而异。ECMAScript 2019确保返回定义的原始代码（参阅https://tc39.es/Function-prototype-toString-revision/）。

返回函数中定义的代码时，ECMAScript 2019使用以下算法返回函数中定义的代码字符串：

换行符：\r\n（Windows）或\n（macOS）都以Unix样式返回\n。
内置函数：未通过ECMAScript定义的所有代码（主要是内置函数）将作为[native code]返回。

isNaN.toString();  // "function isNaN() { [native code] }"

不同浏览器中“isNaN.toString()”的结果：

通过Function和GeneratorFunction动态创建的函数：引擎必须创建适当的源代码并将其附加到函数上。
其他情况下：抛出TypeError。

更多详细信息查看http://2ality.com/2016/08/function-prototype-tostring.html。

ECMAScript 2020

截至2019年3月1日，TC39 repo master分支已升级为ECMAScript 2020（参阅提交日志）。

此时，ECMAScript 2020中已完成的提案（阶段4）只有String.prototype.matchAll()和import()，但将来完成提案的列表会加入更多项目。

String.prototype.matchAll()方法与String.prototype.match()的工作方式类似。前者与g(global)/y(sticky)标志一起使用时，返回包含匹配字符串和匹配详细信息的迭代器。

const str = "test1test2";  
const rx = /t(e)(st(\d?))/g;
str.match(rx);  // ["test1", "test2"]
for (const match of str.matchAll(rx)) {  
    // 1: ["test1", "e", "st1", "1", index: 0, input: "test1test2"]
    // 2: ["test2", "e", "st2", "2", index: 5, input: "test1test2"]
    match;
}

一些新的或未完成的提案

下面来看一些尚未进入最后阶段的有趣提案。

globalThis

通常，访问顶级对象要通过浏览器环境中的“window”对象。

作为执行环境的扩展，新提案中访问顶级对象的方式也发生了变化。

在Node.js环境中，通过“global”对象访问顶级对象。
HTML5规范有“Window”和“WindowProxy”，而ECMAScript 2015规范中这两个对象都能用来访问顶级对象。

查看https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Inner_and_outer_windows了解Window和WindowProxy对象的差异。

以下代码是在所有环境下获取顶级对象（“global”）引用的最简单方法。但是这种方法会导致Chrome应用中的内容安全政策（CSP）违规。（参阅https://github.com/paulmillr/es6-shim/issues/301）。

var global = Function('return this')();

知名的ES6兼容shim库——ES6 shim，使用下面的函数来获取全局对象，这是目前常用且最好的方法。

// https://github.com/paulmillr/es6-shim/blob/003ee5d15ec1b05ae2ad5ddad3c02fcf8c266e2c/es6-shim.js#L176
var getGlobal = function () {  
    /* global self, window, global */
    // the only reliable means to get the global object is
    // `Function('return this')()`
    // However, this causes CSP violations in Chrome apps.
    if (typeof self !== 'undefined') { return self; }
    if (typeof window !== 'undefined') { return window; }
    if (typeof global !== 'undefined') { return global; }
    throw new Error('unable to locate global object');
};

新提案“globalThis”提供了访问顶级对象的方法，摆脱了与环境的关联性。该提案目前处于第3阶段，尚未最终确定。但在Chrome 71和Firefox 65以及Node.js 12中，globalThis对象可以按如下方式使用：

globalThis.setTimeout;  // window.setTimeout

关于“globalThis”这个名字：

与“Array.prototype.flat()”案例类似，这个提案一开始命名为“global”。但是使用这个名称会让flickr.com崩溃（https://github.com/tc39/proposal-global/issues/20），所以就改为“globalThis”了。

类字段声明

Babel 7.1.0（2018年9月17日发布）版本开始可以使用类字段声明。但这个提案尚未达到最后阶段，此时仍处于“第3阶段”。

该提案以更直观，更简单的方式为类变量引入了声明性语法。

初始化（Initialization）：通过构造函数初始化实例变量。

class MyClass {  
    constructor() {
        this.x = 1;
        this.y = 2;
    }
}

例变量可以使用类字段定义为以下代码的//Initializer部分，初始化区域在构造函数运行之前运行。

class MyClass {  
    // Initializer
    x = 1;
    y = 2;
    log = console.log("Initializer");
    constructor() {
        console.log("Constructor:", this.x, this.y);
    }
}
new MyClass();  
// Initializer
// Constructor: 1 2

私有声明（private declaration）：以前JavaScript没有提供声明“private”的方式，许多开发者使用下划线（“_”）前缀作为约定。但这并不能真正实现私有化（不过的确有一种方法让变量或方法私有化运行）。

function MyClass() {  
    this._x = 1;
    this._y = 2;
}
MyClass.prototype.getX = function() {  
    return this._x;
}

私有声明器使用数字符号（＃）作为前缀来明确声明它是私有的。以“#”开头的变量或方法只能在类块中访问。

class MyClass {  
    #foo; // private field
    constructor(foo) {
        this.#foo = foo;
    }
    incFoo() {
        this.#foo++;
    }
}

声明和访问：以下是以各种形式的声明和访问类字段的简单示例。

class MyClass {  
    A = 1;  // (a) instance field
    static B = 2;  // (b) static class field
    #C = 3;  // (c) private field
    getPrivate() {
        return this.#C;
    }
}
new MyClass().A;  // 1
MyClass.B;  // 2
new MyClass().getPrivate();  // 3

更多详细信息请查看http://2ality.com/2017/07/class-fields.html。

内置模块

内置模块规范现在处于“第1阶段”，与ESM一样。与通常ESM的不同之处在于它们是“内置的”，并随浏览器本身一起分发。

内置模块不直接对全局暴露。它们仅通过导入语法可用。如果浏览器支持内置模块，则使用“std:”前缀+模块名称导入这些模块，如下所示。此示例中加载的是KV Storage模块。

import {storage, StorageArea} from "std:kv-storage";

KV Storage模块和导入映射提案与内置模块规范密切相关。它们俩不属于ECMAScript规范，而属于WICG（Web Incubator社区组）。

KV Storage模块：Chrome 74增加了第一个内置模块KV Storage。KV Storage解决了localStorage的性能问题，并继承了简单API的优势。

在Chrome 74中，可以使用chrome://flags/#enable-experimental-web-platform-features标志启用KV Storage。
请参阅“内置模块演示”页面中的KV Storage演示。

KV Storage具有与Map对象类似的API。字符串和可序列化数据类型可用作键值。它返回一个Promise或Async迭代器，它们会被异步处理。

两个命名导出分别是“storage”和“StorageArea”。

storage：是StorageArea类的实例，名称为default（默认存储数据库为“kv-storage:default”）。
StorageArea：适用于需要额外隔离的情况（例如，存储数据并希望避免与通过默认的storage实例存储的数据冲突的第三方库）。StorageArea数据存储在名为kv-storage:$ {name}的IndexedDB数据库中，其中名称是StorageArea实例的名称。

import {storage} from "std:kv-storage";
const main = async () => {  
  const oldPreferences = await storage.get("preferences");
  document.querySelector("form")
    .addEventListener("submit", async () => {
       const newPreferences = Object.assign({}, oldPreferences, {
         // Updated preferences go here...
       });
       await storage.set("preferences", newPreferences);
  });
};
main();

导入映射：导入映射提案允许控制JavaScript import语句和import()表达式获取的URL，并允许在非导入上下文中复用此映射。

导入映射为内置模块提供Polyfill和回落，使它们能够将当前不可用的模块标识符映射到URL上（参阅https://docs.google.com/document/d/1vFQzbmxg9ilpg8CT_P8roEYcpTfZ06Q5N4J9-ZQqqZo/edit）。

例如，内置模块KV Storage目前仅在Chrome中可用。在支持的浏览器中不会出现加载问题，但对于没有提供支持的浏览器来说，就需要加载KV Storage的polyfill了。

以下示例介绍了导入映射的用法。定义模块的映射并使用import语句的关键URL值。

在没有提供支持的浏览器中，导入URL被识别后作为普通导入URL处理。如果浏览器提供了支持，它们将根据映射信息流动。

<!-- The import map is inlined into your page -->  
<script type="importmap">  
{
  "imports": {
    "/path/to/kv-storage-polyfill.mjs": [
       "std:kv-storage",  // if has native support
       "/path/to/kv-storage-polyfill.mjs" // otherwise load polyfill
    ]
  }
}
</script>
<!-- Then any module scripts with import statements use the above map -->  
<script type="module">  
  import {storage} from '/path/to/kv-storage-polyfill.mjs';
// Use `storage` ...
</script>

结语

JavaScript仍在不断变化。事实证明它之所以成为多年来最流行的语言是有道理的。浏览器和Node.js对新版ECMAScript版本的支持也愈加完善，甚至会提前支持一些尚未完成的提案。

可查看“ECMAScript兼容性列表”。
支持ECMAScript规范的Node.js版本如下（参阅https://node.green/）：ES2017：v9.11.2；ES2018：v10.3.0；ES2019：v12.0.0

在这种透明而强大的标准化流程帮助下，不断进化的JavaScript成为了可靠而强大的语言。

前路漫漫，我们携手共进吧！

英文原文：https://medium.com/@alberto.park/status-of-javascript-ecmascript-2019-beyond-5efca6a2d233

创作场景

JS 规范又双叒要更新了