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"
相关推荐
待磨的钝刨6 分钟前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
薛一半9 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
过期的H2O29 小时前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax
MarcoPage9 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
你好龙卷风!!!9 小时前
vue3 怎么判断数据列是否包某一列名
前端·javascript·vue.js
shenweihong11 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
巧克力小猫猿11 小时前
基于ant组件库挑选框组件-封装滚动刷新的分页挑选框
前端·javascript·vue.js