ES 2022 即将新增这6个特性,最后一个绝了。

引言

新版本的 ECMA Script 将在今年六月成为标准。让我们来看看 ES2022 有什么新特性?

新功能

1. error.cause

这是一个关于错数组词误捕获的特性,下文代码列举了过去我们常使用索引失效的三种捕获错误的方java语言式。

async function doJob() {
  const rawResource = await fetch('/test')
    .catch(err => {
      // 下面三种是过去常用的一些捕获错误的代码方式
      // 1. throw new Error('下载资源失败: ' + err.message);
      // 2. const wrapErr = new Error('下载资源失败');
      //    wrapErr.cause = err;
      //    throw wrapErr;
      // 3. class CustomError extends Error {
      //      constructor(msg, cause) {
      //        super(msg);
      //        this.cause = cause;
      //      }
      //    }
      //    throw new CustomError('下载资源失败', err);
    })
}
await doJob(); // => Uncaught Error: 下载资源失败: Failed to fetch

过去的捕获错误的写法比较复杂,而且开发人员对具体使用哪个属性来获取错误的上下文没有达成共javaee识。

新特性是在 Error索引的作用造函数上添加一个附加选项参数 cause,其值将作为属性分配给错误实例。因此,可以将错误链接起来。

async function doJob() {
  const rawResource = await fetch('/test')
    .catch(err => {
      throw new Error('下载资源失败', { cause: err });
    });
}
try {
  await doJob();
} catch (e) {
  console.log(e);
  console.log('Caused by', e.cause);
}
// Error: 下载资源失败
// Caused by TypeError: Failed to fetch
2. Top-level await

我们现https和http的区别在可以在模块的顶层使用 await, 并且不变量数列中各组频率的总和再需要配合 async函数使索引失效的几种情况用。

Top-level await 可以在实际生产中有以下用途。

  • 动态加载模块
const strings = await import(`/i18n/${navigator.language}`);

索引失效允许模块使用运行时值来确定依赖关系。这对于开发/生产拆分、国际化、环境拆分等非常有用。

  • 资源初始化
const connection = await dbConnector();

允许模块表示资源。

  • 依赖回退
let jQuery;
try {
  jQuery = await import('https://cdn-a.com/jQuery');
} catch {
  jQuery = await import('https://cdn-b.com/jQuery');
}

依赖发生故障时,可以回退到旧版本,防止程序崩溃。

3. Object.hasOwn(obj, propKey)

Object.hasOwn() 方法是比 Object.prototype.索引失效的几种情况hasOwnProperty() 方法更加 便捷安全 的策略。

例如 Object.create(null) 创建一个不继承自 Object.prototype 的对象,使 hasOwnProperty 方法无法访问。

Object.create(null).hasOwnProperty("foo")
// Uncaught TypeError: Object.create(...).hasOwnProperty is not a function

Object.hasOwn(objava怎么读j, propKey) 使用案例。

let object = { foo: false }
Object.hasOwn(object, "foo") // true
let object2 = Object.create({ foo: true })
Object.hasOwn(object2, "foo") // false
let object3 = Object.create(null)
Object.hasOwn(object3, "foo") // false
4. RegExp match indices

正则表达式,继 /i /m /g 之后,在匹配模式上新加入了变量的英文 /d,使用 /d 之后,当我们再使用exec() 方法时,返回值会增加一个新的属性 indices

简单回顾下exec() 方法。

相比于常见的 search() test()https和http的区别言,exec() 匹配字符串的信息更丰富,它返回一个数组,其中存放匹配的结果,如果未找到匹配,则返回值为 null

let regx = /a+(?<Z>z)?/g;
let string = "xaaaz"
let result = regx.exec(string);
// ['aaaz', 'z', index: 1, input: 'xaaaz', groups: {Z:'z'}]

(?<name>)ES 2018 加入的正则语法,允许我们把部分正则内容进行 命名 并且 分组,上述例子中,/数组去重方法a+(?<Z>z)?/g表示匹配至少一个 a 以及 0 个或者 1 个 z ,其中包含索引的作用一个命名为 Z 的捕获组,配合 exec() 方法使用时,我们可以直接获取到捕获组的信息:result.groups,如果正则中没用使用捕获组的正则语法,则 groupsundefined

尽管 exec() 返回值提数组排序供了 index 属性 来展示首次匹配的索引位置,group索引失效s 属性 提供了捕获组的信息,但在一些更高级的场景中,这些信息可能并不足够。例如,语法高亮显示 的实现不仅java是什么意思需要匹配的索引,还需要单个捕获组的开始和结束索引,即上述例子中 Z 捕获组的索引信息。

新特性中,使用 /d匹配模式时,exec() 方法的返回值会增加一个新的属性 indices

const re = /a+(?<Z>z)?/d;
const s = "xaaaz";
console.log("匹配结果:", re.exec(s));
//['aaaz','z',index:1,input:'xaaaz',groups: {Z:'z'},indices:[[1,5],[4,5]]

indices属性包含了捕获组的信息,其变量是什么意思中,[ 1 , 5 ]java怎么读 aaahttp协议z 全部字符串的匹配信息,[ 4 , 5 ]Z 捕获组的匹配索引信息。

5. New membejava培训机构rs of clahttp 404sses

class 支持在 constructor 外部变量与函数直接声明变量,过去我们必须在内部声明。

class Cat {
  gender = 'female'
}
let cat = new Cat()
cat.gender // female
  • 私有变量和私有方法

封装是面向对象编程的核心原则之一。它通常使用可见性修饰符来实现,例如 prjava培训ivate orpublic

class 的最近改动里加入了 #httpclient,用来将类中的变量、方法或访问器标记为私有,从外部访问私有化的内容,会直接报错。

class Cat {
  #name = 'kitty'
  gender = 'female'
  setName = () => {
    this.#name = 'jack'
      console.log(this.#name)
  }
  #setGender = () => {
    this.gender= 'male'
  }
}
let cat = new Cat()
cat.#name // SyntaxError
cat.gender // 'female'
cat.setName() // 'jack'
cat.#setGender // SyntaxError
  • 私有字段的存在性检查

由于尝试访问对象上不存在的私有字段会报错从而引发程序异常,因此需要能够检查对象是否具有给定的私有字段。

class 引入了关键词 in 来解决访问私有变量直接报错的问题。

class Example {
  #field
  static isExampleInstance(object) {
    return #field in object;
  }
}
const ex = new Example()
Example.isExampleInstance(ex) // true
Example.isExampleInstance({}) // false

isExampleInstance 方法可以判断 object 是否包含https和http的区别 #field

6. at()

这个特性过去我们聊过了,# JS即将发布数组的4个新特性,学会了拿去吹牛

.at()支持我们读取给定索引处的元素。它可以接受负索引来从给定数据类型的末尾读取元素。

过去我们需要这样来获取数组末尾变量名的命名规则元素:

const arr = [1,2,3,4,5];
arr[arr.length-1] // 5

现在 at()http 500 可以轻松完成任务:

const arr = [1,2,3,4,5];
arr.at(-1) // 5

代码的语义会更直观更清爽,非常的方便!

支持类型:

  • St索引是什么意思ring
  • Array
  • Typed Array

如果变量数列中各组频率的总和对你有帮助的话,希望各位朋友点赞关注收藏,你的鼓励就是我们继续推广Javascrpit语言新特性的动力。

面试有兴趣的,可以阅读下面的文章~

往期精选:

面试前必读的心经,看懂可以质变

JS即将发布数组的4个新索引号特性,学会了拿去吹牛


编辑:王明

审查:李智杰

发表评论

提供最优质的资源集合

立即查看 了解详情