ES2021新特性-一一网

ES2021当前已经正式获批，ECMAScript 2022 已经有了草案规范，工作仍在继续。

ES2021带来了5个新特性，下面分别介绍：

逻辑赋值运算符

//"Or Or Equals"
x ||= y;
x || (x = y);
// 即
if (!x) {
  x = y;
}

// "And And Equals"
x &&= y;
x && (x = y);
// 即
if (x) {
  x = y;
}

// "Question Question Equals"
x ??= y;
x ?? (x = y);
// 即
if (x === null || x === undefined) {
  x = y;
}
复制代码

const updateID = user => {

  // We can do this
  if (!user.id) user.id = 1

  // Or this
  user.id = user.id || 1

  // Or use logical assignment operator.
  user.id ||= 1
}
复制代码

function setOpts(opts) {
  opts.cat ??= 'meow'
  opts.dog ??= 'bow';
}

setOpts({ cat: 'meow' })
复制代码

注意区别！！！

x = x || y; // 与 x ||= y 不等价
x = x && y; // 与 x &&= y 不等价
x = x ?? y; // 与 x ??= y 不等价
复制代码

上面的表达式无论什么情况都会进行赋值，但是逻辑赋值表达式只有在条件成立的时候才会进行赋值！

数字分隔符

作为数字的视觉分离，提高可读性。

1_000_000_000           // Ah, so a billion
101_475_938.38          // And this is hundreds of millions

let fee = 123_00;       // $123 (12300 cents, apparently)
let fee = 12_300;       // $12,300 (woah, that fee!)
let amount = 12345_00;  // 12,345 (1234500 cents, apparently)
let amount = 123_4500;  // 123.45 (4-fixed financial)
let amount = 1_234_500; // 1,234,500

let num1 = 1_000_000
let num2 = 1000000
num1 === num2 // true
复制代码

Promise.any

只要有一个 promise 是 fulfilled 时，则返回一个 resolved promise；所有的 promise 都是 rejected 时，则返回一个 rejected promise

Promise.any([
  fetch('https://v8.dev/').then(() => 'home'),
  fetch('https://v8.dev/blog').then(() => 'blog'),
  fetch('https://v8.dev/docs').then(() => 'docs')
]).then((first) => {
  // Any of the promises was fulfilled.
  console.log(first);
  // → 'home'
}).catch((error) => {
  // All of the promises were rejected.
  console.log(error);
});
复制代码

相关补充：

Promise.allSettled: 无论每一个 promise 是fulfilled 还是 rejected，返回值都是一个 resolved promise【ES2020】

Promise.allSettled([
  Promise.reject(1),
  Promise.resolve(2)
])
.then(result => console.log('result:', result))
.catch(error => console.error('error:', error));

// result:
// [{ status: "rejected", reason: 1 },
// { status: "fulfilled", value: 2 }]

复制代码

Promise.all: 只要有一个 promise 是 rejected，则立即返回一个 rejected promise；所有的 promise 都是 fulfilled 时，则返回一个 resolved promise【ES2015】

Promise.all([
  Promise.reject(1),
  Promise.resolve(2)
])
.then(result => console.log('result:', result))
.catch(error => console.error('error:', error));

// error: 1

复制代码

Promise.race: 只要有 promise 是 fulfilled 或 rejected，则立即返回一个 resolved 或 rejected promise【ES2015】

Promise.race([
  Promise.reject(1),
  Promise.resolve(2)
])
.then(result => console.log('result:', result))
.catch(error => console.error('error:', error));

// error: 1

复制代码

String.prototype.replaceAll

实现字符串的全局替换。String.prototype.replace()只会替换第一个匹配的字符串。

'x'.replace('', '_');
// → '_x'

'xxx'.replace(/(?:)/g, '_');
// → '_x_x_x_'

'xxx'.replaceAll('', '_');
// → '_x_x_x_'
复制代码

WeakRefs和FinalizationRegistry对象

WeakRef对象包含对对象的弱引用，这个弱引用被称为该WeakRef对象的target或者是referent。对对象的弱引用是指当该对象应该被GC回收时不会阻止GC的回收行为。而与此相反的，一个普通的引用（默认是强引用）会将与之对应的对象保存在内存中。只有当该对象没有任何的强引用时，JavaScript引擎GC才会销毁该对象并且回收该对象所占的内存空间。如果上述情况发生了，那么你就无法通过任何的弱引用来获取该对象。

FinalizationRegistry 对象可以让你在对象被垃圾回收时请求一个回调。

let target = {};
let wr = new WeakRef(target);

//wr and target aren't the same


// Creating a new registry
const registry = new FinalizationRegistry(heldValue => {
  // ....
});

registry.register(myObject, "some value", myObject);
// ...some time later, if you don't care about `myObject` anymore...
registry.unregister(myObject);
复制代码