ES 2022 正式发布！有哪些新特性？

2022 年 6 月 22 日，第 123 届 Ecma 大会批准了 ECMAScript 2022 语言规范^[1]，这意味着它现在正式成为标准。

1 ECMAScript 2022编辑

本次发布的编辑有：

• Shu-yu Guo^[2]
• Michael Ficarra^[3]
• Kevin Gibbons^[4]

2 ECMAScript 2022有什么新内容?

2.1 新的class成员

class MyClass {
  instancePublicField = 1;
  static staticPublicField = 2;

  #instancePrivateField = 3;
  static #staticPrivateField = 4;

  #nonStaticPrivateMethod() {}
  get #nonStaticPrivateAccessor() {}
  set #nonStaticPrivateAccessor(value) {}

  static #staticPrivateMethod() {}
  static get #staticPrivateAccessor() {}
  static set #staticPrivateAccessor(value) {}

  static {
    // 静态初始化代码块
  }
}

• 可以通过以下方式创建公共属性 (public slots) :
• 实例公有属性^[5]
• 静态公有属性^[6]
• 私有属性^[7]是新的，可以通过以下方式创建:
• 私有属性 (实例私有属性^[8] and 静态私有属性^[9])
• 私有方法和访问器 (非静态^[10] 和 静态^[11])
• 静态初始化代码块^[12]

2.2 使用 in 操作符检查私有属性

这个操作也被成为 “人性化检查私有属性的方式”. 后面的表达式就是示例 –他检查 obj 是否有一个私有属性 #privateSlot:

#privateSlot in obj

这是个完整例子

class ClassWithPrivateSlot {
  #privateSlot = true;
  static hasPrivateSlot(obj) {
    return #privateSlot in obj;
  }
}

const obj1 = new ClassWithPrivateSlot();
assert.equal(
  ClassWithPrivateSlot.hasPrivateSlot(obj1), true
);

const obj2 = {};
assert.equal(
  ClassWithPrivateSlot.hasPrivateSlot(obj2), false
);

请注意，我们只能在声明它的范围（scope）内引用私有属性。

更多关于私有属性检查的资料^[13]

2.3 模块中的顶层await

我们现在可以在模块的顶层使用 await 并且不再需要输入异步函数或方法

// my-module.mjs
const response = await fetch('https://example.com');
const text = await response.text();
console.log(text);

更多顶层await资料^[14]

2.4 error.cause

Error及其子类现在可以让我们指定哪个错误导致了当前错误：

try {
  // Do something
} catch (otherError) {
  throw new Error('Something went wrong', {cause: otherError});
}

导致当前错误的 err 会显示在调用堆栈中。而且可以通过 err.cause进行访问

更多关于error.cause^[15]

2.5 可索引值方法 .at()

方法 .at() 让我们可以读取给定索引处的元素 (就像 []) 而且支持负数 (与 []不同):

> ['a', 'b', 'c'].at(0)
'a'
> ['a', 'b', 'c'].at(-1)
'c'

以下“可索引”类型具有 .at()方法:

• string
• Array
• 所有的Typed Array : Uint8Array 等.

2.6 RegExp match 指数

如果我们给正则添加标志 /d , 使用它生成匹配对象，就会记录每个组捕获的开始和结束索引（A 行和 B 行）：

const matchObj = /(a+)(b+)/d.exec('aaaabb');

assert.equal(
  matchObj[1], 'aaaa'
);
assert.deepEqual(
  matchObj.indices[1], [0, 4] // (A)
);

assert.equal(
  matchObj[2], 'bb'
);
assert.deepEqual(
  matchObj.indices[2], [4, 6] // (B)
);

更多关于RegExp match indices^[16]

2.7 Object.hasOwn(obj, propKey)

Object.hasOwn(obj, propKey) 提供了一个安全的方式检查对象 obj 是否有键为 propKey的自有（非继承的） 属性:

const proto = {
  protoProp: 'protoProp',
};
const obj = {
  __proto__: proto,
  objProp: 'objProp',
}

assert.equal('protoProp' in obj, true); // (A)

assert.equal(Object.hasOwn(obj, 'protoProp'), false); // (B)
assert.equal(Object.hasOwn(proto, 'protoProp'), true); // (C)

请注意，in 检测继承的属性（A 行），而 Object.hasOwn() 仅检测自己的属性（B 和 C 行）。

3 FAQ

3.1  JavaScript 和 ECMAScript有什么区别？

• 长话短说版——通俗地说：
• JavaScript 是由各种平台（浏览器、Node.js、Deno 等）实现的编程语言。
• ECMAScript是他的标准, 如 the ECMAScript language specification^[17]所描述。
• 长话长说版, 参阅 section “Standardizing JavaScript” in “JavaScript for impatient programmers”^[18].

3.2 谁设计ECMAScript？TC39 – Ecma Technical Committee 39

ECMAScript 由标准组织 Ecma International 的技术委员会 39 (TC39) 设计。

其成员严格来说是公司：Adobe、Apple、Facebook、Google、Microsoft、Mozilla、Opera、Twitter 等。 也就是说，通常是竞争对手的公司正在合作开发 JavaScript。

每两个月，TC39 都会召开由成员指定的代表和受邀专家参加的会议。 这些会议的记录在 GitHub 仓库^[19]中是公开的。

