茶已备好，只待君来！感谢关注 前端点线面 (>‿<）,本号干货满满：14个门类（100+篇原创）内容——又干又硬、《前端百题斩》pdf——助力薪资double、20+篇思维导图——知识系统化、记忆简单化；加我进卧虎藏龙摸鱼群，一起划水一起嗨！！！

很快，新版本的 ECMA Script 将在几个月内成为标准。那么让我们来看看将成为 ES2022 一部分的特性。

ES2022 的新功能

1、.at()索引值对应值的方法。

这个函数让我们读取给定索引处的元素。它可以接受负索引来从给定数据类型的末尾读取元素。

例如

[1,2,3,4,5].at(3)  // returns 4[1,2,3,4,5].at(-2)   // returns 4

支持此功能的数据类型有以下：

String
Array
所有类型化数组类：Uint8Array 等。

2、 RegExp 匹配索引

除了g、i，正则表达式新增d标志会生成匹配对象，记录每个组捕获的开始和结束。

有不同的方法来匹配索引

编号组的匹配索引

const matchObj = /(a+)(b+)/d.exec('aaaabb');console.log(matchObj);
/*
Output -
['aaaabb', 'aaaa', 'bb', index: 0, input: 'aaaabb', groups: undefined, indices: Array(3)]
*/

可以看到matchObj 还有一个属性 .indices 记录输入字符串中捕获的每个编号组。

matchObj.indices[1];
/*
Output -
[0, 4]
*/

命名组的匹配索引

const matchObj = /(?<as>a+)(?<bs>b+)/d.exec('aaaabb');console.log(matchObj);
/*
Output -
['aaaabb', 'aaaa', 'bb', index: 0, input: 'aaaabb', groups: {as: 'aaaa', bs: 'bb'}, indices: Array(3)]
*/

它们的索引存储在matchObj.indices.groups

matchObj.indices.groups;
/*
Output -
{ as: [0,4], bs: [4,6] }
*/

3、Object.hasOwn(obj, propKey)

这是检查obj对象自身属性propKey的一种安全方法。它类似于Object.prototype.hasOwnProperty但它支持所有对象类型。

const proto = {protoProp: 'protoProp',
};const obj = {__proto__: proto,objProp: 'objProp',
};console.log('protoProp' in obj); // output - true.
console.log(Object.hasOwn(obj, 'protoProp')) // output - false
console.log(Object.hasOwn(proto, 'protoProp')); // output - true.

4、error.cause

通过分析错误及其子类让我们指定错误背后的原因。

function readFiles(filePaths) {return filePaths.map((filePath) => {try {// ···} catch (error) {throw new Error(`While processing ${filePath}`,{cause: error});}});
}

5、顶层 await

以前当 async/await 首次引用时，尝试在 async 函数外部使用 await 的结果是产生 SyntaxError错误。所以大多数开发者使用立即执行异步函数表达式的方式来使用该功能，现在不需要了。

动态加载模块

const messages = await import(`./messages-${language}.mjs`);

如果模块加载失败，使用回退

let lodash;
try {lodash = await import('https://primary.example.com/lodash');
} catch {lodash = await import('https://secondary.example.com/lodash');
}

使用加载速度最快的资源

const resource = await Promise.any([fetch('http://example.com/first.txt').then(response => response.text()),fetch('http://example.com/second.txt').then(response => response.text()),
]);

6、class新成员

公共属性可以通过实例公共字段创建

class InstPublicClass {// 实例公共字段instancePublicField = 0; // (A)constructor(value) {// 我们不需要在其他地方提及 .property！this.property = value; // (B)}
}const inst = new InstPublicClass('constrArg');

静态公共字段

const computedFieldKey = Symbol('computedFieldKey');
class StaticPublicFieldClass {static identifierFieldKey = 1;static 'quoted field key' = 2;static [computedFieldKey] = 3;
}
console.log(StaticPublicFieldClass.identifierFieldKey) //output -> 1
console.log(StaticPublicFieldClass['quoted field key']) //output -> 2
console.log(StaticPublicFieldClass[computedFieldKey]) //output -> 3

实例私有字段

class InstPrivateClass {#privateField1 = 'private field 1'; // (A)#privateField2; // (B) required!constructor(value) {this.#privateField2 = value; // (C)}/*** 私有字段在类主体之外是不可访问的。*/checkPrivateValues() {console.log(this.#privateField1); // output -> 'private field 1'console.log(this.#privateField2); // output -> 'constructor argument'}
}const inst = new InstPrivateClass('constructor argument');inst.checkPrivateValues();console.log("inst", Object.keys(inst).length === 0) //output -> inst, true

实例和静态私有字段

class InstPrivateClass {#privateField1 = 'private field 1'; // (A)#privateField2; // (B) required!static #staticPrivateField = 'hello';constructor(value) {this.#privateField2 = value; // (C)}/*** 私有字段在类主体之外是不可访问的*/checkPrivateValues() {console.log(this.#privateField1); // output -> 'private field 1'console.log(this.#privateField2); // output -> 'constructor argument'}static #twice() {return this.#staticPrivateField + " " + this.#staticPrivateField;}static getResultTwice() {return this.#twice()}
}const inst = new InstPrivateClass('constructor argument');
inst.checkPrivateValues();console.log("inst", Object.keys(inst).length === 0) //output -> "inst", true
console.log(InstPrivateClass.getResultTwice()); // output -> "hello hello"

私有方法和访问器

class MyClass {#privateMethod() {}static check() {const inst = new MyClass();console.log(#privateMethod in inst) // output-> trueconsole.log(#privateMethod in MyClass.prototype) // output-> falseconsole.log(#privateMethod in MyClass) // output-> false}
}
MyClass.check();

类中的静态初始化块。对于静态数据，我们有每次创建新实例时都会执行的 静态字段和静态块。

class Translator {static translations = {yes: 'ja',no: 'nein',maybe: 'vielleicht',};static englishWords = [];static germanWords = [];static { // (A)for (const [english, german] of Object.entries(this.translations)) {this.englishWords.push(english);this.germanWords.push(german);}}
}console.log(Translator.englishWords, Translator.germanWords)
//Output -> ["yes", "no", "maybe"], ["ja", "nein", "vielleicht"]

私有slot检查- 此功能帮助我们检查对象中是否有给定的私有slot。

class C1 {#priv() {}static check(obj) {return #priv in obj;}
}console.log(C1.check(new C1())) // output true

这些惊人的功能将帮助我们增强我们的项目并改进我们的编码技术。

ES2022 有什么新功能？一起来瞧瞧相关推荐

新的 ES2022 规范终于发布了，我总结了8个实用的新功能
JavaScript 不是一种开源语言,它是一种需要遵循 ECMAScript 标准规范编写的语言,TC39 委员会负责讨论和批准新功能的发布, 那TC39他们是谁? "ECMA Inter ...
微信小程序长按图片不出现菜单_微信更新，新功能上了热搜
微信在推出新功能方面相当克制,但每一次总能引起全网关注. 昨天,微信又因为一个小功能的改进再次上了热搜,在安卓最新的 7.0.17 版本当中,微信取消了两分钟内删除功能. 在新版微信中,发出的消息在两 ...
drx功能开启后_简单实用！小米手机中这些新功能真香
小米手机作为国产机热销品牌之一,它除了有好看的外观,还有很多隐藏的实用功能,今天小编就来和大家分享5个小米手机里你不知道的功能. Al电话助理看到陌生号码时,很多人第一反应就是挂掉,不想接听,但又担 ...
Windows 2008 R2中的NAP新功能详解
随着Windows Server 2008 R2版本的发布,Windows网络访问保护模式(NAP)又增加了新功能.在本文中,笔者将对新功能进行简要的介绍. Windows Server 2008中提 ...
iOS15.4 来袭：新增“男妈妈”表情及口罩面容解锁、AirTags 反跟踪等新功能
整理 | 章雨铭责编 | 屠敏出品 | CSDN(ID:CSDNnews) 今日,苹果发布了iOS/iPadOS 15.4正式版.该版本带来了一些重大新功能的更新,包括在戴口罩时使用Face ID ...
苹果新功能惹网友众怒，还有隐私可言吗？
编译 | 禾木木出品 | AI科技大本营(ID:rgznai100) 大部分人选择 iPhone 的一大理由就是信息安全,这家公司对于个人隐私的保护一直为人称赞. 最近苹果公司宣布,为了让儿童能够更 ...
@程序员：Python 3.8正式发布，重要新功能都在这里
整理 | Jane.夕颜出品 | AI科技大本营(ID:rgznai100) [导读]最新版本的Python发布了!今年夏天,Python 3.8发布beta版本,但在2019年10月14日,第一个 ...
PyCharm 2019.3发布，增加了哪些新功能呢？
来源 | PyCharm官网整理 | 猪哥校正 | 豌豆花下猫 Python的IDE(Integrated Development Environment 集成开发环境)非常多,如:VS Code ...
MaxCompute2.0新功能介绍
摘要:在过去的两年内,MaxCompute进行了翻天覆地的重构,从1.0版本全面升级到了2.0版本.而大家或许对于MaxCompute 2.0的一些新特性并不了解,在本文中,MaxCompute技术专 ...
qq无限时间撤回消息bug_手机QQ新功能汇总，比微信有意思多了
手机 QQ 的更新相比微信来说更加频繁,虽然多是在小细节上面,但可玩性和实用性都比微信高很多.近期,QQ又为用户准备了不少好玩的更新,一起来看看. 青少年模式上线打开安卓版新版手机 QQ 的[设置] ...

ES2022 有什么新功能？一起来瞧瞧

ES2022 的新功能

1、.at()索引值对应值的方法。

2、 RegExp 匹配索引

3、Object.hasOwn(obj, propKey)

4、error.cause

5、顶层 await

6、class新成员

ES2022 有什么新功能？一起来瞧瞧相关推荐

最新文章

热门文章

ES2022 有什么新功能？一起来瞧瞧

ES2022 的新功能

1、.at()索引值对应值的方法。

2、 RegExp 匹配索引

3、Object.hasOwn(obj, propKey)

4、error.cause

5、 顶层 await

6、class新成员

ES2022 有什么新功能？一起来瞧瞧相关推荐

最新文章

热门文章

5、顶层 await