同学们好，我是 Eugene，一个拥有多年中后台开发经验的前端工程师~

你是否也有过的观点是。明明学过很多技术，一到关键时候却讲不出来、甚至写不出来？

你是否也曾怀疑自己。是不是太笨了明明感觉会，却总差一口气？

就算想沉下心从头梳理。可工作那么忙，回家还要陪伴家人。

一天只有 24 小时时间永远不够用，常常感到力不从心。

技术领域，本就是逆水行舟，不进则退。

如果你也有一样的困扰，别慌。心态归零利用碎片时间，来一次彻彻底底的基础扫盲。

这一次我们一起慢慢来扎扎实实变强。

不搞花里胡哨的理论堆砌。只分享看得懂、用得上的前端干货，咱们一起稳步积累，真正摆脱“面向搜索引擎写代码”的尴尬。

. 有库可用，为什么还要自己写？

lodashramda 等库已经提供深拷贝、去重、扁平化等工具函数，但在面试、基础补强、还有「读懂库源码」的场景里手写一遍仍然非常有价值：

• 搞清概念：到底什么算「深拷贝」、什么算「去重」；这些概念模糊会导致面试卡壳。
• 踩一遍坑：循环引用、NaNDateRegExpSymbol 等特殊情况经常让人慌乱。
• 形成习惯：知道什么时候该用浅拷贝，什么时候必须深拷贝；避免在项目中因误用产生 bug。其实，

Lodash、Ramda 是 JavaScript 的工具库。它们把大量常用函数封装好了。想做数组去重、对象复制或数据筛选时只需要直接调用对应函数，就能省去手写代码的时间成本——这正是我们在「时间紧张」时最需要的「现成工具包」。

NaN: 表示「不是一个有效数字」。如 === NaN

Date: 用来表示时间点，例如记录「2026-02-28」这个日期。

RegExp: 正则表达式对象，用于字符串匹配规则。按理说，

S​ymbol​: ES6 新增的数据类型。「独一无二」的键名，可用于创建隐藏属性。

. 深拷贝

浅拷贝 vs 深拷贝——怎么选？

场景	推荐方式	原因
只改最外层、不改嵌套对象	{...obj},	实现简单、性能好
需要改嵌套对象且不想影响原数据	<深拷贝>	避免引用共享导致不可预期 bug
对象里有 Date。RegExp,函数等特殊类型	<深拷贝> + 特殊类型处理	否则会丢失类型或行为

一句话的观点是，只要会改到「嵌套对象/数组」，就考虑使用深拷贝。

常见坑  

. 循环引用：{ a: obj }

• #人话翻译#：`obj` 的属性 `a` 又指向 `obj` 本身，就像一条蛇咬住自己的尾巴。
• #为什么是坑#：`deepCopy` 在递归复制时会无限循环，引发栈溢出错误。
• #怎么解决#：A) 使用 `Map` 缓存已经复制过的对象；B) 在递归入口先检查缓存是否已存在。

. 特殊类型：Date。RegExp,Map,Set,Symbol…话说回来，

• 至于#人话翻译#。这些类型像「精装礼盒」，普通遍历只能得到空盒子，会把主要数据丢失。
• #为什么是坑#：普通属性遍历只能复制可枚举属性，而 Date/RegExp 等内部状态不会被复制。
• 再看#怎么解决#，针对每一种特殊类型单独实现克隆逻辑。

. Symbol 做 key 时被 `Object.keys` 忽略

• #人话翻译#这方面。Symbol 键像隐藏抽屉，用 `Object.keys` 看不到它们。
#为什么是坑# ：如果仅使用 `Object.keys` 拷贝，对象里 Symbol 键对应的数据会丢失。li> #怎么解决# ：使用 `Reflect.ownKeys` 或 `Object.getOwnPropertySymbols` 把 Symbol 键一起拿出来。话说回来，

. Recursion vs Iteration

• 循环 : 告诉程序重复执行 N 次直到满足条件。怎么说呢，
• 递归 : 函数自己调用自己。每次把问题拆小一点直至最小可直接回答。

避坑教程 

. 处理循环引用 + 基础类型 + 普通对象/数组

function deepCopy) {
// 基础类型直接返回
if return obj;

// 已经处理过的直接返回 if ) return map.get;

// 区分数组和普通对象 const newObj = Array.isArray?: {}，

// 缓存当前对象 map.set;

// 遍历自身可枚举属性 Reflect.ownKeys.forEach(key => { if ) { newObj = deepCopy;} }

);return newObj;}

. 支持 Date / RegExp / Map / Set / Symbol 值

