ES12新特性抢先体验

2024-03-26 09:39:34

如果没什么特殊情况，每一年 tc39 都会更新一些特性 API ，今年出的则是第 12 版，也就是我们说的 ES12 ，下面让我们一起来看看都更新了哪些 API。

数字分隔符（Numeric Separators）

众所周知，我们的 Number 是长这样的：123456 。但是当金额大了之后，就会很不直观，每次看还得算，不过如今我们可以这样：

// 旧的方案
const count1 = 123456789;

// 新的方案
const count2 = 123_456_789;

console.log(count2); // 123456789

const totalFee = 1000.12_34
//等价于
const totalFee = 1000.1234

String.prototype.replaceAll()

看到replaceAll这个词，相比很容易联想到replace。在JavaScript中，replace方法只能是替换字符串中匹配到的第一个实例字符，而不能进行全局多项匹配替换，唯一的办法是通过正则表达式进行相关规则匹配替换

而replaceAll则是返回一个全新的字符串，所有符合匹配规则的字符都将被替换掉，替换规则可以是字符串或者正则表达式。

新的 replaceAll() 可以直接替换全部匹配的字符，就像这样：

'好一朵美丽的茉莉花，茉莉花啊，茉莉花啊，你又香又好看'.replaceAll('茉莉花', '玫瑰花');
// 好一朵美丽的玫瑰花，玫瑰花啊，玫瑰花啊，你又香又好看

但是如果你在 replaceAll() 里用 g 以外的标识符，或者不加 g ，都会报错，例如：

'好一朵美丽的茉莉花，茉莉花啊，茉莉花啊，你又香又好看'.replaceAll(/茉莉花/, '玫瑰花');
// Uncaught TypeError: String.prototype.replaceAll called with a non-global RegExp argument

所以这个只是 g 的语法糖。。。

Promise.any

当Promise列表中的任意一个promise成功resolve则返回第一个resolve的结果状态
如果所有的promise均reject，则抛出异常表示所有请求失败

Promise
  .any([
    Promise.reject('rejected'),
    Promise.resolve('fulfilled')
 ])
 .then(res => console.log(res))
 .catch(err => console.error(err));
// fulfilled

Promise
  .any([
    Promise.reject('rejected1'),
    Promise.reject('rejected2')
 ])
 .then(res => console.log(res))
 .catch(err => console.error(err));
// AggregateError: All promises were rejected

Promise
  .any([
    Promise.resolve('resolve1'),
    Promise.resolve('resolve1')
 ])
 .then(res => console.log(res))
 .catch(err => console.error(err));
// resolve1

WeakRefs

当我们通过（const、let、var）创建一个变量时，垃圾收集器GC将永远不会从内存中删除该变量，只要它的引用仍然存在可访问。

WeakRef 是 Weak References（弱引用） 的简写，其主要用途是对另一个对象进行弱引用。这就意味着它不会阻止GC（garbage collector 垃圾收集器）收集对象。当我们不想将对象永远保存在内存中时，这就很有用了。但是使用的时候要慎重，因为有可能出现要使用时，被引用对象已经被回收的情况。就连 TC39 提案都建议能不用就不用。

const newRef = new WeakRef({
     name: '鱼头',
     age: '26',
     sex: '男'
});

const obj = newRef.deref();

console.log(obj); // {name: "鱼头", age: "26", sex: "男"}

逻辑赋值运算符（Logical Assignment Operators）

逻辑运算符和赋值表达式，新特性结合了逻辑运算符（&&，||，??）和赋值表达式。

这次也更新了一些运算符，以后写起短链表达式来就方便多了。

And and equals 运算符 (&&=)

&&= 仅在左操作数为 truthy 时才执行赋值。

let a = 1;
let b = 2;
a &&= b;
//等价于
a = a && (a = b)
console.log(a); // 2

// 等价于
if (a) {
    a = b;
}
console.log(a); // 2

Or or equals (||=)

||= 与 &&= 相反，仅当左操作数为 falsy 时才执行赋值。

let a = undefined;
let b = 2;
a ||= b;
//等价于
a = a || (a = b)
console.log(a); // 2

// 等价于
if (!a) {
    a = b;
}

&&和||赋值操作:https://blog.csdn.net/muzidigbig/article/details/109909755

Question question equals (??=)

??= 仅当左操作数为 null 或者 undefined 才执行赋值。

let a = undefined;
let b = 2;

a ??= b;
console.log(a); // 2

// 等价于
if (a === null || a === undefined) {
    a = b;
};

码农公寓