ES2022 新特征

1、顶层 await

• 以前 await 函数必须在 async 函数内部使用。如下所示：

const print = async () => {
  await Promise.resolve(console.log("Inkoop"))
}
print()

• 现在可以直接在模块的顶层使用，如下所示：

await Promise.resolve(console.log("Inkoop")) // Inkoop

• 动态加载模块：

const strings = await import(`./example.mjs`);
// or
let jQuery;
try {
  jQuery = await import('https://cdn-a.com/jQuery');
} catch {
  jQuery = await import('https://cdn-b.com/jQuery');
}

2、私有 class 属性和方法

在定义属性和方法前添加 # 前缀，这样在 class 外部会真正阻止对这些私有属性和方法的访问。

class MyClass {
  #firstName = "Lorem"
  lastName = "Ipsum"

  printPrivateField() {
    console.log(this.#firstName)
  }

  #sayBye() {
    console.log("Bye")
  }
}

const instance = new MyClass()
console.log(instance.#firstName) // SyntaxError: Private field '#firstName' must be declared in an enclosing class
console.log(instance.lastName) // Ipsum
instance.printPrivateField() // Lorem
instance.#sayBye() // SyntaxError: Private field '#sayBye' must be declared in an enclosing class

3、Array\String\TypeArray 的 At() 方法

• 之前，从后往前访问数组元素，需通过 length 属性：const lastItem = array[array.length - 1]
• at() 方法，类似于之前通过的中括号指引 [] 来取数，不同之处在于 at() 可以传负整数，方便实现从后往前取值，如下：

const lastElement = array.at(-1)
console.log(lastElement) // Output: sup
console.log(array.at(-2)) // Output: draxlr
console.log(array.at(0)) // Output: inkoop

4、Object.hasOwn()

hasOwn(obj, property) 用来判断某属性是否属于对象本身。如果是，则返回 true；如果不存在或者是继承而来，则返回 false。

该方法是用来替换 Object.hasOwnProperty 的。原因如下：

// hasOwnProperty 问题一：通过 Object.create 创建的对象没有 hasOwnProperty 方法
const object2 = Object.create(null)
object2.name = "lorem"
console.log(object2.hasOwnProperty("name")) // TypeError: object2.hasOwnProperty is not a function
// using Object.hasOwn method
console.log(Object.hasOwn(object2, "name")) // Output: true

// hasOwnProperty 问题二：重新定义的方法会被判断为 false
const object3 = {
  name: "JavaScript",
  hasOwnProperty() {
    return false
  },
}
console.log(object3.hasOwnProperty("name")) // Output: false

// using Object.hasOwn method
console.log(Object.hasOwn(object3, "name")) // Output: true
console.log(Object.hasOwn(object3, "hasOwnProperty")) // Output: true

5、RegExp 匹配索引

• 匹配索引可以获取匹配子串的起始索引。只需给表达式标记 /d 标签。该标签主要使用在 RegExp.prototype.exec 和 Strinh.prototype.matchAll 方法。返回结果为数组。示例如下：

const str = "next time there won't be a next time."

// without /d flag
const regex = /(next)/g
console.log(...str.matchAll(regex))

// Output:
// [
//   'next',
//   'next',
//   index: 0,
//   input: "next time there won't be a next time.",
//   groups: undefined
// ] [
//   'next',
//   'next',
//   index: 27,
//   input: "next time there won't be a next time.",
//   groups: undefined
// ]

// with /d flag
const regex2 = /(next)/dg
console.log(...str.matchAll(regex2))
// Output:
// [
//   'next',
//   'next',
//   index: 0,
//   input: "next time there won't be a next time.",
//   groups: undefined,
//   indices: [ [ 0, 4 ], [ 0, 4 ], groups: undefined ]
// ] [
//   'next',
//   'next',
//   index: 27,
//   input: "next time there won't be a next time.",
//   groups: undefined,
//   indices: [ [ 27, 31 ], [ 27, 31 ], groups: undefined ]
// ]

6、检查 class 是否存在某私有变量

• 使用 in 即可，示例如下。如果访问了不存在的私有变量会返回 undefined。

class User {
  #name = "Random User"

  static isNamePresent(object) {
    console.log(#name in object)
  }
}
const instance = new User()

User.isNamePresent(instance) // Output: true
User.isNamePresent({}) // Output: false