ES6冷门API - 技术栈

那些被低估的ES6冷门API：官方轮子香到爆，别再重复造了！

作为一名前端开发者，我们常常陷入"造轮子"的怪圈，却忽略了ECMAScript 6(ES6)已经为我们提供了许多强大而优雅的原生解决方案。今天，就让我们深入挖掘那些"官方早就给了，但我们总自己造轮子"的ES6冷门API，它们每一个都经过浏览器原生实现，无polyfill也能跑，一句顶五句，看完直接复制粘贴就能让同事惊呼"还有这种操作？"。

1. 数组拍平：flat/flatMap --- 树形结构处理利器

场景：后端把树形结构一股脑塞给你，前端只想拿叶子节点。

javascript 复制代码

// 商品按类目嵌套：[[手机,耳机],[笔记本,鼠标]]
const goods = [['iPhone','AirPods'],['MacBook','MagicMouse']];

// 旧写法
const all = goods.reduce((a, b) => a.concat(b), []);

// 新写法
const all = goods.flat(); // 默认1层
const deep = goods.flat(Infinity); // 无限层

bonus：flatMap = map + flat(1)，一次循环搞定"一对多"映射。

javascript 复制代码

const users = [
  {name:'张三',tags:'前端,TS'},
  {name:'李四',tags:'后端,Go'}
];

const pairs = users.flatMap(u => 
  u.tags.split(',').map(t => ({name:u.name, tag:t}))
);
// [{name:'张三',tag:'前端'}, {name:'张三',tag:'TS'}, ...]

2. 对象 ↔ 数组"瞬移"：entries/fromEntries --- 对象操作新范式

场景：只想给对象做"过滤/映射/排序"，又懒得写reduce。

javascript 复制代码

const score = { 语文:95, 数学:82, 英语:76 };

// 保留>80的学科
const pass = Object.fromEntries(
  Object.entries(score).filter(([k,v]) => v > 80)
);
// { 语文:95, 数学:82 }

URL解析也能一行完成：

javascript 复制代码

const params = Object.fromEntries(new URLSearchParams('name=张三&age=25'));
// { name:'张三', age:'25' }

3. 字符串补全：padStart/padEnd --- 格式化输出神器

场景：时间、订单、身份证，位数必须对齐。

javascript 复制代码

const now = new Date();
const time = `${now.getHours().toString().padStart(2,'0')}:${now.getMinutes().toString().padStart(2,'0')}`;
// "09:05" 而不是 "9:5"

固定编号：

javascript 复制代码

const orderId = '457';
const fullId = orderId.padStart(8, '0'); // "00000457"

4. 数组去重 + 集合运算：Set --- 高性能数据处理

场景：接口返回了1w条数据，里面重复ID占30%。

javascript 复制代码

const ids = [3,5,5,7,3,9];
const unique = [...new Set(ids)]; // [3,5,7,9]

// 交集/差集，同样一行
const a = new Set([1,2,3]);
const b = new Set([3,4,5]);
const intersect = [...a].filter(v => b.has(v)); // [3]
const diff = [...a].filter(v => !b.has(v)); // [1,2]

5. 解构"嵌套 + 默认值" --- 防御性编程必备

场景：接口字段经常缺失，还要做降级。

javascript 复制代码

function ajax({ 
  url, 
  method = 'GET', // 默认值
  timeout = 5000, 
  headers: { token = '' } = {} // 嵌套默认值
} = {}) {
  console.log(url, method, token);
}

深层安全取值：

javascript 复制代码

const { address: { city, detail = '暂无' } = {} } = user;
// 无论user.address是否存在都不会报错

6. 真正"私有"属性：Symbol --- 封装的艺术

场景：写工具库，怕用户覆盖你的内部字段。

javascript 复制代码

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]); // 外部拿不到

还能改toString标签：

javascript 复制代码

class Queue {
  [Symbol.toStringTag] = 'Queue';
}
`${new Queue}`; // "[object Queue]"

7. 对象操作"统一入口"：Reflect --- Proxy的最佳搭档

场景：写Proxy拦截，总担心"死循环"。

javascript 复制代码

const proxy = new Proxy(target, {
  get(t, k){
    console.log('read', k);
    return Reflect.get(t, k); // 调用原始行为，安全
  }
});

安全删除：

javascript 复制代码

const ok = Reflect.deleteProperty(obj, 'a'); // 返回布尔，可判断

8. 异步"扫尾"神器：finally() --- 资源管理不再漏

场景：请求结束必须关loading，成功失败都得关。

javascript 复制代码

function load(){
  showLoading();
  return fetch('/api/data')
    .then(render)
    .catch(showError)
    .finally(hideLoading); // 只写一次
}

为什么这些API值得关注？

性能优势：原生实现比手动实现的性能更好
代码简洁：一行顶多行，减少出错概率
语义明确：API名称直接表达意图
浏览器兼容：现代浏览器都已支持，无需polyfill
团队协作：统一使用标准API，降低理解成本

实践建议

在项目中逐步替换现有的手动实现
团队内部分享这些技巧，统一代码风格
关注ECMAScript新提案，持续学习
在工具函数库中优先使用这些原生API

结语

ES6为我们提供了如此多强大的原生API，却常常被我们忽视。与其花费时间重复造轮子，不如深入了解这些官方提供的"轮子"，它们不仅性能更好，代码更简洁，还能让你的同事眼前一亮。记住，优秀的开发者不是能写出最复杂代码的人，而是能用最简单优雅的方式解决问题的人。

希望这篇文章能帮助你发现ES6中那些被低估的宝藏API，如果你有其他喜欢的冷门API，欢迎在评论区分享！