在ES6及更高版本的JavaScript中,有许多实用的API往往被开发者忽视,但它们能显著提升开发效率。本文将介绍8个这样的API,并附带实战示例。
1. 数组扁平化处理:flat / flatMap
应用场景:处理嵌套数组结构,快速提取所有子元素。
// 商品分类嵌套数据:[[手机,平板],[笔记本,配件]]
const categories = [['iPhone','iPad'],['MacBook','Accessories']];
// 传统方式
const allItems = categories.reduce((acc, cur) => acc.concat(cur), []);
// 现代写法
const allItems = categories.flat(); // 默认展开一层
const allDeep = categories.flat(Infinity); // 无限层级展开
// 进阶:flatMap = 映射 + 单层展开
const users = [
{name:'王伟', skills:'编程,游泳'},
{name:'李娜', skills:'绘画,烹饪'}
];
const skillPairs = users.flatMap(u =>
u.skills.split(',').map(skill => ({ user: u.name, skill }))
);
// 输出:[{user:'王伟',skill:'编程'}, {user:'王伟',skill:'游泳'}, ...]
2. 对象与数组快速转换:entries / fromEntries
应用场景:需要对对象进行筛选、映射或排序时避免复杂操作。
const scores = { 物理: 88, 化学: 75, 生物: 92 };
// 筛选及格科目
const passed = Object.fromEntries(
Object.entries(scores).filter(([subject, score]) => score >= 80)
);
// { 物理:88, 生物:92 }
// 快速解析URL参数
const urlParams = Object.fromEntries(new URLSearchParams('keyword=电脑&page=2'));
// { keyword:'电脑', page:'2' }
3. 字符串长度补全:padStart / padEnd
应用场景:确保时间、编号等数据保持统一格式。
const date = new Date();
const timeText =
`${date.getHours().toString().padStart(2,'0')}:${date.getMinutes().toString().padStart(2,'0')}`;
// "08:03" 而非 "8:3"
// 统一订单号格式
const orderNum = '168';
const formattedOrder = orderNum.padStart(10, '0'); // "0000000168"
4. 高效数据去重与集合操作:Set
应用场景:处理含重复项的大数据集合。
const data = [2,4,4,6,2,8];
const uniqueData = [...new Set(data)]; // [2,4,6,8]
// 集合运算
const setA = new Set([10,20,30]);
const setB = new Set([20,40,50]);
const common = [...setA].filter(x => setB.has(x)); // [20]
const difference = [...setA].filter(x => !setB.has(x)); // [10,30]
5. 嵌套解构与默认值设置
应用场景:安全访问接口返回的深层数据。
// 配置参数处理
function request({
url,
method = 'POST',
timeout = 3000,
headers: { authToken = '' } = {}
} = {}) {
console.log(url, method, authToken);
}
// 深层数据安全提取
const { profile: { mobile, address = '未填写' } = {} } = userData;
// 无惧 userData.profile 为空
6. 实现真正私有属性:Symbol
应用场景:封装内部数据,防止外部篡改。
const _secret = Symbol('secret');
class Cache {
[_secret] = new Map();
set(k,v){ this[_secret].set(k,v); }
get(k){ return this[_secret].get(k); }
}
const c = new Cache();
c['secret'] = 123; // 不影响内部
console.log(c[_secret]); // 外部拿不到
7. 统一对象操作接口:Reflect
应用场景:配合Proxy实现安全的元编程。
const proxyObj = new Proxy(target, {
set(obj, key, value) {
console.log(`设置 ${key} 为 ${value}`);
return Reflect.set(obj, key, value); // 安全调用原生方法
}
});
// 安全删除属性
const deleteSuccess = Reflect.deleteProperty(data, 'tempField');
8. 异步操作统一收尾:finally()
应用场景:无论异步操作成败都需要执行的清理工作。
function fetchData(){
showSpinner();
return fetch('/api/list')
.then(displayData)
.catch(showError)
.finally(hideSpinner); // 总会执行
}
通过掌握这些ES6+ API,你可以在日常开发中更高效地处理常见任务,提升代码质量。