2024年JavaScript新特性做了哪些升级?让我们来回顾一下ES15带来的全新的特性和有前景的提案。( "ES15" 是指 ECMAScript 2024。ECMAScript 是 JavaScript 的标准,由 ECMA International 的技术委员会 TC39 负责制定。)
让我们一起来盘点一下那些令人惊叹的5项JavaScript新功能。
数组原生的group-by方法
Object.groupBy():
有了它,也就不在需要Lodash了,现在看Lodash基本大部分功能都有了原生的支持。
我本以为还会有一个类似 Array.prototype.groupBy 的新实例方法,但不知出于什么原因,它并没有增加到数组上。
反倒是在Map上增加了一个静态方法, Map.groupBy 对对象键进行分组:
目前支持使用groupBy的,就是Object和Map了。
Promise.withResolvers
有了 Promise.withResolvers()
,创建Promise更简单了,而在此之前,我们不得不通过闭包来实现:
或者从 NPM 安装 - 多一个依赖项!
但现在有了 ES15 中的 Promise.withResolvers():
Promise.withResolvers使得做开关延迟特别方便,例如在资源加载完毕后resolve。这允许我们在Promise外部控制加载过程,实现更有效的延迟加载策略,优化页面加载时间和性能。
Buffer性能升级
Buffer是用于存储应用程序生成的临时数据的微型数据存储区。它们使在pipeline的各个阶段传输和处理数据变得异常简单。
像以下的Pipelines:
- 文件处理: Input file → buffer → process → new buffer → output file
- 视频流: Network response → buffer → display video frame
- 生产消费队列: Receive customer → queue/buffer → serve customer
有了缓冲器,每个阶段处理数据的速度各不相同,互不影响。
但是,如果流水线上的数据超过了缓冲区的容量,会发生什么情况呢?
在此之前,我们必须将当前数据的缓冲区全部复制到一个更大的缓冲区中。
这对性能的影响非常大,尤其是当管道中会有大量数据时。
ES15 为我们提供了解决这一问题的方法:可调整的数组缓冲区。
异步升级
Atomics.waitAsync()
:ES2024 中另一个强大的异步编码功能:
在JavaScript中,Atomics对象提供了一组静态方法,用于在多线程环境中以原子方式执行操作,比如共享内存的操作。Atomics.waitAsync()方法允许开发者在异步环境中等待某个条件变量达到特定值,这在并发编程中非常有用,因为它可以避免阻塞主线程,同时等待某个事件的发生。
例如:当两个代理共享一个缓冲区时
而代理 1 则 Sleep",等待代理 2 完成任务。
当代理 2 完成后,它会使用共享缓冲区作为通道发出通知。
如果你认为这与普通的 async/await 类似,那你就完全正确了。
但最大的区别在于这两个代理可以存在于完全不同的代码上下文中,它们只需要访问同一个缓冲区。
而且:多个代理可以在不同时间访问或等待共享缓冲区,其中任何一个代理都可以通知 "唤醒 "所有其他代理。
这怎么理解?假设我们有两个Web Workers,一个主线程和多个工作线程。工作线程将等待主线程更新一个共享的内存位置。
主线程代码:
javascript
// 创建一个共享的ArrayBuffer
const sharedBuffer = new SharedArrayBuffer(4);
const sharedUint32 = new Uint32Array(sharedBuffer);
// 初始值设置为0
sharedUint32[0] = 0;
// 创建一个Worker
const worker = new Worker('worker.js');
// 向Worker发送共享内存的引用
worker.postMessage({ sharedBuffer });
// 稍后更新共享内存的值
setTimeout(() => {
sharedUint32[0] = 1; // 这个值的改变将触发等待中的Atomics.waitAsync()
}, 1000);
工作线程代码(worker.js):
javascript
// 监听主线程发送的消息
onmessage = async ({ data }) => {
const { sharedBuffer } = data;
const sharedUint32 = new Uint32Array(sharedBuffer);
// 等待sharedUint32[0]的值变为1
while (true) {
const value = Atomics.waitAsync(sharedUint32, 0, 0);
if (value === 1) {
console.log('Value has changed to 1!');
break;
}
}
// 做一些工作...
console.log('Processing data...');
};
在这个例子中,工作线程使用Atomics.waitAsync()
在共享内存位置sharedUint32[0]
上等待,直到它的值变为1。主线程在1秒后更新这个值为1,这将触发工作线程中的等待,工作线程随后继续执行。
正则升级:v表示&集合操作
为了匹配不断增加的 Unicode 字符集,如
- 表情符号:😀、❤️、👍、🎉 等。
- 重音字母:é、à、ö、ñ 等。
- 符号和非拉丁字符:©、®、€、£、µ、¥ 等
因此,我们在这里使用 Unicode regex 和 v 标志来匹配所有希腊字母:
另外在正则表达式中,集合操作指的是使用字符集(character sets)来匹配多个字符。例如:
- [abc]:匹配任何一个字符a、b或c
- [^abc]:匹配任何不是a、b或c的字符
- [a-z]:匹配任何小写字母
而新的语法里增加了如下的新操作符
总结
总体而言,2024 对 JavaScript 来说是一次重大飞跃,它具备了现代开发所必需的多项功能。
帮助你写出更简洁、更具表现力和更清晰的代码。