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'index1input'JavaScript'groupsundefined ],
  [ 'a'index3input'JavaScript'groupsundefined ]
]

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());
posted @   巴伐利亚药水哥  阅读(5)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示