做前端开发的朋友几乎没人能避开JS深浅拷贝的问题。不管是日常业务开发还是前端面试这都是高频考点。很多人工作两三年依然只会死记硬背概念遇到复杂嵌套对象拷贝、修改原数据影响新数据的bug还是一脸懵。我刚入行的时候也踩过超多坑修改新对象数据原对象莫名被改动排查半天找不到原因面试被问深浅拷贝区别、手写深浅拷贝当场卡壳。其实深浅拷贝根本没有那么复杂核心差异就一句话浅拷贝只拷贝表层深拷贝复制完整数据彻底断绝新旧数据关联。今天我结合实战代码面试考点从零讲透JS深浅拷贝包含原理、场景、手写实现、优缺点分析看完彻底搞定这个知识点再也不用怕面试提问和线上bug。一、先搞懂底层基本数据与引用数据想理解深浅拷贝首先要分清JS的两种数据存储方式这是所有知识点的基础。基本数据类型String、Number、Boolean等直接存在栈内存赋值就是完整复制互不影响而对象、数组这类引用数据类型栈内存只存地址真实数据存在堆内存。我们平时遇到的拷贝问题只针对引用数据类型基本类型不存在深浅拷贝的说法。地址拷贝就是浅拷贝数据完整拷贝就是深拷贝。二、浅拷贝详解只复制表层地址浅拷贝的核心逻辑创建一个新对象遍历原对象的第一层属性简单复制过来。如果属性是基本类型复制数值如果是嵌套对象/数组只复制内存地址新旧数据共用同一个堆内存。这就导致一个致命问题浅拷贝后修改嵌套数据新旧对象会互相影响。日常开发常用的浅拷贝方法Object.assign、扩展运算符...、数组slice、concat下面给大家实测演示// 原始嵌套对象 const oldObj { name: 前端开发者, age: 25, info: { city: 上海 } }; // 扩展运算符实现浅拷贝 const newObj {...oldObj}; // 修改基本类型属性 newObj.age 26; // 修改嵌套引用属性 newObj.info.city 北京; console.log(oldObj.age); // 25 基本类型互不影响 console.log(oldObj.info.city); // 北京 嵌套数据被修改大家可以清晰看到表层基本数据修改互不影响但嵌套对象改动原数据同步变化这就是浅拷贝的最大弊端。三、深拷贝详解完全切断数据关联深拷贝就是彻底的完整复制不管多少层嵌套都会递归复制所有数据在堆内存中开辟全新空间。拷贝完成后新数据和原数据完全独立互不干扰。日常开发最简单的深拷贝方式就是JSON序列化转换代码极简开箱即用const oldObj { name: 前端开发者, age: 25, info: { city: 上海 } }; // JSON序列化实现深拷贝 const newObj JSON.parse(JSON.stringify(oldObj)); // 修改嵌套数据 newObj.info.city 北京; // 原数据无变化彻底独立 console.log(oldObj.info.city); // 上海但这个方法有明显缺陷也是面试常问考点无法拷贝undefined、function、正则、Symbol会丢失数据不支持循环引用。简单业务场景够用复杂场景不推荐。四、手写通用深浅拷贝面试必背1、手写浅拷贝遍历对象第一层属性逐一赋值适配对象和数组function shallowClone(obj) { // 非引用类型直接返回 if (typeof obj ! object || obj null) return obj; // 创建对应类型空对象/数组 const newObj Array.isArray(obj) ? [] : {}; // 遍历第一层赋值 for (let key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] obj[key]; } } return newObj; }2、手写递归深拷贝完整版通过递归遍历所有层级属性彻底复制数据解决嵌套问题适配绝大多数业务和面试场景function deepClone(obj) { if (typeof obj ! object || obj null) return obj; // 处理日期、正则特殊对象 if (obj instanceof Date) return new Date(obj); if (obj instanceof RegExp) return new RegExp(obj); const newObj Array.isArray(obj) ? [] : {}; for (let key in obj) { if (obj.hasOwnProperty(key)) { // 递归拷贝所有层级 newObj[key] deepClone(obj[key]); } } return newObj; }五、深浅拷贝使用场景总结避坑关键很多人盲目用深拷贝导致代码性能冗余其实按需选择才是最优解用浅拷贝数据只有单层结构、无嵌套对象数组追求执行速度轻量化数据拷贝。用深拷贝多层嵌套复杂数据、表单回显、列表编辑、状态缓存需要彻底隔离新旧数据防止原数据污染。