快来看看ECMAScript 2022(ES13)有哪些新标准？

举报
江咏之 发表于 2021/11/24 00:57:51 2021/11/24
【摘要】 快速通道： ES6、ES7、ES8、ES9、ES10、ES11、ES12、ES13新特性大全 ES2021已经发布一段时间了 ECMAScript2021 (ES12)的新特性，快来复习下！，ES...

快速通道：

ES2021已经发布一段时间了 ECMAScript2021 (ES12)的新特性，快来复习下！，ES2021的新特性你用起来了没？下面我们来看看ES2022 会带来那些有意思的新特性。

本文中将介绍并解释在规范的最新草案中已被接受的提案的特性。

每个特性提案都遵循一个过程，在这个过程中，它经历了不同的阶段，直到 stage 4，这表明新增功能已准备好包含在正式的 ECMAScript 标准中，并将包含在最快的实用标准修订版中。以下功能已经完成，处于 stage 4并已添加到 ECMAScript 最新草案中。

新特性总结：

  • 声明类的字段：类字段可以在类的顶层被定义和初始化
  • 私有方法&字段：用#前缀来定义类的私有方法和字段
  • 类的静态公共方法和字段：增加了静态公共字段、静态私有方法和静态私有字段的特性
  • ECMScript 类静态初始化块：在类声明/定义期间评估静态初始化代码块，可以访问类的私有字段
  • 检测私有字段：可以使用in操作符，如果指定的属性/字段在指定的对象/类中，则返回真，并且也能判断私有字段
  • 正则匹配索引：该提案提供了一个新的/dflag，以获得关于输入字符串中每个匹配的开始和索引位置结束的额外信息
  • 在所有内置的可索引数据上新增.at()方法
  • Object.hasOwn(object, property)：使用 Object.hasOwn 替代 Object.prototype.hasOwnProperty.call
  • Error Cause：为了便捷的传递导致错误的原因

1、声明类的字段

到目前为止，在ES规范中，类的字段定义和初始化是在类的构造函数中完成的。但是在新的提案中，类字段可以在类的顶层被定义和初始化 
class Point {
   name;
   title;
   size = 1;
}

    
   
    
    
  • 1
    • 
    
  • 2
    • 
    
  • 3
    • 
    
  • 4
    • 
    
  • 5
    •

2、私有方法&字段

用 #前缀来定义类的私有方法和字段。 
class Person {
   name;
   #age;
   get #age(){
       return #age;
   }
  $initValue(){
      this.name = '';
      this.#age = 12;
  }
 }

    
   
    
    
  • 1
    • 
    
  • 2
    • 
    
  • 3
    • 
    
  • 4
    • 
    
  • 5
    • 
    
  • 6
    • 
    
  • 7
    • 
    
  • 8
    • 
    
  • 9
    • 
    
  • 10
    • 
    
  • 11
    •

3、类的静态公共方法和字段

在之前的 类的字段和 私有方法提案的基础上，为JavaScript类增加了 静态公共字段、 静态私有方法和 静态私有字段的特性。 
class Enum {
  static collectStaticFields() {
    // Static methods are not enumerable and thus ignored
    this.enumKeys = Object.keys(this);
  }
}
class ColorEnum extends Enum {
  static red = Symbol('red');
  static green = Symbol('green');
  static blue = Symbol('blue');
  static _ = this.collectStaticFields(); // (A)

  static logColors() {
    for (const enumKey of this.enumKeys) { // (B)
      console.log(enumKey);
    }
  }
}
ColorEnum.logColors();
// Output:
// 'red'
// 'green'
// 'blue'

    
   
    
    
  • 1
    • 
    
  • 2
    • 
    
  • 3
    • 
    
  • 4
    • 
    
  • 5
    • 
    
  • 6
    • 
    
  • 7
    • 
    
  • 8
    • 
    
  • 9
    • 
    
  • 10
    • 
    
  • 11
    • 
    
  • 12
    • 
    
  • 13
    • 
    
  • 14
    • 
    
  • 15
    • 
    
  • 16
    • 
    
  • 17
    • 
    
  • 18
    • 
    
  • 19
    • 
    
  • 20
    • 
    
  • 21
    • 
    
  • 22
    • 
    
  • 23
    •

4、ECMScript 类静态初始化块

类静态块提议提供了一种优雅的方式，在类声明/定义期间评估静态初始化代码块，可以访问类的私有字段 
class Person {
   static name;
   age;
}
try {
   Person.name = getNameA();
} catch {
   Person.name = getNameB();
}

    
   
    
    
  • 1
    • 
    
  • 2
    • 
    
  • 3
    • 
    
  • 4
    • 
    
  • 5
    • 
    
  • 6
    • 
    
  • 7
    • 
    
  • 8
    • 
    
  • 9
    •

5、检测私有字段

