🌐ES6 这 8 个隐藏外挂，知道 3 个算我输！
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<div>
<div>
<blockquote>
<p>“代码写得少，Bug 自然少。”——鲁迅（并没有说）</p>
</blockquote>
<p>今天不聊 React、不聊 Vue，回到语言层，挖一挖那些“官方早就给了，但我们总自己造轮子”的 ES6 冷门 API。<br>
它们每一个都经过浏览器真·原生实现，<strong>无 polyfill 也能跑</strong>，<strong>一句顶五句</strong>，看完直接复制粘贴就能让同事惊呼“还有这种操作？”。</p>
<hr>
<h3 data-id="heading-0">1. 数组拍平：flat / flatMap</h3>
<p><strong>场景</strong>：后端把树形结构一股脑塞给你，前端只想拿叶子节点。</p>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 商品按类目嵌套：[[手机,耳机],[笔记本,鼠标]]
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); // 无限层</pre>
</div>
bonus：<code>flatMap = map + flat(1)</code>，一次循环搞定“一对多”映射。<br>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">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'}, ...]</pre>
</div>
<h3 data-id="heading-1">2. 对象 ↔ 数组“瞬移”：entries ↔ fromEntries</h3>
<p>场景：只想给对象做“过滤 / 映射 / 排序”，又懒得写 <code>reduce</code>。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">const score = { 语文:95, 数学:82, 英语:76 };
// 保留 >80 的学科
const pass = Object.fromEntries(
Object.entries(score).filter(() => v > 80)
);
// { 语文:95, 数学:82 }</pre>
</div>
<p>URL 解析也能一行完成：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">const params = Object.fromEntries(new URLSearchParams('name=张三&age=25'));
// { name:'张三', age:'25' }</pre>
</div>
<h3 data-id="heading-2">3. 字符串补全：padStart / padEnd</h3>
<p>场景：时间、订单、身份证，位数必须对齐。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">const now = new Date();
const time = `${now.getHours().toString().padStart(2,'0')}:${now.getMinutes().toString().padStart(2,'0')}`;
// "09:05" 而不是 "9:5"</pre>
</div>
<p>固定编号：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">const orderId = '457';
const fullId = orderId.padStart(8, '0'); // "00000457"</pre>
</div>
<h3 data-id="heading-3">4. 数组去重 + 集合运算：Set</h3>
<p>场景：接口返回了 1w 条数据，里面重复 ID 占 30%。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">const ids = ;
const unique = [...new Set(ids)]; //
// 交集 / 差集，同样一行
const a = new Set();
const b = new Set();
const intersect = [...a].filter(v => b.has(v)); //
const diff = [...a].filter(v => !b.has(v)); // </pre>
</div>
<h3 data-id="heading-4">5. 解构“嵌套 + 默认值”</h3>
<p>场景：接口字段经常缺失，还要做降级。</p>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">function ajax({
url,
method = 'GET', // 默认值
timeout = 5000,
headers: { token = '' } = {}// 嵌套默认值
} = {}) {
console.log(url, method, token);
}</pre>
</div>
</div>
<p>深层安全取值：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">const { address: { city, detail = '暂无' } = {} } = user;
// 无论 user.address 是否存在都不会报错</pre>
</div>
<h3 data-id="heading-5">6. 真正“私有”属性：Symbol</h3>
<p>场景：写工具库，怕用户覆盖你的内部字段。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">const _secret = Symbol('secret');
class Cache {
= new Map();
set(k,v){ this.set(k,v); }
get(k){ return this.get(k); }
}
const c = new Cache();
c['secret'] = 123; // 不影响内部
console.log(c);// 外部拿不到</pre>
</div>
<p>还能改 toString 标签：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">class Queue {
= 'Queue';
}
`${new Queue}`; // ""</pre>
</div>
<h3 data-id="heading-6">7. 对象操作“统一入口”：Reflect</h3>
<p>场景：写 Proxy 拦截，总担心“死循环”。</p>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">const proxy = new Proxy(target, {
get(t, k){
console.log('read', k);
return Reflect.get(t, k); // 调用原始行为，安全
}
});</pre>
</div>
</div>
<div class="code-block-extension-header"> 安全删除：</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">const ok = Reflect.deleteProperty(obj, 'a'); // 返回布尔，可判断</pre>
</div>
<h3 data-id="heading-7">8. 异步“扫尾”神器：finally()</h3>
<p>场景：请求结束必须关 loading，成功失败都得关。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">function load(){
showLoading();
return fetch('/api/data')
.then(render)
.catch(showError)
.finally(hideLoading); // 只写一次
}</pre>
</div>
<div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
</div>
<p><em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></em></p><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19511918
頁:
[1]