JavaScript-ES13新特性使用教程

刺骨的言语ヽ痛彻心扉 2023-10-02 20:21 11阅读 0赞

[JavaScript-ES11~ES12新特性使用教程][JavaScript-ES11_ES12]

### ES13 ###

#### 声明类的字段 ####

> 到目前为止，在ES规范中，类的字段定义和初始化是在类的构造函数中完成的。但是在ES13中，类字段可以在类的顶层被定义和初始化

class Point {
        
            name;
            title;
            size = 1;
        }

#### 私有方法&字段 ####

> 用\#前缀来定义类的私有方法和字段。

class Person {
        
       name;
       #age;
       get #age(){
        
           return #age;
       }
      $initValue(){
        
          this.name = '';
          this.#age = 12;
      }
     }

#### 类的静态公共方法和字段 ####

> 在之前的类的字段和私有方法提案的基础上，为JavaScript类增加了`静态公共字段`、`静态私有方法`和`静态私有字段`的特性。

class ColorEnum  {
        
            static #red = 'red'; //私有静态变量
            static #green = 'green';
            static #blue = 'blue';
           static #logColors() {
         //私有静态
               console.log(this.#red)
               console.log(this.#blue)
               console.log(this.#green)
            }
            static show() {
        //静态公共方法
              this.#logColors()
            }
        }
        ColorEnum.show();//调用静态

#### 类静态初始化块 ####

> 类静态块提议提供了一种优雅的方式，在类声明/定义期间评估静态初始化代码块，可以访问类的私有字段,简单来说就是在没创建实例前, 可以直接对静态属性进行初始化

class Person {
        
            static name;
            age;
        }
    Person.name = "aaaaaaa";

#### 检测私有字段 ####

> 当我们试图访问一个没有被声明的公共字段时，会得到未定义的结果，同时访问私有字段会抛出一个异常。我们根据这两个行为来判断是否含有公共字段和私有字段。但是这个建议引入了一个更有趣的解决方案，它包括使用in操作符，**如果指定的属性/字段在指定的对象/类中，则返回真，并且也能判断私有字段**

class Person {
        
            name;
            #age;
            static hasAge(person){
        
                return #age in person;
            }
        }
        let p=new Person()
         console.log(Person.hasAge(p))

#### 正则匹配索引 ####

> 该提案提供了一个新的/dflag，以获得关于输入字符串中每个匹配的开始和索引位置结束的额外信息。

const reg = /test(\d)/g;
        const reg2022 = /test(\d)/dg;
        const str = 'test1test2';
        const arr = [...str.matchAll(reg)];
        console.log(arr)
        const arr2022 = [...str.matchAll(reg2022)];
        console.log(arr2022)

![在这里插入图片描述][b65e1995ddeb46788f771390c8a708cf.png]

#### 在所有内置的可索引数据上新增.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

#### 使用 Object.hasOwn 替代Object.prototype.hasOwnProperty.call ####

> 简单讲就是使用 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

#### Error Cause：为了便捷的传递导致错误的原因 ####

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

async function doJob() {
        
      const rawResource = await fetch('//domain/resource-a')
        .catch(err => {
        
          // 以下三种 ,将错误堆栈向上传递
          // 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 });
    }
    
    await doJob(); // => TypeError: Failed to fetch

而按照这一提案的语法：

sync function doJob() {
        
      const rawResource = await fetch('//domain/resource-a')
        .catch(err => {
        
        //{ cause: 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);
    }

是不是方便了很多

![在这里插入图片描述][241d60d901ab468c8532f2a2d4413093.gif]

点赞 -收藏-关注-便于以后复习和收到最新内容有其他问题在评论区讨论-或者私信我-收到会在第一时间回复感谢,配合,希望我的努力对你有帮助^\_^ 免责声明：本文部分素材来源于网络，版权归原创者所有，如存在文章/图片/音视频等使用不当的情况，请随时私信联系我。

[JavaScript-ES11_ES12]: http://t.csdn.cn/Otx9P
[b65e1995ddeb46788f771390c8a708cf.png]: https://img-blog.csdnimg.cn/b65e1995ddeb46788f771390c8a708cf.png
[241d60d901ab468c8532f2a2d4413093.gif]: https://img-blog.csdnimg.cn/241d60d901ab468c8532f2a2d4413093.gif