ECMAScript 2022 中的新特性！

2023-02-28

this foo 字段

本文盘点ECMAScript2022中的新特性，包括顶级等待、RegExp匹配索引、新的公共和私有类字段等。一、公共和私有实例字段最新的ES13规范允许我们将成员字段内联定义为类主体的一部分，我们可以使用#来表示私有字段。复制classFoo{title="";#artist="";construc

本文盘点ECMAScript 2022 中的新特性，包括顶级等待、RegExp 匹配索引、新的公共和私有类字段等。

一、公共和私有实例字段

最新的 ES13 规范允许我们将成员字段内联定义为类主体的一部分，我们可以使用#来表示私有字段。

class Foo {
    title = "";
    #artist = "";
    constructor(title, artist){
      this.title = title;
      this.#artist = artist;
    }
}
let foo = new Song("public", "privite property");
console.log(song1.title);
// “property”
console.log(song1.artist);
// undefined1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

使用class关键字定义了一个Foo类。这个类有两个成员，title和artist。该artist成员以井号 (#) 符号为前缀，因此它是私有的。我们允许在构造函数中设置这些字段，构造函数必须this.#artist再次使用哈希前缀访问，不然会被覆盖成公共字段。

二、私有实例方法和访问器

class PageVM {
  title = "";
  #artist = "";
  constructor(title, artist){
    this.title = title;
    this.#artist = artist;
  }
  get getArtist() {
    return this.#artist;
  }
  set #setArtist(artist) {
    this.#artist = artist;
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

三、将静态成员添加到类

class Article {
  static label = "ES 2022";
}
console.log(Article.label) // Es 2022

/***** 私有静态字段 ********/
class Article {
  static #label = "es 2022";
  constructor() {
    console.log(Article.#label) // es 2022
  }
}
let son = new Article();
Article.#label // undefined1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

可以有一个带有 static 的静态私有字段#label；即私有静态字段。

四、/d 正则

提供一个indices数组，数值为匹配到的字符串的开始和结束位置

const str = 'Hello world!';
//查找"Hello"
const patt = /Hello/d;
const res = patt.exec(str);
console.log(res);
/*[
  'Hello',
  index: 0,
  input: 'Hello world!',
  groups: undefined,
  提供数组indices: [ [ 0, 5 ], groups: undefined ]
]*/1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

五、顶层await

const sleep = (delay = 1000) => {
  return new Promise((resolve) => {
    setTimeout(() {
      resolve(true);
    }, delay);
  });
};

await sleep(3000);1.
2.
3.
4.
5.
6.
7.
8.
9.

之前的await只能允许在async函数中使用，ES13允许在顶层使用await函数

六、检查私有字段是否存在

class PageVm { 
  #artist; 
  checkField(){ 
    return #artist in this;
  } 
}
let vm = new PageVm();
vm.checkField(); // true1.
2.
3.
4.
5.
6.
7.
8.

七、at 负索引查找

const list = ['apple', 'banner', 'Grape', 'other', 'pear'];
list[0]; // apple
list.at(0); // apple
list.at(-1); // pear
list.at(-2); // other1.
2.
3.
4.
5.

八、hasOwn

let foo = Object.create(null);
foo.hasOwnProperty = function(){};
Object.hasOwnProperty(foo, 'hasOwnProperty'); // Error: Cannot convert object to primitive value
Object.hasOwnProperty.call(foo, 'hasOwnProperty') // true
Object.hasOwn(foo, 'hasOwnProperty'); // true1.
2.
3.
4.
5.

九、错误原因

function errormsg() {
  try {
    noFun();
  } catch (err) {
    // 支持原因
    throw new Error('causeError', { cause: 'fun为定义，diy error msg' });
  }
}
function goFun() {
    try {
    errormsg();
  } catch (err) {
    console.log(`Cause by: ${err.cause}`); // Cause by: fun为定义，diy error msg
  }
}
goFun()1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.