ES——ES2020&2021

一、规范

1、for-in 机制

ECMA-262 规范没有规定 for (a in b) ... 的遍历顺序，部分原因是所有引擎都有自己特殊的实现，现在很难就 for-in 完整顺序规范达成一致，但规范了一些供参考的实现行为，详情参考 this list of interop semantics。

二、方法

1、matchAll - 匹配所有

String.prototype.matchAll() 会返回正则匹配的所有字符串及其位置，相比于 String.prototype.match() 返回的信息更详细。

const str = 'JavaScript'
const regexp = /a/g
console.log([...str.matchAll(regexp)]);

// Output:
[
  [ 'a', index: 1, input: 'JavaScript', groups: undefined ],
  [ 'a', index: 3, input: 'JavaScript', groups: undefined ]
]

2、模块新特性

• import 动态导入

动态导入意思是当你需要该模块时才会进行加载，返回的是一个 Promise 对象。只有在 ES Modules 模块规范下才支持。

// index-a.mjs
export default {
  hello () {
    console.log(`hello JavaScript`);
  }
}

// index-b.mjs
import('./index-a.mjs').then(module => {
  module.default.hello(); // hello JavaScript
})

• import.meta

import.meta 指当前模块的元数据。一个广泛支持的属性是 import.meta.url，以字符串形式输出当前模块的文件路径。

3、BigInt

BigInt 是新增的一种描述数据的类型，用来表示任意大的整数。因为原先的 JavaScript Number 类型能够表示的最大整数位 Math.pow(2, 53) - 1，一旦超出就会出现精度丢失问题。详情可参考笔者之前的这篇文章 JavaScript 浮点数之迷下：大数危机 https://github.com/qufei1993/blog/issues/10。

9007199254740995 // 会出现精度丢失
9007199254740995n // BigInt 表示方式一
BigInt('9007199254740995') // BigInt 表示方式二

4、Promise.allSettled

Promise.allSettled() 会等待所有的 Promise 对象都结束后在返回结果。

const delay = (value, ms, isReject) => new Promise(
    (resolve, reject) => setTimeout(
        () => isReject ? reject(new Error(value)) : resolve(value)
        , ms
    )
);
const promises = [
    delay('a', 3000),
    delay('b', 2000, true),
];
Promise.allSettled(promises)
    .then(res => console.log(res))

// Output:
// [
//     { status: 'fulfilled', value: 'a' },
//     {
//         status: 'rejected',
//         reason: Error: b
//         at Timeout._onTimeout(/index.js:1:108)
//         at listOnTimeout(node: internal / timers: 564: 17)
//         at process.processTimers(node: internal / timers: 507: 7)
//   }
// ]

5、全局对象

JavaScript 可以运行在不同的环境，浏览器为 window、Node.js 为 global。为了能够统一全局环境变量，引入了 globalThis。

window === globalThis // 浏览器环境
global === globalThis // Node.js 环境

6、可选链

可选链是一个很好的语法，使用 ?. 表示，能避免一些常见类型错误。

const obj = null;
obj.a // TypeError: Cannot read properties of null (reading 'a')
obj?.a // 使用可选链之后就不会报错了，会输出 undefined

7、空值合并

空值合并语法使用 ?? 表示，和 || 这个语法类似，不同的是 ?? 有明确的规定，只有当左侧的值为 null 或 undefined 时才会返回右侧的值，例如，左侧是 0 也会认为是合法的。

const a = 0
a || 1 // 1
a ?? 1 // 0

8、String.prototype.replaceAll

replaceAll() 用于替换正则表达式或字符串的所有匹配项，之前的 replace() 只会匹配一个。

console.log('JavaScript'.replaceAll('a', 'b')); // JbvbScript

9、Promise.any

Promise.any() 接收一个 Promise 数组做为参数，返回第一个执行成功的 Promise，如果全部执行失败将返回一个新的异常类型 AggregateError，错误信息会以对象数组的形式放入其中。

const delay = (value, ms) => new Promise((resolve, reject) => setTimeout(() => resolve(value), ms));
const promises = [
  delay('a', 3000),
  delay('b', 2000),
  delay('c', 4000),
];

Promise.any(promises)
  .then(res => console.log(res)) // b
  .catch(err => console.error(err.name, err.message, err.errors)) // 全部失败时返回：AggregateError All promises were rejected [ 'a', 'b', 'c' ]

10、数字分隔符

数字分隔符可以让大数字看起来也容易理解。

const budget = 1_000_000_000_000;
console.log(budget === 10 ** 12); // true

11、逻辑赋值运算符

结合了逻辑运算符 &&、||、?? 和逻辑表达式 =。

// "Or Or Equals" (or, the Mallet operator :wink:)
a ||= b; // a || (a = b);

// "And And Equals"
a &&= b; // a && (a = b);

// "QQ Equals"
a ??= b; // a ?? (a = b);

12、WeakRefs

能够拿到一个对象的弱引用，而不会阻止该对象被垃圾回收。例如 ref 弱引用了 obj，尽管持有了 obj 对象的引用，但也不会阻止垃圾回收 obj 这个对象，如果是强引用则不行。 参考 https://github.com/tc39/proposal-weakrefs

const obj = { a: 1 };
const ref = new WeakRef(obj)
console.log(ref.deref());