function deepCopySpecial) {
// 基础与 Symbol 值
if {
return typeof obj === 'symbol'?说起来，Symbol : obj;}

// 已缓存 if ) return cache.get;

// 日期 if return new Date;

// 正则 if return new RegExp;

// Map if { const m = new Map;cache.set，obj.forEach => m.set,deepCopySpecial));return m，}

// Set if { const s = new Set; 说起来，cache.set;obj.forEach));return s，话说回来，}

// 普通对象 / 数组 const result = Array.isArray?: {}，cache.set;Reflect.ownKeys.forEach(k => { if ) { result = deepCopySpecial;} })，按理说，return result;}

. 整合版

// 完整闭环版，一键解决三大坑
function deepCopyAll) {
// 基础类型 & Symbol 值直接返回
if {
return typeof src === 'symbol'?Symbol : src;}

// 循环引用检测 if ) return seen.get;

// 特殊内置类型处理 if return new Date;if return new RegExp;if { const m = new Map;怎么说呢，seen.set;src.forEach => m.set,deepCopyAll));return m，} if { const s = new Set;seen.set，src.forEach));return s，}

// 普通对象／数组 const target = Array.isArray?: {}，seen.set;Reflect.ownKeys.forEach(k => { if ) { target = deepCopyAll;} })，return target;}

至于小白提示。复制上面的 `deepCopyAll` 函数 → `deepCopyAll` 即可得到使用较稳定的深拷贝，再也不用担心循环引用或特殊类型丢失了！

---

. 去重

场景与选型  

场景	方法	说明
基础类型数组	`Set`	写法简洁、性能好
包含 `NaN` 的数组	`Set` 已经能去掉 NaN；若需兼容旧环境可自行遍历	要显式说明 NaN 与自身不相等
对象数组 按某字段去重	`Map` 或 `>>>>>`	用唯一字段做 key，实现 O 去重

几种实现  

) 简单数组去重​

// 方法一：Set
function uniqBySet{return }

// 方法二：filter+indexOf function uniqByFilter{return arr.filter=>arr.indexOf==i);}

// 方法三：兼容 NaN 的手写版 function uniqWithNaN{ const res=;let hasNaN=false;for{ if){ if{res.push;hasNaN=true，} }else if){ res.push;} } return res;}

) 对象数组按指定字段去重​

function uniqByKey{
const seen=new Map;return arr.filter(item=>{
const val=item;if)return false;seen.set，return true;})，}

// 示例： const users=;console.log);//

---

. 扁平化​

场景  ​

• 将任意层级嵌套的数组 `]]` 转成 ``。话说回来，​
• 有时候只需要「扁平一层」或「指定层数」​​。​

实现方式  ​

) 完全递归扁平 ​

function flatten{
const res=;for{
if){
res.push);}else{
res.push;}
}
return res;}
// 示例：
console.log);//

) 指定深度扁平 ​

function flattenDepth{
ifreturn arr.slice;const res=，for{
if&&depth>-1){
\t\tres.push);怎么说呢，\t}else{
\t\tres.push;\t}
}
return res;}
// 示例：
console.log);//,4]
console.log);//

) reduce 写法 ​

function flattenByReduce{
return arr.reduce=>acc.concat?flattenByReduce:curr),);}

---

. 小结：日常怎么选 🚀​

函数	生产环境	面试/巩固基础
深拷贝\	/structuredClone/ /lodash.cloneDeep/	/deepCopyAll/
/去重\	// /arr.flat/?其实，not needed	/uniqWithNaN/。uniqByKey
/扁平化\	/arr.flat/?手写递归或 reduce 为 fallback.	/flatten/,flattenDepth/?

* 手写价值 *: 把边界情况、循环引用和特殊类型全部理清楚后你在选库或阅读源码时就会胸有成竹，再也不会因为“小细节”卡住面试或生产 Bug。

---

. 🔍 本系列专栏导航 📚​

• 从《闭包实战来看，从原理到防抖·节流·缓存｜JS进阶必会篇》​
• 《异步基础这方面。Promise & async/await 实战｜JS进阶必会篇》​
• 《常用工具函数：深拷贝·去重·扁平化手写实战｜JS进阶必会篇》​
• 《事件循环与宏微任务：log 顺序实战解析｜JS进阶必会篇》​
• 《设计模式实战：单例·发布订阅·策略 JS轻量用法｜JS进阶必会篇》​
• 《浏览器存储实战：localStorage/sessionStorage/cookie 用法详解｜JS进阶必会篇》​ <\/ul>

学习本就是一场持久战，不需要急着“一口吃成胖子”。哪怕今天只记住一点点，也是实打实的进步。

后续我仍然会坚持“大白话+实战”风格，为大家扫盲更多前端基石知识。

---