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

• ES6、ES7、ES8、ES9、ES10、ES11、ES12、ES13新特性大全

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;

}

2、私有方法&字段

---

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

class Person {

name;

#age;

get #age(){

return #age;

}

$initValue(){

this.name = ‘’;

this.#age = 12;

}

}

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’

4、ECMScript 类静态初始化块

---

类静态块提议提供了一种优雅的方式，在类声明/定义期间评估静态初始化代码块，可以访问类的私有字段

class Person {

static name;

age;

}

try {

Person.name = getNameA();

} catch {

Person.name = getNameB();

}

5、检测私有字段

---

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

class Person {

name;

#age;

get #age(){

return #age;

}

$initValue(){

this.name = ‘’;

this.#age = 12;

}

static hasAge(person){

return #gae in person;

}

}

6、正则匹配索引

---

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

const reg = /test(\d)/g;

const reg2022 = /test(\d)/dg;

const srt = ‘test1test2’;

const arr = […str.matchAll(reg)];

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

t2’;

const arr = […str.matchAll(reg)];

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

[外链图片转存中…(img-eq7Gzyiz-1718098699287)]