ECMAScript 2022 中的新特性!

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

本文盘点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);
// undefined

使用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;
}
}
三、将静态成员添加到类
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 // undefined

以有一个带有 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 ]
]*/
五、 顶层await
const sleep = (delay = 1000) => {
return new Promise((resolve) => {
setTimeout(() {
resolve(true);
}, delay);
});
};

await sleep(3000);

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

六、检查私有字段是否存在
class PageVm { 
#artist;
checkField(){
return #artist in this;
}
}
let vm = new PageVm();
vm.checkField(); // true
七、at 负索引查找
const list = ['apple', 'banner', 'Grape', 'other', 'pear'];
list[0]; // apple
list.at(0); // apple
list.at(-1); // pear
list.at(-2); // other
八、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'); // true
九、错误原因
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()

Error,支持包含错误原因支持,这允许在错误链中进行类似 Java 的堆栈跟踪。错误构造函数现在允许包含一个cause字段的选项。

总结:

ES每次更新都带了便于开发者操作的简化和新特性。

  1. 数组的负索引,不需要知道数组的长度就可以进行一些操作
  2. class的私有属性和方法,提供了更多的操作空间
  3. Error对象的错误信息,利于排查
  4. 顶层await不必再在外层包裹异步函数


责任编辑:武晓燕 来源: 新钛云服
相关推荐

2022-06-24 08:33:13

ECMAScriptjavaScript

2023-06-28 00:40:01

ECMAScriptWeakMapSymbol

2024-06-28 11:39:21

2024-02-19 10:15:37

JavaScript正则表达式ECMAScript

2022-08-05 13:14:25

ES2022JavaScript代码

2022-03-09 08:14:24

CSS容器container

2022-07-07 11:25:50

JavaScriptLicenseMozilla

2009-08-28 08:46:15

Windows 7防火墙

2021-09-04 05:00:26

ESES2021ES12

2021-12-27 07:59:50

ECMAScript JSON模块Node.js

2022-06-06 09:56:38

编程语言Python

2012-02-15 09:37:38

Firefox

2024-09-25 16:31:02

2021-10-27 10:15:25

Python新特性编程语言

2009-01-16 10:01:57

MySQL复制特性测试

2012-05-18 14:36:50

Fedora 17桌面环境

2012-10-22 16:49:56

IBMdw

2009-11-09 11:03:34

ibmdwRational

2009-11-23 20:35:12

ibmdwRational

2009-06-14 22:22:02

ibmdwWebSphere
点赞
收藏

51CTO技术栈公众号