原文：ES2022新规发布，8个实用新功能

1. .at()

数组负检索

const array = [0，1，2，3，4，5，6] array.at[0] //0
array[0]    //0array.at(-1) //6
array.at(-2) //5解构数组位置const {2:two} = array // two = 2

2.hasOwn（）

hasOwnProperty() 只会检查对象的自有属性，对象原形上的属性其不会检测；但是对于原型对象本身来说，这些原型上的属性又是原型对象的自有属性，所以原形对象也可以使用。


let hasOwnProperty = Object.prototype.hasOwnProperty
if (hasOwnProperty.call(object, "foo")) {console.log("has property foo")
}if (Object.hasOwn(object, "foo")) {console.log("has property foo")
}

3.Error Cause

它可以使新错误并保留获取的错误的引用，我们只需将对象 {cause: err} 传递给 Errorconstructor。

async function fetcUserPreferences() {try { const users = await fetch('//user/preferences').catch(err => {throw new Error('Failed to fetch user preferences, {cause: err});})}
}
fetcUserPreferences();

4、正则表达式匹配索引

作为这些规范的一部分，添加了一个特殊的标志 d。通过使用它，正则表达式 API 将返回一个二维数组作为名索引的键。它包含每个匹配项的开始和结束索引。如果在正则表达式中捕获了任何命名组，它将在 indices.groups 对象中返回它们的开始/结束索引，命名的组名将是它的键。

5.Top-level await

它可能会改变模块的执行顺序，如果一个模块依赖于另一个具有Top-level await 调用的模块，则该模块的执行将暂停，直到 promise 完成。

// users.js
export const users = await fetch('/users/lists');// usage.js
import { users } from "./users.js";
// ✅ the module will wait for users to be fullfilled prior to executing any code
console.log(users);

6、Class Fields

方便创建私有字段，只需要将 # 字符添加到我们的变量声明中。

class Foo {#iteration = 0;increment() {this.#iteration++;}logIteration() {console.log(this.#iteration);}
}const x = new Foo();// ❌ Uncaught SyntaxError: Private field '#iteration' must be declared in an enclosing class
x.#iteration// ✅ works
x.increment();// ✅ works
x.logIteration();

拥有私有字段意味着我们拥有强大的封装边界，无法从外部访问类变量。

class Foo {#iteration = 0;#auditIncrement() {console.log('auditing');}increment() {this.#iteration++;this.#auditIncrement();}
}const x = new Foo();// ❌ Uncaught SyntaxError: Private field '#auditIncrement' must be declared in an enclosing class
x.#auditIncrement// ✅ works
x.increment();

7、Class Static Block

现在能够在任何类中包含静态块，它们只运行一次，并且可以装饰或执行类静态端的某些字段初始化

// ✅ will output 'one two three'
class A {static {console.log('one');}static {console.log('two');}static {console.log('three');}
}

let getPrivateField;class A {#privateField;constructor(x) {this.#privateField = x;}static {// ✅ it can access any private fieldgetPrivateField = (a) => a.#privateField;}
}const a = new A('foo');
// ✅ Works, foo is printed
console.log(getPrivateField(a));

8、Private Fields

方便在某些静态方法中检查字段是否为私有。

class Foo {#brand;static isFoo(obj) {return #brand in obj;}
}const x = new Foo();// ✅ works, it returns true
Foo.isFoo(x);// ✅ works, it returns false
Foo.isFoo({})// ❌ Uncaught SyntaxError: Private field '#brand' must be declared in an enclosing class
#brand in x

【无标题】ES2022 个人笔记相关推荐

【无标题】学习笔记-2022.8.1-8.6
文献阅读笔记5 一.文章信息 1. 作者 Berta Bescos, Jose M. F ´ acil, Javier Civera and Jos ´ e Neira 2.单位 University ...
【无标题】169-179笔记1月18日李游精品前端课程
169.操作元素的基本流程一．JS操作元素的基本方法 *因为JS放在文档的最上面,所以要使用window.onload,在页面加载完成后运行JS的代码. 二．操作body标签示例 <scrip ...
【无标题】180-187笔记1月19日李游精品前端课程笔记
180.使用JS获取节点名称<script type="text/javascript">onload=function(){var divNode=document. ...
关于WM_NCHITTEST消息（移动无标题对话框多个）
我为了移动一个无标题栏的窗体,使用了WM_NCHITTEST消息,这个消息大概如下: 通常,我们拖动对话框窗口的标题栏来移动窗口,但有时候,我们想通过鼠标在客户区上拖动来移动窗口. 一个容易想到的方案 ...
mysql输入命令1002无标题_Linux下远程连接MySQL数据库的方法
步骤 1.在服务器端开启远程访问首先进入mysql数据库,然后输入下面两个命令: grant all privileges on *.* to 'root'@'%' identified by 'p ...
C# 系统应用之无标题窗体移动的两种方法
在做项目界面设计中,常常为了美观需要设置窗体属性"FormBorderStyle"(窗体边框和标题栏外观)为None无标题窗口.此时隐藏标题的窗口怎样实现移动呢?我根据自己的项目从 ...
Android 置Activity全屏和无标题
今天,实在没有什么好些写的内容,所以在网上找了很久,才决定写这个博客.比较简单,还是想保持写博客的习惯. 一.在代码里设置全屏. Activity设置全屏和无标题栏,要用到andorid.view.W ...
ActionBarActivity设置全屏无标题
新建的Activity继承自ActionBarActivity,设置全屏无标题本来非常easy的事,可是没想到app居然无缘无故的挂,要么就是白屏一片,要么就是黑屏.坑了我一个多小时.!! 原因是Ac ...
android教程1009无标题,Android ActionBarActivity设置全屏无标题实现方法总结_Android_脚本之家...
Android ActionBarActivity设置全屏无标题实现方法总结前言: 新建的Activity继承自ActionBarActivity,设置全屏无标题本来很简单的事,但是没想到app竟 ...
MFC修改窗口无标题和标题信息，修改执执行文件图标
一.创建MFC后窗口显示的是无标题-工程名修改方法在网上看到了几种,下面介绍下比较简单的一种: 1.在MianFrame.c文件中找到这个函数 BOOL CMainFrame::PreCreat ...

【无标题】ES2022 个人笔记