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());
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY