ES2022(ES13)简介

专栏目录请点击

类

类的字段声明

• 可以在顶层进行类的字段的定义和初始化
• 在以前的规范中，类的字段的初始化一般是在构造函数中的

class MyClass {
    name;
    age = 1;
}

var myclass = new MyClass()
console.log(myclass); // {name:undefined,age:1}

私有属性和方法

我们在方法或者属性前面加上#，他就属于私有属性或者方法了

私有属性

// 类的私有方法和私有属性

class Person{
    name="SunWuKong";
    #age = 18; // 当前变量智能在类的内部进行访问
    sayAge(){
        console.log(this.#age);
    }
}

var person = new Person()
person.sayAge() // 18
console.log(person.#age);

当我们在编辑器中使用的时候，他就已经报错了

私有方法

当我们在编辑器中写私有属性或者私有方法的时候，如果这个私有属性或者私有方法没有倍使用，那么他并不是处于高亮状态

// 类的私有方法和私有属性
class Person {
    name = "SunWuKong";
    #age = 18; // 当前变量智能在类的内部进行访问
    sayAge() {
        this.#sayAge()
    }
    #sayAge(){
        console.log(this.#age);
    }
}

var person = new Person()
person.sayAge() // 18

类的静态公共方法和字段

• 定义类的静态属性和方法，主要使用属性static关键字
• 不能在类的实例上使用静态方法，应该通过类本身进行调用，通常用于创建使用程序的函数，使用类名进行访问，也可以通过构造函数的形式来访问this.constructor.STATIC_METHOD_NAME()

class Dog {
    static name = "旺财"
    static sayName(){
        console.log(`我是小狗${this.name}`);
    }
}

console.log(Dog.sayName()); // 我是小狗旺财

var dog = new Dog()
console.log(dog.sayName()); // 报错 dog.sayName is not a function

静态块

// 静态块
class Translator {
    static translations = {
        yes: 'ja',
        no: 'nein',
        maybe: 'vielleicht',
    };
    static englishWords = extractEnglish(this.translations);
    static germanWords = extractGerman(this.translations);
}

function extractEnglish(translations) {
    return Object.keys(translations);
}

function extractGerman(translations) {
    return Object.values(translations);
}

console.log(Translator.englishWords); // ['yes', 'no', 'maybe']
console.log(Translator.germanWords); // ['ja', 'nein', 'vielleicht']

• 当我们读取Translator的静态属性的时候，他顺便调用了一个外部的函数，着似乎跟不爽(读取类的属性还要调用外部的函数)
• 当我们有了类的静态块的时候可以这样处理

class Translator {
    static translations = {
        yes: 'ja',
        no: 'nein',
        maybe: 'vielleicht',
    };
    // 定义属性
    static englishWords = []
    static germanWords = []
    // 静态块(初始化的时候，能读到内部的属性值,做一些逻辑操作)
    static {
        for (const [englist, german] of Object.entries(this.translations)) {
            this.englishWords.push(englist)
            this.germanWords.push(german)
        }
    }
}

console.log(Translator.englishWords); // ['yes', 'no', 'maybe']
console.log(Translator.germanWords); // ['ja', 'nein', 'vielleicht']

正则表达式

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

第一个打印

第二个打印

• 这里正则表达式增加了索引匹配，添加了一个特殊的标志d
• 他会返回一个二维数组作为名索引的键，包含每个匹配项的开始和结束索引
• 如果正则表达式中捕获了任何命名组，他将在indeces.groups对象中返回他们的开始索引与结束索引

对象

• 新增了hasOwn方法 点击

数组与字符串

• 新增at方法 点击 点击