当我们试图访问一个没有被声明的公共字段时，会得到未定义的结果，同时访问私有字段会抛出一个异常。我们根据这两个行为来判断是否含有公共字段和私有字段。但是这个建议引入了一个更有趣的解决方案，它包括使用in操作符，如果指定的属性/字段在指定的对象/类中，则返回真，并且也能判断私有字段 
class Person {
   name;
   #age;
   get #age(){
       return #age;
    }
    $initValue(){
       this.name = '';
       this.#age = 12;
    }
    static hasAge(person){
      return #gae in person;
    }
 }

    
   
    
    
  • 1
    • 
    
  • 2
    • 
    
  • 3
    • 
    
  • 4
    • 
    
  • 5
    • 
    
  • 6
    • 
    
  • 7
    • 
    
  • 8
    • 
    
  • 9
    • 
    
  • 10
    • 
    
  • 11
    • 
    
  • 12
    • 
    
  • 13
    • 
    
  • 14
    •

6、正则匹配索引

该提案提供了一个新的 /dflag，以获得关于输入字符串中每个匹配的开始和索引位置结束的额外信息。 
const reg = /test(\d)/g;
const reg2022 = /test(\d)/dg;
const srt = 'test1test2';
const arr = [...str.matchAll(reg)];
const arr2022 = [...str.matchAll(reg2022)];
arr[0] //
arr2022[0] // 

    
   
    
    
  • 1
    • 
    
  • 2
    • 
    
  • 3
    • 
    
  • 4
    • 
    
  • 5
    • 
    
  • 6
    • 
    
  • 7
    •

7、在所有内置的可索引数据上新增.at()方法

新增一个新的数组方法，通过给定的索引来获取一个元素。当给定的索引为正数时，这个新方法的行为与使用括号符号的访问相同，但是当我们给定一个负整数的索引时，它就像python的 "负数索引 "一样工作，这意味着at()方法以负整数为索引，从数组的最后一项往后数。所以该方法可以被执行为array.at(-1)，它的行为与array[array.length-1]相同，在下面的例子中可以看到。 
const list = [1,2,3,4,5,6];
console.log(list.at(-1)); // 6
console.log(list.at(-2)); // 5

    
   
    
    
  • 1
    • 
    
  • 2
    • 
    
  • 3
    •

8、Object.hasOwn(object, property)

简单讲就是使用 Object.hasOwn 替代 Object.prototype.hasOwnProperty.call 
const person = {name: 'lxm'}
console.log(Object.prototype.hasOwnProperty.call(person, 'name')) // true

console.log(Object.hasOwn(person, 'name')) // true

    
   
    
    
  • 1
    • 
    
  • 2
    • 
    
  • 3
    • 
    
  • 4
    •

9、Error Cause

proposal-error-cause这一提案，目的主要是为了便捷的传递导致错误的原因，如果不使用这个模块，想要清晰的跨越多个调用栈传递错误上下文信息，通常要这么做：

async function doJob() {
  const rawResource = await fetch('//domain/resource-a')
    .catch(err => {
      // How to wrap the error properly?
      // 1. throw new Error('Download raw resource failed: ' + err.message);
      // 2. const wrapErr = new Error('Download raw resource failed');
      //    wrapErr.cause = err;
      //    throw wrapErr;
      // 3. class CustomError extends Error {
      //      constructor(msg, cause) {
      //        super(msg);
      //        this.cause = cause;
      //      }
      //    }
      //    throw new CustomError('Download raw resource failed', err);
    })
  const jobResult = doComputationalHeavyJob(rawResource);
  await fetch('//domain/upload', { method: 'POST', body: jobResult });
}

    
   
    
    
  • 1
    • 
    
  • 2
    • 
    
  • 3
    • 
    
  • 4
    • 
    
  • 5
    • 
    
  • 6
    • 
    
  • 7
    • 
    
  • 8
    • 
    
  • 9
    • 
    
  • 10
    • 
    
  • 11
    • 
    
  • 12
    • 
    
  • 13
    • 
    
  • 14
    • 
    
  • 15
    • 
    
  • 16
    • 
    
  • 17
    • 
    
  • 18
    • 
    
  • 19
    •

await doJob(); // => TypeError: Failed to fetch

而按照这一提案的语法：

sync 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


   
  
    
   
  • 1
    • 
   
  • 2
    • 
   
  • 3
    • 
   
  • 4
    • 
   
  • 5
    • 
   
  • 6
    • 
   
  • 7
    • 
   
  • 8
    • 
   
  • 9
    • 
   
  • 10
    • 
   
  • 11
    • 
   
  • 12
    • 
   
  • 13
    • 
   
  • 14
    • 
   
  • 15
    • 
   
  • 16
    • 
   
  • 17
    • 
   
  • 18
    • 
   
  • 19
    •

简单了很多，这个语法还是很实用的！



文章来源: jiangwenxin.blog.csdn.net，作者：前端江太公，版权归原作者所有，如需转载，请联系作者。

原文链接：jiangwenxin.blog.csdn.net/article/details/121234254

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
ECMAScript Elasticsearch
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入