ECMAScript 2024 (ES15) 新特性更新

ECMAScript 2024 (ES15) 新特性更新

参阅tc39发布的文档:ECMAScript® 2025 Language Specification:

ECMAScript 2024, the 15th edition, added facilities for resizing and transferring ArrayBuffers and SharedArrayBuffers; added a new RegExp /v flag for creating RegExps with more advanced features for working with sets of strings; and introduced the Promise.withResolvers convenience method for constructing Promises, the Object.groupBy and Map.groupBy methods for aggregating data, the Atomics.waitAsync method for asynchronously waiting for a change to shared memory, and the String.prototype.isWellFormed and String.prototype.toWellFormed methods for checking and ensuring that strings contain only well-formed Unicode.

更新有下:

ArrayBuffer和SharedArrayBuffer新增可调整大小选项

正则表达式新增/v,用于创建具有更高级功能的正则表达式来处理字符串集合

Promise新增withResolvers来构建Promises

Object和Map新增groupBy用于聚合数据

Atomics新增waitAsync方法用于异步等待共享内存的更改

String新增isWellFormed和toWellFormed来检查和确保字符串仅包含正常的Unicode字符

特性一览

ArrayBuffer和SharedArrayBuffer

可调整大小的ArrayBuffer通过调用ArrayBuffer.prototype.resize()可以更改其字节长度。

js 复制代码
const buffer = new ArrayBuffer(8, { maxByteLength: 16 });

console.log(buffer.byteLength);
// Expected output: 8

buffer.resize(12);

console.log(buffer.byteLength);
// Expected output: 12

可调整大小的SharedArrayBuffer通过调用SharedArrayBuffer.prototype.grow()可以更改其字节长度。

js 复制代码
const buffer = new SharedArrayBuffer(8, { maxByteLength: 16 });

console.log(buffer.byteLength);

buffer.grow(12);

console.log(buffer.byteLength);

正则表达式新增/v

这种新模式新增了对扩展字符类的支持,包括以下功能:

  • 字符串的 Unicode 属性
  • 集合表示法+字符串文字语法
  • 匹配不区分大小写的语法
js 复制代码
// Unicode defines a character property named "Emoji".
const re1 = /^\p{Emoji}$/u;

// Match an emoji that consists of multiple code points:
re1.test('👨🏾‍⚕️'); // '\u{1F468}\u{1F3FE}\u200D\u2695\uFE0F'
// → false ❌

const re2 = /^\p{RGI_Emoji}$/v;

// Match an emoji that consists of multiple code points:
re2.test('👨🏾‍⚕️'); // '\u{1F468}\u{1F3FE}\u200D\u2695\uFE0F'
// → true ✅

Promise新增withResolvers

withResolvers的目的是简化从 Promise 中提取 resolvereject

js 复制代码
const { promise, resolve, reject } = Promise.withResolvers();

promise.then(res => {
  console.log(res)
})

let a = 10

if(a===10){
  resolve(10)
}else{
  reject(0)
}

Object和Map新增groupBy

用来给定可迭代对象中的元素进行分组。

js 复制代码
const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
];

const result1 = Object.groupBy(inventory, ({ type }) => type);
/*
{
  vegetables: [ { name: 'asparagus', type: 'vegetables', quantity: 5 } ],
  fruit: [
    { name: 'bananas', type: 'fruit', quantity: 0 },
    { name: 'cherries', type: 'fruit', quantity: 5 }
  ],
  meat: [
    { name: 'goat', type: 'meat', quantity: 23 },
    { name: 'fish', type: 'meat', quantity: 22 }
  ]
}
*/

const result2 = Map.groupBy(inventory, ({ type }) => type);

/*
{
  'vegetables' => [ { name: 'asparagus', type: 'vegetables', quantity: 5 } ],
  'fruit' => [
    { name: 'bananas', type: 'fruit', quantity: 0 },
    { name: 'cherries', type: 'fruit', quantity: 5 }
  ],
  'meat' => [
    { name: 'goat', type: 'meat', quantity: 23 },
    { name: 'fish', type: 'meat', quantity: 22 }
  ]
}
*/

Atomics新增waitAsync

异步等待共享内存的特定位置并返回一个Promise,是非阻塞的且可用于主线程。

给定一个共享的 Int32Array。

js 复制代码
const sab = new SharedArrayBuffer(1024);
const int32 = new Int32Array(sab);

令一个读取线程休眠并在位置 0 处等待,预期该位置的值为 0。result.value 将是一个 promise。

js 复制代码
const result = Atomics.waitAsync(int32, 0, 0, 1000);
// { async: true, value: Promise {<pending>} }

在该读取线程或另一个线程中,对内存位置 0 调用以令该 promise 解决为 "ok"。

js 复制代码
Atomics.notify(int32, 0);
// { async: true, value: Promise {<fulfilled>: 'ok'} }

如果它没有解决为 "ok",则共享内存该位置的值不符合预期(value 将是 "not-equal" 而不是一个 promise)或已经超时(该 promise 将解决为 "time-out")。

String新增isWellFormed和toWellFormed

isWellFormed()返回一个表示该字符串是否包含单独代理项的布尔值。

js 复制代码
console.log("\uDFFFab".isWellFormed())
// false
console.log("abc".isWellFormed())
// true

toWellFormed() 方法返回一个字符串,其中该字符串的所有单独代理项都被替换为 Unicode 替换字符 U+FFFD。

js 复制代码
const strings = [
  // 单独的前导代理
  "ab\uD800",
  "ab\uD800c",
  // 单独的后尾代理
  "\uDFFFab",
  "c\uDFFFab",
  // 格式正确
  "abc",
  "ab\uD83D\uDE04c",
];

for (const str of strings) {
  console.log(str.toWellFormed());
}

// "ab�"
// "ab�c"
// "�ab"
// "c�ab"
// "abc"
// "ab😄c"
相关推荐
一个处女座的程序猿O(∩_∩)O1 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js
燃先生._.7 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖8 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
black^sugar9 小时前
纯前端实现更新检测
开发语言·前端·javascript
2401_8576009510 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_8576009510 小时前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL10 小时前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js
小白学大数据10 小时前
如何使用Selenium处理JavaScript动态加载的内容?
大数据·javascript·爬虫·selenium·测试工具
2402_8575834910 小时前
基于 SSM 框架的 Vue 电脑测评系统:照亮电脑品质之路
前端·javascript·vue.js