有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

ES 2022 正式发布!有哪些新特性?

开发者资讯 cat 3个月前 (07-01) 54次浏览 已收录 0个评论 扫描二维码

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

喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址