这 8 个 JS 新功能，你应该去尝试一下

2022 年 1 月 17 日
本文字数：2655 字
阅读完需：约 9 分钟

摘要：本文主要介绍几个已经进入 stage4 的提案，这几个提案有望在 2022 年逐步纳入标准。

本文分享自华为云社区《2022 年你应该尝试的 8个 JavaScript 新功能》，作者：前端 picker。

1995 年 12 月 4 日，Netscape 公司与 Sun 公司联合发布 JavaScript 以来，JavaScript 从推出就开始了飞速的发展，2015 年 6，ES6 正式发布，此后 JavaScript 正式进入新阶段，成为企业级大规模开发语言，并仍以高速度不断发展。

下面的表格对应这版本变化：

本文主要介绍几个已经进入 stage4 的提案，这几个提案有望在 2022 年逐步纳入标准。（请注意：纳入标准并不等同于浏览器支持）

PS：科普-Javascript 的新语法，从提出到纳入标准一共经历下面几个 stage

stage-0：新语法还是一个设想，（只能由 TC39 成员或 TC39 贡献者提出）

stage-1:：提案阶段，比较正式的提议，只能由 TC39 成员发起，这个提案要解决的问题必须有正式的书面描述。

stage-2：草案，有了初始规范，必须对功能语法和语义进行正式描述，包括一些实验性的实现。

stage-3：候选，该提议基本已经实现，需要等待实验验证，用户反馈及验收测试通过。

stage-4：已完成，必须通过 Test262 验收测试，下一步就纳入 ECMA 标准。

.at()

TC39 建议在所有基本可索引类，例如：数组、字符串、类数组（arguments）中添加.at（）方法。

例如

lat arr=[1,2,3,4,5]

复制代码

之前我们想获取数组中的第二位

arr[1] //2

复制代码

最后一位的话，可能就是

arr[4] // 5

复制代码

但是如果 arr 长度是动态的呢？我们要如何让取出最后一位? 通常的写法是：

arr[arr.length-1]

复制代码

但是有了.at()方法就很简单了，.at()支持正索引和负索引。

例如

arr.at(-1)  //5arr.at(-2)  //4

复制代码

具体提案：https://github.com/tc39/proposal-relative-indexing-method

Object.hasOwn(object, property)

Object.hasOwn(object, property)主要是用来替代 Object.prototype.hasOwnProperty()。

目前我们想要判断对象是否具有指定的对象，主要写法如下：


if (Object.prototype.hasOwnProperty.call(object, "fn")) {  console.log('有')}

复制代码

而 Object.hasOwn 的写法：

if (Object.hasOwn(object, "fn")) {  console.log("有")}

复制代码

具体提案：https://github.com/tc39/proposal-accessible-object-hasownproperty

目前来看，V8 引擎的 9.3 版本已经开始支持，所以说 chrome 应该会很快支持。

类的私有方法和 getter/setter

类是所有支持面向对象语言的基本，而 Javascript 虽然支持使用 class 定义类，但是并没有提供定义私有属性/方法的的方案。本提案提出使用**#**来定义私有属性/方法

class Person{    name = '小芳';    #age = 16;    consoleAge(){       console.log(this.#age)    }}const person = new Person();console.log(person.name); //小芳console.log(button.#value); //报错button.#value = false;//报错

复制代码

具体提案：https://github.com/tc39/proposal-private-methods

检查私有属性和方法

因为新的标准会支持私有属性和方法，当我们访问不存在的私有属性/方法会报错，而在新标准中也考虑了这个情况，提供了 in 来检查私有属性和方法是否存在

class C {  #brand;
  #method() {}
  get #getter() {}
  static isC(obj) {    return #brand in obj && #method in obj && #getter in obj;  }}

复制代码

具体提案：https://github.com/tc39/proposal-private-fields-in-in

Top-level await（顶层 await）

目前，我们使用 await 必须是在申明 async 的函数中，本提案，主要是支持在没有 async 的情况下使用 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');}

复制代码

具体提案：https://github.com/tc39/proposal-top-level-await

正则匹配索引

该提案提供了一个新的/d，用来获取每个匹配的开始位置和结束位置信息。

const str = 'The question is TO BE, or not to be, that is to be.';const regex = /to be/gd;
const matches = [...str.matchAll(regex)];matches[0];

复制代码

具体提案：https://github.com/tc39/proposal-regexp-match-indices

new Error()抛出异常的具体原因

new Error(),可能大家第一反应是，这不是已经存在的语法嘛，是的，没错！只是新的提案：将错误与原因相关联，，向具有属性的 Error() 构造函数添加一个附加选项参数 cause，其值将作为属性分配给错误实例。

async function doJob() {  const rawResource = await fetch('//domain/resource-a')    .catch(err => {      throw new Error('Download raw resource failed', { cause: err });    });  const jobResult = doComputationalHeavyJob(rawResource);  await fetch('//domain/upload', { method: 'POST', body: jobResult })    .catch(err => {      throw new Error('Upload job result failed', { cause: err });    });}
try {  await doJob();} catch (e) {  console.log(e);  console.log('Caused by', e.cause);}// Error: Upload job result failed// Caused by TypeError: Failed to fetch

复制代码

具体提案：https://github.com/tc39/proposal-error-cause

类 static 初始化块

本田针对静态字段和静态私有字段的提供了一种在 ClassDefinitionEvaluation 期间执行类静态端的每个字段初始化的机制-static blocks.例如官方提供的例子：

在没有 static blocks 之前，我们想给静态变量初始化（非直接赋值，可能是表达式赋值）的话，可能是放在外部实现：

// without static blocks:class C {  static x = ...;  static y;  static z;}
try {  const obj = doSomethingWith(C.x);  C.y = obj.y  C.z = obj.z;}catch {  C.y = ...;  C.z = ...;}

复制代码

有了 static block 的情况下：我们可以直接在 static blocks 中初始化变量：

class C {  static x = ...;  static y;  static z;  static {    try {      const obj = doSomethingWith(this.x);      this.y = obj.y;      this.z = obj.z;    }    catch {      this.y = ...;      this.z = ...;    }  }}

复制代码

点击关注，第一时间了解华为云新鲜技术~

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/81c4bcd1ce1abd21224766c99】。文章转载请联系作者。

华为云开发者社区

关注

提供全面深入的云计算技术干货 2020.07.14 加入

华为云开发者社区，提供全面深入的云计算前景分析、丰富的技术干货、程序样例，分享华为云前沿资讯动态，方便开发者快速成长与发展，欢迎提问、互动，多方位了解云计算！传送门：https://bbs.huaweicloud.com/

发布

暂无评论

创作场景

这 8 个 JS 新功能，你应该去尝试一下

.at()

Object.hasOwn(object, property)

类的私有方法和 getter/setter

检查私有属性和方法

Top-level await（顶层 await）

动态引入依赖

资源初始化

加载依赖

正则匹配索引

new Error()抛出异常的具体原因

类 static 初始化块

华为云开发者社区

评论