在会议之外，TC39 还与 JavaScript 社区的各种成员和团体合作。

3.3 新特性是如何被记入ECMAScript 中的？ 它们经历了 TC39 的那些流程？

新的ECMAScript 特性必须选TC39提交提案，会经历以下几个阶段：

• 从阶段 0（使 TC39 能够对提案发表评论）
• 到第 4 阶段（提议的功能已准备好添加到 ECMAScript 中）

一旦一个特性达到第 4 阶段，它就会被计划添加到 ECMAScript 中。ECMAScript 版本的功能集通常在每年的 3 月冻结。 在截止日期之后达到第 4 阶段的功能将添加到明年的 ECMAScript 版本中

有关更多信息，请参阅section “The TC39 process” in “JavaScript for impatient programmers”^[20].

3.4 ECMAScript 的版本有多重要？

自从 TC39 流程建立以来，ECMAScript 版本的重要性已经大大降低。 现在真正重要的是提议的功能处于哪个阶段：一旦达到第 4 阶段，就可以安全地使用它。 但即便如此，你仍然需要检查你的目标引擎是否支持它。

3.5 我最喜欢/关注的xx提案什么进展了？

如果你想知道各种提议的功能处于什么阶段，请参阅 TC39 提议库^[21]。

3.6 在哪里可以查看给定 ECMAScript 版本中添加了哪些功能？

有几个地方我们可以查看每个 ECMAScript 版本中的新内容：

• 在 “JavaScript for impatient programmers”, 有一个章节 列出了每个 ECMAScript 版本中新增内容^[22]。同时还附上了解释的连接。
• TC39 库有一个表格，其中包含已完成的提案^[23]，其中说明了它们已经（或将要）引入的 ECMAScript 版本。
• ECMAScript 语言规范的“介绍”^[24]部分列出了每个 ECMAScript 版本的新特性。
• ECMA-262 有一个release页面^[25].

3.7 免费的JavaScript 在线书籍

• “JavaScript for impatient programmers (ES2022 edition)”^[26] 涵盖直到ECMAScript 2022 的 JavaScript
• “Deep JavaScript: Theory and techniques”^[27] 更深入地涵盖语言基础。

参考资料

[1]第 123 届 Ecma 大会批准了 ECMAScript 2022 语言规范: https://www.ecma-international.org/news/ecma-international-approves-new-standards-6/

[2]Shu-yu Guo: https://twitter.com/_shu

[3]Michael Ficarra: https://twitter.com/smooshMap

[4]Kevin Gibbons: https://twitter.com/bakkoting

[5]实例公有属性: https://exploringjs.com/impatient-js/ch_classes.html#instance-public-fields

[6]静态公有属性: https://exploringjs.com/impatient-js/ch_classes.html#static-public-fields

[7]私有属性: https://exploringjs.com/impatient-js/ch_classes.html#private-slots

[8]实例私有属性: https://exploringjs.com/impatient-js/ch_classes.html#instance-private-fields

[9]静态私有属性: https://exploringjs.com/impatient-js/ch_classes.html#static-private-methods-accessors-fields

[10]非静态: https://exploringjs.com/impatient-js/ch_classes.html#private-methods-accessors

[11]静态: https://exploringjs.com/impatient-js/ch_classes.html#static-private-methods-accessors-fields

[12]静态初始化代码块: https://exploringjs.com/impatient-js/ch_classes.html#class-static-initialization-blocks

[13]更多关于私有属性检查的资料: https://exploringjs.com/impatient-js/ch_classes.html#private-slot-checks

[14]更多顶层await资料: https://exploringjs.com/impatient-js/ch_modules.html#top-level-await

[15]更多关于error.cause: https://exploringjs.com/impatient-js/ch_exception-handling.html#error.cause

[16]更多关于RegExp match indices: https://exploringjs.com/impatient-js/ch_regexps.html#regexp-match-indices

[17]the ECMAScript language specification: https://tc39.es/ecma262/

[18]section “Standardizing JavaScript” in “JavaScript for impatient programmers”: https://exploringjs.com/impatient-js/ch_history.html#standardizing-javascript

[19]GitHub 仓库: https://github.com/tc39/tc39-notes/

[20]section “The TC39 process” in “JavaScript for impatient programmers”: https://exploringjs.com/impatient-js/ch_history.html#tc39-process

[21]请参阅 TC39 提议库: https://github.com/tc39/proposals/

[22]列出了每个 ECMAScript 版本中新增内容: https://exploringjs.com/impatient-js/ch_new-javascript-features.html

[23]已完成的提案: https://github.com/tc39/proposals/blob/main/finished-proposals.md

[24]“介绍”: https://tc39.es/ecma262/#sec-intro

[25]release页面: https://github.com/tc39/ecma262/releases

[26]“JavaScript for impatient programmers (ES2022 edition)”: https://exploringjs.com/impatient-js/

[27]“Deep JavaScript: Theory and techniques”: https://exploringjs.com/deep-js/

[28]参考原文: https://2ality.com/2022/06/ecmascript-2022.html

- EOF -

推荐阅读  点击标题可跳转

觉得本文对你有帮助？请分享给更多人

关注「大前端技术之路」加星标，提升前端技能

点赞和在看就是最大的支持❤️