Javascript持续不断地进化，让它每年都会加入一些新的特性。由于这些新特性有助于改进编码质量，减少打包大小以及提升应用表现，所以它们通常广受开发者社区的欢迎。

在2022年Javascript将会发布第13个版本（也就是ES2022）

我看到在ES2022上提供了很多有趣的新特性。接下来让我们了解一下这些新特性，以及如何在日常工作中使用它们

在之前，对实例属性的声明只能写在构造函数中。但是在ES2022中我们可以像下面这样直接在类中声明实例属性。

示例

class MyClass {
    name = "myClass"
}

为类声明新增了私有变量和方法

在此之前我们是没有办法在类中声明类的私有属性或方法的。在ES2022中我们终于有了专有的方式来声明这些。

如下所示，如需声明一个类属性为私有的，需要在属性名前添加 # 符号。

示例 (类私有属性)

class MyClass {
    #name = "test"

    getName () {
        return this.#name
    }
}

const obj = new MyClass()
console.log(obj.#name) // can't access name since it's private field

示例 (类私有方法)

class MyClass {
    #name = "test"

    #getName () {
        return this.#name
    }
}

const obj = new MyClass()
console.log(obj.#getName()) // can't access getName since it's private method

.at() function

在Javascript中通常会使用数组下标来获取数组中的元素，比如用arr[1]获取数组arr中的第一个元素，但是无法使用arr[-1]获取数组中倒数的元素。这是因为方括号语法不仅仅用于数组，还用于获取对象的属性值。在这种情况下obj[-1]用于获取对象中属性名为-1的值。

ES2022中提供了.at()方法，接受任意索引值作为参数，可以是正数索引或者倒数索引，获取数组或者字符串在该索引值上的值。

示例

之前:

const arr = ['a', 'b', 'c', 'd']
arr[arr.length - 2] // c
arr.slice(-2)[0] // c

const str = 'abcd'
str[str.length - 2] // c
str.slice(-2)[0] // c

现在

const arr = ['a', 'b', 'c', 'd']
arr.at(-2) // c

const str = 'abcd'
str.at(-2) // c

可用于顶级作用域的await操作符

async函数在Javascript中已经使用了很长时间。但在以前，我们无法在async函数之外声明await关键字，否则会引发一个异常。但在ES2022中我们可以在async函数或者类之外声明await操作。

这一特性提供的好处在于，一个模块的顶级作用域上可以先加载异步资源再执行逻辑代码。

jQuery = await import('https://cdn-a.com/jQuery');

以上代码可以保证在执行下面的代码之前已经加载好了jquery资源。

可用于检查类私有属性的in关键字

在类定义之外尝试获取其类私有属性会导致一个异常被抛出，而不是返回undefined。

当然我们也可以使用try/catch来判断私有属性是否存在。但是这也引出另外一个问题，那就是try/cache策略在你不明确知道catch的是什么类型的错误时，确定错误来源会变得困难。

在ES2022中，将会提供一个in关键字，返回结果是一个布尔值，可用于判断私有属性是否存在。使用in关键字就可以替代麻烦的try/catch方法了。

class Person{
  #name = 'Suneet';
  get #getName(){
    return #name;
  }
  set #setName(){
    #name = 'Anna';
  }
  static hasTitle(obj){
    return #name in obj;
  }
}