找回密码
立即注册
搜索
热搜: Java Python Linux Go
发回帖 发新帖

193

积分

0

好友

19

主题
发表于 13 小时前 | 查看: 1| 回复: 0

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,你可以在日常开发中更高效地处理常见任务,提升代码质量。

您需要登录后才可以回帖 登录 | 立即注册

手机版|小黑屋|网站地图|云栈社区(YunPan.Plus) ( 苏ICP备2022046150号-2 )

GMT+8, 2025-12-1 14:55 , Processed in 0.941446 second(s), 39 queries , Gzip On.

Powered by Discuz! X3.5

© 2025-2025 CloudStack.

快速回复 返回顶部 返回列表