ECMAScript 2022新规范

一年一度的ECMAScript规范发布，看看今年有什么新内容！

前言

ECMAScript 是标准化的 JavaScript 语言，于 1997 年发布了第一版，现已发展成为世界上使用最广泛的通用编程语言之一。

ECMAScript 2022 Language是 ECMAScript 语言规范的第 13 版，因此我们也可以称之为ES13!

那么，今年新增了哪些内容呢？

类增强

简单来说有以下三点：

• 属性可以通过以下方式创建

  • 公共的实例字段

  • 静态的公共字段

• 新增私属性插槽（井号）

  • 私有字段（私有实例字段和私有静态字段）

  • 私有方法和访问器（非静态）

• 静态的初始化块

直接看代码：

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 {

    // 静态的初始化块

  }



	constructor(value) {

    this.property = value; // 公共实例字段

  }

}

举一个静态初始化块的例子：

class Translator {

  static translations = {

    yes: 'ja',

    no: 'nein',

    maybe: 'vielleicht',

  };

  static englishWords = [];

  static germanWords = [];

  static { // (A)

    for (const [english, german] of Object.entries(this.translations)) {

      this.englishWords.push(english);

      this.germanWords.push(german);

    }

  }

}

通过使用静态初始化块，我们可以将所有类相关的代码放在类的内部。

上述例子中，可以将初始化两个word数组的过程优化到静态初始化块内部，从而实现我们需要的效果，如果需要还可以访问私有插槽属性。

需要注意的是：

• 一个类可以有多个静态初始化块

• 静态初始化块和静态属性可以交错初始化

• 超类（superclass）的静态初始化块在子类的静态初始化块之前执行

此外，类的私有化属性插槽可以通过in操作符检查，举个例子：

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

);

顶层 await

规范新增顶层await支持，现在我们可以直接在模块内使用顶层await，而不必再额外进入异步函数内再使用await。

看实例：

const res = await fetch("https://jsonplaceholder.typicode.com/todos/1").then(

  (response) => response.json()

);



console.log("res is:", res);

保存上述内容为文件index.mjs，使用node v17.5以上版本或bunjs直接运行：

node index.mjs即可直接获取到输出。

那么，我们可以在什么地方使用这个特性呢？举个例子：

// first.mjs

const response = await fetch('http://example.com/first.txt');

export const first = await response.text();



// main.mjs

import {first} from './first.mjs';

import {second} from './second.mjs';

assert.equal(first, 'First!'); // true

assert.equal(second, 'Second!'); // true

有了顶层await，我们可以像使用同步导出那样直接导出异步的值。

大致等同于以下代码：

first.mjs:

export let first;

export const promise = (async () => { // (A)

  const response = await fetch('http://example.com/first.txt');

  first = await response.text();

})();

main.mjs:

import {promise as firstPromise, first} from './first.mjs';

import {promise as secondPromise, second} from './second.mjs';

export const promise = (async () => { // (B)

  await Promise.all([firstPromise, secondPromise]); // (C)

  assert.equal(first, 'First content!');

  assert.equal(second, 'Second content!');

})();

方便了不少，不是吗？

error.cause

为Error及其子类添加cause属性，更方便地传递错误原因，增强传递错误信息的能力。

function readFiles(filePaths) {

  return filePaths.map(

    (filePath) => {

      try {

        // ···

      } catch (error) {

        throw new Error(

          `While processing ${filePath}`,

          {cause: error}

        );

      }

    });

}

现在，可以访问错误对象的cause属性获取更多详情。

.at()

就像使用python一样使用JavaScript，通过下标访问数组变得容易，具有显式的函数支持，此外跟直接使用[]访问不一样的是，.at()支持传负数参数进行逆序取值。

正则表达式Flag：/d

看例子：

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)

);

通过d执行的正则表达式匹配，可以得到匹配的元素的起始下标。

Object.hasOwn(obj, propKey)

Object.hasOwn(obj, propKey)提供了一种安全的方式通过属性key检查对象是否含有非继承的目标属性。

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)

最后

众所周知：

JavaScript和ECMAScript的区别在于，前者是一个不同平台实现的编程语言，后者是这门语言的标准规范，平台基于此规范实现这门语言。

ECMAScript由TC39标准委员会设计，其成员来自各大科技公司和其他平台等等，每年都会在年中发布最新的规范。

不同的提案经过四个阶段，最终才会进入规范，在进入规范之前不建议使用，因为其始终是不稳定的，关注每年的新增内容即可。