ES15：Object.groupBy() 和 Map.groupBy()、Promise.withResolvers() 相关知识点

系列文章目录

ES6中对象字面量、解构赋值、var，let ，const、块及作用域、展开运算符与剩余参数相关知识点
 ES6中 Map 集合类型知识点、常见使用场景、以及案例
 ES6中 Set集合知识点、常见使用场景、以及案例
 ES6中迭代器与生成器，相关知识点、常见使用场景、以及案例
 ES6中 Promise 相关知识点、常见使用场景、以及案例
 ES6中箭头函数、this的指向问题

ES7：includes()、指数运算符详细教程
 ES8：async/await、Object 的新静态方法、padStart/padEnd、函数参数列表末尾允许逗号相关知识点
 ES9：对象扩展与剩余参数运算符、异步迭代、Promise新增方法、模板字符串修订相关知识点
 ES10：数组扁平化、对象转换、字符串修剪、catch参数、Symbol描述文字、toString修、sort排序、标准化的globalThis 相关知识点
 ES11：可选链操作符、空值合并运算符、allSettled、动态导入、matchAll、meta 相关知识点
 ES12：逻辑赋值运算符、数字分隔符、replaceAll、Promise新方法、WeakRef、Setter/Getter 相关知识点
 ES13：类私有属性和方法、顶层 await、at() 方法、Object.hasOwnProperty()、类静态块相关知识点
 ES14：数组的新"拷贝并修改"方法、findLast() 和 findLastIndex()、 Symbol 作为 WeakMap 的键相关知识点
 ES15：Object.groupBy() 和 Map.groupBy()、Promise.withResolvers() 相关知识点
 ES16：Set 集合方法增强、Promise.try、迭代器助手、JSON 模块导入相关知识

文章目录

系列文章目录
[一、Object.groupBy() 和 Map.groupBy()](#一、Object.groupBy() 和 Map.groupBy())
二、Promise.withResolvers()
[三、String.prototype.isWellFormed() 和 toWellFormed()](#三、String.prototype.isWellFormed() 和 toWellFormed())

ECMAScript 2024（简称 ES15）于 2024 年 6 月正式获批。这次更新为 JavaScript 带来了一系列非常实用的标准功能，涵盖了数据分组、异步操作、正则增强以及内存管理等多个方面。

以下是 ES15 引入的所有新功能详解、代码教程及示例：

一、Object.groupBy() 和 Map.groupBy()

这是 ES15 最受关注的特性。以前我们需要手动使用 reduce 来实现数据分组，现在有了原生方法。

Object.groupBy: 返回一个普通对象（原型为 null），适合大多数场景。
Map.groupBy: 返回一个 Map 对象，适合键是复杂对象（如实例、数组）的情况。

javascript 复制代码

const fruits = [
  { name: "苹果", color: "红色", quantity: 5 },
  { name: "香蕉", color: "黄色", quantity: 10 },
  { name: "樱桃", color: "红色", quantity: 12 },
];

const groupedByColor = fruits.reduce((accumulator, currentFruit) => {
  // 1. 获取当前水果的颜色作为"键"
  const key = currentFruit.color;

  // 2. 如果结果对象里还没有这个颜色的分类，先初始化一个空数组
  if (!accumulator[key]) {
    accumulator[key] = [];
  }

  // 3. 将当前水果推入对应的颜色数组中
  accumulator[key].push(currentFruit);

  // 4. 返回累加器，供下一轮循环使用
  return accumulator;
}, {}); // ← 注意：这里传入 {} 作为 accumulator 的初始值

console.log(groupedByColor);

javascript 复制代码

const fruits = [
  { name: "苹果", color: "红色", quantity: 5 },
  { name: "香蕉", color: "黄色", quantity: 10 },
  { name: "樱桃", color: "红色", quantity: 12 },
];

// 使用 Object.groupBy 按颜色分组
const inventoryByColor = Object.groupBy(fruits, (fruit) => fruit.color);

console.log(inventoryByColor);
/* 输出:
{
  红色: [ { name: "苹果", ... }, { name: "樱桃", ... } ],
  黄色: [ { name: "香蕉", ... } ]
}
*/

二、Promise.withResolvers()

简单来说，它的作用是：把 Promise 对象本身，以及它的 resolve 和 reject 控制句柄一并"解耦"出来。

javascript 复制代码

const { promise, resolve, reject } = Promise.withResolvers();

// 可以在任何地方手动触发解决
setTimeout(() => {
  resolve("手动异步任务完成！");
}, 1000);

promise.then(console.log);

三、String.prototype.isWellFormed() 和 toWellFormed()

JavaScript 字符串使用 UTF-16 编码。如果处理不当，可能会产生不完整的代理对（lone surrogates），导致 encodeURI 等函数崩溃。

isWellFormed(): 检查字符串是否包含畸形的 Unicode 序列。
toWellFormed(): 将畸形的序列替换为 Unicode 替换字符（U+FFFD），确保字符串"安全"。

javascript 复制代码

const illFormed = "Hello\uD800World"; // 包含孤立的高位代理

console.log(illFormed.isWellFormed()); // false

// 转换为良构字符串以避免后续 API 报错
const wellFormed = illFormed.toWellFormed();
console.log(wellFormed); // "HelloWorld"