异步更灵活！超实用的ES2024新特性
javaScript作为前端开发的主力语言，每年都在不断进步和优化。2024年，ECMAScript（简称ES）推出了最新版本ES15，为开发者带来了许多新的功能和改进。本文将带你一探ES2024 比较常用的4个新特性 究竟有啥神奇之处
1.更灵活的异步控制：Promise.withResolvers
在复杂异步控制场景中，如封装第三方库异步操作时很有用。假设你要封装一个图片加载库，需在外部控制加载状态：
function loadImageWithResolvers(url) {
const { promise, resolve, reject } = Promise.withResolvers();
const img = new Image();
img.onload = () => resolve(img);
img.onerror = () => reject(new Error('图片加载失败'));
img.src = url;
return promise;
}
// 使用
loadImageWithResolvers('example.jpg').then(img => {
document.body.appendChild(img);
}).catch(err => {
console.error(err);
});
2. 便捷的数据分组：Object.groupBy与Map.groupBy
处理数据统计与分组时，例如电商订单数据按日期分组：
const orders = [
{ id: 1, date: '2024 - 01 - 01', amount: 100 },
{ id: 2, date: '2024 - 01 - 02', amount: 200 },
{ id: 3, date: '2024 - 01 - 01', amount: 150 }
];
const groupedOrders = Object.groupBy(orders, order => order.date);
// {
// '2024 - 01 - 01': [
// { id: 1, date: '2024 - 01 - 01', amount: 100 },
// { id: 3, date: '2024 - 01 - 01', amount: 150 }
// ],
// '2024 - 01 - 02': [
// { id: 2, date: '2024 - 01 - 02', amount: 200 }
// ]
// }
3. 顶层await
在模块依赖异步初始化时应用，比如初始化数据库连接：
// db.js
const { Pool } = require('pg');
const pool = new Pool({
user: 'user',
host: 'localhost',
database: 'test',
password: 'password',
port: 5432
});
await pool.connect();
export default pool;
// main.js
import pool from './db.js';
// 后续可直接使用已连接的pool进行数据库操作
4. String.isWellFormed 和 String.toWellFormed
处理用户输入文本，防止异常字符导致程序出错，如处理昵称输入：
function validateAndFixNickname(nickname) {
if (!String.isWellFormed(nickname)) {
nickname = nickname.toWellFormed();
}
return nickname;
}
const userInput = '\uD800昵称';
const fixedNickname = validateAndFixNickname(userInput);
总结
