有些特性在提案阶段现代浏览器就已经支持了，比如类的私有属性和方法。
2022 年 6 月 22 日，第 123 届 Ecma 大会批准了 ECMAScript 2022 语言规范，这意味着它现在正式成为标准。具体包括以下：
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 {
// Static initialization block
}
}
静态属性的一个问题是，它的初始化要么写在类的外部，要么写在 constructor()方法里面。
const foo = (val) => {y: val + 2, z: val + 4}
class A {
static x = 2;
static y;
static z;
}
try {
const obj = foo(A.x)
A.y = obj.y
A.z = obj.z;
} catch {
A.y = 0;
A.z = 0;
}
以上示例，静态属性 y 和 z 的值依赖静态属性 x，它们的初始化写在类的外部。另一种方法是写到类的 constructor()方法里面。这两种方法都不是很理想，前者是将类的内部逻辑写到了外部，后者则是每次新建实例都会运行一次。
为解决这个问题，ES2022 引入了静态块（static block），允许在类的内部设置一个代码块，在类生成时运行一次，主要作用是对静态属性进行初始化。
class A {
static x = 3;
static y;
static z;
static {
// this 为 class 自身
try {
const obj = foo(this.x);
this.y = obj.y;
this.z = obj.z;
}
catch {
this.y = 0;
this.z = 0;
}
}
}
好处是将静态属性 y 和 z 的初始化逻辑写在了 class 的内部，且只运行一次。
此外，静态块还有一个作用，将私有属性与类的外部代码分享。
let getName
export class Person {
#name = 'jack'
static {
getName = person => person.#name
}
}
console.log(person(new Person())) // 'jack'
in 运算符
在类的外部直接访问私有属性（无论是否存在）都会报错，但是访问不存在的公共属性不会报错。而在类内部直接访问存在的私有属性不会报错，访问不存在的私有属性会报错。可以通过该特性来判断某个对象是否为类的实例。
class Person {
#name = 'jack'
static isPerson(obj) {
try {
obj.#name
return true
} catch {
return false
}
}
}
这种写法很麻烦，可读性太差，ES2022 改进了 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)
注意，判断私有属性时，in 只能用在类的内部。
子类从父类继承的私有属性，也可以使用 in 运算符来判断。
class A {
#foo = 0
static test(obj) {
console.log(#foo in obj)
}
}
class SubA extends A {}
A.test(new SubA()) // true
模块中的顶层 await
以前 await 关键字只能用在 async 函数中。在 ES2022 中，await 可以在模块的顶层使用。
const res = await fetch('https://www.baidu.com')
const html = await res.text()
console.log(html)
.at()
可索引值的方法.at()让可以读取给定索引位置的元素（如括号运算符[]）并支持负索引（与括号运算符不同）：
const arr = ['a', 'b', 'c']
arr.at(0)
// 'a'
arr.at(-1)
// 'c'
以下“可索引”类型具有方法.at()：
string
Array
所有类型化数组类：Uint8Array 等。
Object.hasOwn(obj, propKey)
Object.hasOwn(obj, propKey)提供了一种安全的方法来检查对象 obj 是否具有自己的（非继承的）属性和 key 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 可以既可以检查自身属性还可以检测继承的属性，而 Object.hasOwn()仅检测自己的属性。
正则表达式匹配索引
给正则表达式添加修饰符 d，会生成匹配对象，记录每个组捕获的开始和结束索引：
18048978-a216-4745-b7ea-350a53430029.png
const matchObj = /(a+)(b+)/d.exec('aaaabb')
assert.equal(matchObj[1], 'aaaa')
assert.deepEqual(matchObj.indices[1], [0, 4])
assert.equal(matchObj[2], 'bb')
assert.deepEqual(matchObj.indices[2], [4, 6])
Error 对象的 cause 属性
Error 对象用来表示代码运行时的异常情况，但是从这个对象拿到的上下文信息，有时很难解读，也不够充分。ES2022 为 Error 对象添加了一个 cause 属性，可以在生成错误时，添加报错原因的描述。
它的用法是 new Error()生成 Error 实例时，给出一个描述对象，该对象可以设置 cause 属性。
const actual = new Error('an error!', { cause: 'Error cause' })
actual.cause // 'Error cause'
上面示例中，生成 Error 实例时，使用描述对象给出 cause 属性，写入报错的原因。然后，就可以从实例对象上读取这个属性。
casue 属性可以放置任意内容，不必一定是字符串。
try {
foo()
} catch (err) {
throw new Error('foo failed!', { cause: err })
}
网友评论