ES——ES2022+

ES2023

ES2023 新特性目前有两条：Array find from last、Hashbang Grammar，也都处于 stage 4 阶段，预计 2023 年发布。

从数组末尾查找元素

新增两个方法： .findLast()、.findLastIndex() 从数组的最后一个元素开始查找，可以同 find()、findIndex() 做一个对比。

const arr = [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }];

// find vs findLast
console.log(arr.find(n => n.value % 2 === 1)); // { value: 1 }
console.log(arr.findLast(n => n.value % 2 === 1)); // { value: 3 }

// findIndex vs findLastIndex
console.log(arr.findIndex(n => n.value % 2 === 1)); // 0
console.log(arr.findLastIndex(n => n.value % 2 === 1)); // 2

Hashbang 语法

如下所示，在 index.js 脚本文件里编写 JS 代码，如果要正确的执行，需要在控制台输入 node index.js。

console.log("JavaScript");

如果直接执行 ./index.js 脚本文件会得到以下报错：

$ ./index.js
./index.js: line 1: syntax error near unexpected token `"JavaScript"'
./index.js: line 1: `console.log("JavaScript");'

很正常，因为我们并没有指定使用何种解释器来执行上述脚本文件。Hashbang 语法是用来指定脚本文件的解释器是什么，语法规则是在脚本文件头部增加一行代码：#!/usr/bin/env node。

// #!/usr/bin/env node
console.log("JavaScript");

注意，还需修改脚本文件的权限 chmod +x index.js，否则执行会报 permission denied: ./index.js 错误。

ES2022

Class Fields

允许在类最外层声明类成员，参考 https://github.com/tc39/proposal-class-fields。

class Person {
  name = 'Tom'
}

私有化类成员：支持私有实例、私有静态类型字段、私有方法。

class Person {
  #privateField1 = 'private field 1'; // 私有字段赋初值
  #privateField2; // 默认 undefined
  static #privateStaticField3 = 'private static field 3'
  constructor(value) {
    this.#privateField2 = value; // 实例化时为私有字段赋值
  }
  #toString() {
    console.log(this.#privateField1, this.#privateField2, InstPrivateClass.#privateStaticField3);
  }
  print() {
    this.#toString()
  }
}
const p = new Person('private field 2')
p.print()

私有字段检查

使用 in 操作符检测某一实例是否包含要检测的私有字段。

class Person {
  #name = 'Ergonomic brand checks for Private Fields';
  static check(obj) {
    return #name in obj;
  }
}

Top-level await

以前 await 必须随着 async 一起出现，只有在 async 函数内才可用。当需要在一些文件顶部进行初始化的场景中使用时就有不支持了，顶级 await 可以解决这个问题，但它仅支持 ES Modules。

let jQuery;
try {
  jQuery = await import('https://cdn-a.com/jQuery');
} catch {
  jQuery = await import('https://cdn-b.com/jQuery');
}

正则新增 /d 修饰符

以前的正则表达式支持 3 个修饰符：/i（忽略大小写）、/g（全局匹配）、/m（多行），当执行正则表达式的 exec() 方法时，新增一个 /d 修饰符，它会返回一个 indices 属性，包含了匹配元素的开始、结束位置索引。

const str = 'ECMAScript_JavaScript'
const regexp = /sc/igd // 忽略大小全局匹配并返回匹配元素的开始、结束位置索引
console.log(regexp.exec(str).indices) // [ 4, 6 ]
console.log(regexp.exec(str).indices) // [ 15, 17 ]

.at() 操作符

根据指定索引获取数组元素，不同的是它支持传递负数，例如 -1 获取最后一个元素。

const arr = ['a', 'b', 'c']
console.log(arr.at(0));
console.log(arr.at(-1)); // 等价于 arr[arr.length - 1]

Object.hasOwn()

Object.hasOwn() 提供了一种更安全的方法来检查对象是否具有自己的属性，适用于检查所有的对象。Object.prototype.hasOwnProperty() 方法遇到 obj = null这种情况会报错，参见以下示例：

const person = Object.create({ name: 'Tom' })
person.age = 18;
console.log(Object.hasOwn(person, 'name')); // false
console.log(Object.hasOwn(person, 'age')); // true

// 遇到这种情况 hasOwnProperty 会报错
const p1 = null
console.log(p1.hasOwnProperty('name')); // TypeError: Cannot read properties of null (reading 'hasOwnProperty')

Error Cause

Error Cause 是由阿里巴巴提出的一个提案，为 Error 构造函数增加了一个 options，可设置 cause 的值为任意一个有效的 JavaScript 值。

例如，自定义错误 message，将错误原因赋给 cause 属性，传递给下一个捕获的地方。

try {
  await fetch().catch(err => {
    throw new Error('Request failed', { cause: err })
  })
} catch (e) {
  console.log(e.message);
  console.log(e.cause);
}

Class Static Block

类的静态初始化块是在类中为静态成员提供了一个用于做初始化工作的代码块。

class C {
  static x = 'x';
  static y;
  static z;
  static {
    try {
      const obj = doSomethingWith(this.x);
      this.y = obj.y;
      this.z = obj.z;
    } catch (err) {
      this.y = 'y is error';
      this.z = 'z is error';
    }
  }
}