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"
相关推荐
程序饲养员1 小时前
使用React Router 7.5进行静态站点生成(SSG)教程
前端·javascript·react.js
前端极客探险家1 小时前
使用 Vue 3 + Google Maps API 实现定位与路线规划功能
前端·javascript·vue.js
小妖6662 小时前
html 给文本两端加虚线自适应
前端·javascript·html
阿諪諪2 小时前
Vue Router(1)
前端·javascript·vue.js
斗锋在干嘛2 小时前
WebView 与 JavaScript 的交互
开发语言·javascript·交互
天天进步20152 小时前
C++使用WebView2控件,通过IPC通信与Javascript交互
javascript·c++·交互
@PHARAOH2 小时前
HOW - 实现 useClickOutside 或者 useClickAway
前端·javascript·react.js
糟糕好吃3 小时前
如何用一个插件让你的 Taro 项目启动快 3 倍?
前端·javascript·微信小程序
前端_学习之路3 小时前
Vue--状态管理pinia
前端·javascript·vue.js
萌萌哒草头将军3 小时前
🔥🔥🔥MCP TypeScript SDK 初体验:挑战快速搭建一个 AI 应用!
前端·javascript·mcp