简介

ES12 是 ECMA 协会在 2021 年 6 月发行的一个版本，因为是 ECMAScript 的第十二个版本，所以也称为 ES12.

ES12 发行到当初曾经有一个月了，那么 ES12 有些什么新个性和不一样的中央呢？一起来看看吧。

基本上 ES12 引入了 replaceAll 办法用于对 String 进行操作，Promise.any 用于对 Promise 进行组合操作，AggregateError 用于示意多个谬误的汇合，新的逻辑操作符??=, &&=, ||=，弱援用 WeakRef，FinalizationRegistry 用于垃圾回收的注册，一个数字的分隔符 1_000，更加精准的数组 sort 办法 Array.prototype.sort。

上面本文将会一一进行解说。

replaceAll

相熟 java 的敌人应该都晓得，java 中有两个进行字符串替换的办法，别离是 replace 和 replaceAll，他们的区别在于 replace 是替换字符串，而 replaceAll 是进行正则表达式匹配。

然而在 javascript 中两者的涵义有所不同，在 JS 中 replace 是替换第一个呈现的字符串，而 replaceAll 就是字面上的意思替换所有的字符串，咱们举个例子：

const string="flydean is a good fly"
console.log(string.replace("fly", "butterfly"));

下面的值返回：

butterflydean is a good fly

如果改用 replaceAll:

const string="flydean is a good fly"
console.log(string.replaceAll("fly", "butterfly"));
butterflydean is a good butterfly

公有办法

自从 JS 有了类的概念之后，就能够在类中定义方法，并通过实例化之后的类进行调用，如下所示：

class Student {getAge() {console.log("永远 18 岁")
  }
}

student= new Student();
student.getAge();

下面代码运行后果：

"永远 18 岁"

然而如果咱们不心愿 getAge() 办法间接裸露给内部应用，也就是说心愿 getAge() 是一个公有办法，那么只须要在办法后面加上 #即可。

class Student {#getAge() {console.log("永远 18 岁")
  }
}

student= new Student();
student.getAge();

同样运行，那么会失去上面的谬误提醒：

Error: student.getAge is not a function

怎么解决呢？咱们晓得公有办法是能够在办法外部调用的，那么只须要创立一个私有办法，而后在这个私有办法中调用公有办法即可，如下所示：

class Student {#getAge() {console.log("永远 18 岁")
  }
  
  getPublicAge(){this.#getAge();
  }
 
}

student= new Student();
student.getPublicAge();

咱们能够失去同样的后果。

公有属性

下面讲到了公有办法，那么对于公有属性是怎解决的呢？

通常，对于属性，咱们能够以 get 修饰符来进行润饰，而后就能够间接通过属性名来拜访了：

class Student {get Age() {return 18;}
 
}

student= new Student();
console.log(student.Age);

后果咱们会失去 18 这个输入。

同样，能够在属性名后面加上 #，让其变成公有变量，如下所示：

class Student {get #Age() {return 18;}
 
}

student= new Student();
console.log(student.Age);

下面代码将会输入 undefined。

要想拜访上述的公有属性，则能够用私有属性去调用公有属性办法：

class Student {get #Age() {return 18;}
   get publicAge() {return this.#Age}
}

student= new Student();
console.log(student.publicAge);

十分好用。

Promise.any() 和 AggregateError

promise.any 能够返回任意一个提前 resolve 的后果，在事实的利用中，这种状况是十分常见的，咱们来模仿一个例子：

const prom1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("promise one"),
    Math.floor(Math.random() * 100)
  );
});
const prom2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("promise two"),
    Math.floor(Math.random() * 100)
  );
});
const prom3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("promise three"),
    Math.floor(Math.random() * 100)
  );
});

(async function() {const result = await Promise.any([prom1, prom2, prom3]);
  console.log(result); 
})();

上述代码能够随机输入 promise one，promise two，promise three。

如果将上述代码改成所有的都 reject，那么会抛出 AggregateError：

const prom1 = new Promise((resolve, reject) => {
  setTimeout(() => reject("promise one rejected"),
    Math.floor(Math.random() * 100)
  );
});
const prom2 = new Promise((resolve, reject) => {
  setTimeout(() => reject("promise two rejected"),
    Math.floor(Math.random() * 100)
  );
});
const prom3 = new Promise((resolve, reject) => {
  setTimeout(() => reject("promise three rejected"),
    Math.floor(Math.random() * 100)
  );
});

try{(async function() {const result = await Promise.any([prom1, prom2, prom3]);
  console.log(result); 
})();} catch(error) {console.log(error.errors);
}

报的错如下：

Uncaught (in promise) AggregateError: No Promise in Promise.any was resolved

留神，必须是所有的 promise 都被 reject 之后才会抛出 AggregateError，如果有局部胜利，那么将会返回胜利的后果。

数字分隔符

这个新个性是为了不便程序员看代码而呈现的，如果数字比拟大，那么看起来就不是那么高深莫测，比方上面的长数字：

const number= 123456789；

一眼看不出这个数字的体量到底是多大，所以 ES12 提供了数字分隔符_。

分隔符不仅能够宰割十进制，也能够宰割二净值或者十六净值的数据，十分好用。

const number = 1_000_000_000_000;
const binary = 0b1010_0101_1111_1101;
const hex = 0xAF_BF_C3;

下面例子别离代表了十进制，二进制和十六进制的数据，十分直观好用。

新的逻辑操作符

咱们晓得 && 和 || 是被来进行逻辑操作的运算符。

比方：

1 && 2 
1 || 2 

等操作，ES12 提供了 && 和 || 的二元操作符，如下：

var x = 1;
var y = 2;
x &&= y;
x ||= y;

另外还提供了?? 的二元操作符，如：

var x;
var y = 2;
x ??= y;

下面代码的意思是，判断 x 是不是空，如果是空那么将 y 的值赋给 x。

总结

ES12 的几个新个性还是挺实用的，大家能够尝试一下。

本文已收录于 http://www.flydean.com/ecmascript-12/

最艰深的解读，最粗浅的干货，最简洁的教程，泛滥你不晓得的小技巧等你来发现！

欢送关注我的公众号:「程序那些事」, 懂技术，更懂你！