15、深拷贝浅拷贝的区别？如何实现一个深拷贝？

目录一、先说本质区别二、从内存角度理解三、浅拷贝是什么常见浅拷贝方式1. Object.assign2. 展开运算符 ...3. 数组方法四、深拷贝是什么五、常见深拷贝实现方式1. JSON.parse(JSON.stringify(obj))优点缺点无法处理2. structuredClone()优点缺点3. 手写递归深拷贝六、手写一个基础版深拷贝这个版本能解决什么这个版本有什么问题七、进阶版处理循环引用为什么用 WeakMap八、再进阶处理常见内置对象这个版本做了哪些增强九、如果面试官继续深挖还能说什么1. 函数能不能深拷贝2. 是否要拷贝原型链和属性描述符3. 深拷贝的性能问题十、实际开发中常见方案场景 1普通对象、接口数据快照场景 2React / Vue 状态管理十一、面试中如何回答更精彩回答结构第一层先下定义第二层举例说明第三层说实现方式第四层说边界第五层说工程实践十二、面试高分口语模板版本一简洁但有深度版本二更适合高级一点的表达十三、手写代码模板十四、面试官可能追问的问题1. Object.assign 是深拷贝吗2. 展开运算符是深拷贝吗3. JSON.stringify 方案有什么缺陷4. 为什么深拷贝要用 WeakMap不用 Map5. 深拷贝函数怎么处理6. 深拷贝一定比浅拷贝好吗十五、最后帮你浓缩成一句“面试结束语”深拷贝 / 浅拷贝 2 分钟背诵版面试答案超短版 30 秒回答这是前端面试里的超级高频题。如果你只回答“浅拷贝拷一层深拷贝拷多层”只能算及格如果你能从内存模型、实现方式、边界问题、手写代码、工程实践这几个角度来回答就会很加分。一、先说本质区别一句话先定性浅拷贝只复制对象的第一层属性如果属性值是引用类型复制的是引用地址。深拷贝会递归复制所有层级的数据生成一个完全独立的新对象。二、从内存角度理解JavaScript 里基本类型string、number、boolean、null、undefined、symbol、bigint引用类型object、array、function、date、regexp、map、set等基本类型赋值时拷贝的是值。引用类型赋值时拷贝的是地址。例如const a { name: Tom }; const b a; b.name Jerry; console.log(a.name); // Jerry因为a和b指向同一块内存。三、浅拷贝是什么浅拷贝只拷贝第一层。常见浅拷贝方式1.Object.assignconst obj { name: Tom, info: { age: 18 } }; const copy Object.assign({}, obj); copy.name Jerry; copy.info.age 20; console.log(obj.name); // Tom console.log(obj.info.age); // 20说明第一层name是独立的第二层info还是共享引用2. 展开运算符...const obj { name: Tom, info: { age: 18 } }; const copy { ...obj }; copy.info.age 30; console.log(obj.info.age); // 30数组也是一样const arr [1, 2, { a: 3 }]; const copy [...arr]; copy[2].a 100; console.log(arr[2].a); // 1003. 数组方法slice()concat()Array.from()这些对数组也都是浅拷贝。四、深拷贝是什么深拷贝会把每一层都复制出来新的对象和原对象完全隔离。const obj { name: Tom, info: { age: 18 } }; const copy deepClone(obj); copy.info.age 99; console.log(obj.info.age); // 18五、常见深拷贝实现方式1.JSON.parse(JSON.stringify(obj))这是最常见、最容易说出来的一种。const obj { name: Tom, info: { age: 18 } }; const copy JSON.parse(JSON.stringify(obj));优点简单面试容易先抛出来对普通对象、数组、多层嵌套有效缺点它有很多问题面试一定要主动说出来否则容易被追问住。无法处理functionundefinedsymbolBigIntDate会变成字符串RegExp会变成空对象或丢失特征Map/Set循环引用会报错例如const obj { a: undefined, b: function () {}, c: Symbol(x), d: new Date() }; const copy JSON.parse(JSON.stringify(obj)); console.log(copy); // a、b、c 会丢失d 变成字符串所以你可以说JSON方案适合简单场景但不是通用的深拷贝方案。这句很加分。2.structuredClone()这是现代浏览器和新环境提供的原生深拷贝方法。const copy structuredClone(obj);优点原生支持深拷贝能处理循环引用比 JSON 更可靠缺点不能拷贝函数某些旧环境不支持对特殊对象仍需看具体兼容性面试中可以补一句如果运行环境支持优先考虑structuredClone它比JSON方案更标准。3. 手写递归深拷贝这是最核心的面试点。如果面试官问“如何实现一个深拷贝”通常是想看你能不能手写。六、手写一个基础版深拷贝先写一个能处理对象 数组的版本。function deepClone(target) { if (target null || typeof target ! object) { return target; } const result Array.isArray(target) ? [] : {}; for (const key in target) { if (Object.prototype.hasOwnProperty.call(target, key)) { result[key] deepClone(target[key]); } } return result; }这个版本能解决什么普通对象数组多层嵌套基本类型这个版本有什么问题它还不能处理循环引用DateRegExpMapSetSymbol不可枚举属性原型链函数拷贝属性描述符所以如果面试官继续追问就要升级。七、进阶版处理循环引用循环引用是高频追问。例如const obj {}; obj.self obj;如果直接递归会爆栈。所以要用WeakMap记录已经拷贝过的对象。function deepClone(target, hash new WeakMap()) { if (target null || typeof target ! object) { return target; } if (hash.has(target)) { return hash.get(target); } const result Array.isArray(target) ? [] : {}; hash.set(target, result); for (const key in target) { if (Object.prototype.hasOwnProperty.call(target, key)) { result[key] deepClone(target[key], hash); } } return result; }为什么用WeakMapkey 必须是对象弱引用不影响垃圾回收很适合处理循环引用缓存八、再进阶处理常见内置对象这是你和普通候选人拉开差距的地方。function deepClone(target, hash new WeakMap()) { if (target null || typeof target ! object) { return target; } if (hash.has(target)) { return hash.get(target); } if (target instanceof Date) { return new Date(target); } if (target instanceof RegExp) { return new RegExp(target.source, target.flags); } if (target instanceof Map) { const result new Map(); hash.set(target, result); target.forEach((value, key) { result.set(deepClone(key, hash), deepClone(value, hash)); }); return result; } if (target instanceof Set) { const result new Set(); hash.set(target, result); target.forEach((value) { result.add(deepClone(value, hash)); }); return result; } const result Array.isArray(target) ? [] : Object.create(Object.getPrototypeOf(target)); hash.set(target, result); Reflect.ownKeys(target).forEach((key) { result[key] deepClone(target[key], hash); }); return result; }这个版本做了哪些增强处理循环引用处理Date处理RegExp处理Map处理Set支持Symbol键Reflect.ownKeys保留原型Object.create(Object.getPrototypeOf(target))这时你的回答已经比较亮眼了。九、如果面试官继续深挖还能说什么1. 函数能不能深拷贝严格来说函数通常不做真正意义上的深拷贝。因为函数除了代码本身还有闭包环境、作用域链这些不是简单复制能完整还原的。通常做法是直接返回原函数引用或者在业务里避免“克隆函数”你可以这样答函数一般不做深拷贝通常保留引用因为它的闭包上下文无法被安全完整复制。这个表述很专业。2. 是否要拷贝原型链和属性描述符更严格的“完整克隆”会考虑原型链getter/setter可枚举性writable/configurable不可枚举属性例如可用Object.getOwnPropertyDescriptorsObject.defineProperties这是高阶点能提一句就很好。3. 深拷贝的性能问题一定要补充这句深拷贝本质是递归遍历数据层级深、对象大时开销会比较高所以实际开发中不能滥用。工程里不一定所有场景都要深拷贝。很多时候浅拷贝足够用不可变数据思想更好局部更新比整体深拷贝更优十、实际开发中常见方案你可以从场景角度说面试官会觉得你很落地。场景 1普通对象、接口数据快照可以用structuredClone或简单递归或 lodash 的cloneDeepimport cloneDeep from lodash/cloneDeep; const copy cloneDeep(data);如果提到 lodash也没问题但一定要补一句面试里我更倾向于手写核心实现库方法更多是工程实践方案。场景 2React / Vue 状态管理很多时候不建议无脑深拷贝整个 state因为成本高。更推荐只更新变化部分借助不可变数据方案React 中配合展开运算符、Immer 等这就从“题目”上升到了“工程”。十一、面试中如何回答更精彩下面给你一套高分回答结构。回答结构第一层先下定义先说清楚浅拷贝、深拷贝本质区别。第二层举例说明说明浅拷贝会共享嵌套引用深拷贝不会。第三层说实现方式从JSON到递归再到WeakMap处理循环引用。第四层说边界补充Date、RegExp、Map、Set、函数等特殊情况。第五层说工程实践说明深拷贝不能滥用要考虑性能和实际场景。十二、面试高分口语模板你可以直接背这版。版本一简洁但有深度浅拷贝和深拷贝的核心区别在于是否复制引用类型的“嵌套层”。浅拷贝只复制第一层属性如果某个属性是对象或数组复制的其实还是它的引用地址深拷贝则会递归复制所有层级得到一个完全独立的新对象。常见的浅拷贝方式有Object.assign、展开运算符以及数组的slice、concat。深拷贝最简单的方式是JSON.parse(JSON.stringify())但它只能处理普通对象和数组遇到函数、undefined、Symbol、Date、RegExp、Map、Set或循环引用时都会有问题。如果让我实现一个深拷贝我会用递归 WeakMap。递归负责遍历对象的每一层WeakMap用来缓存已经拷贝过的对象避免循环引用导致死递归。再进一步我会针对Date、RegExp、Map、Set等特殊类型做单独处理并通过Reflect.ownKeys支持Symbol属性。在实际开发中我不会无脑使用深拷贝因为它有性能成本。通常会根据业务场景决定是浅拷贝、局部更新还是使用像structuredClone、lodash.cloneDeep这样的成熟方案。版本二更适合高级一点的表达我理解深浅拷贝的本质是“值复制”和“引用共享”的边界问题。浅拷贝只解决第一层数据隔离嵌套对象仍然共享引用深拷贝则追求整个对象图的完全独立。实现上最基础的深拷贝是递归遍历对象但真正可用的实现必须考虑几个问题第一循环引用所以需要WeakMap做访问缓存第二特殊对象类型比如Date、RegExp、Map、Set第三键类型和原型问题比如Symbol键、原型链继承。所以一个完整深拷贝实现本质上是对 JS 对象系统的一次分类处理而不是单纯的递归。工程上我会权衡性能和必要性。因为深拷贝代价较高很多场景下局部更新或不可变数据方案更合适而不是把整个对象树都复制一遍。这版很像高级工程师说的话。十三、手写代码模板你面试时可以写这个版本比较稳。function deepClone(target, hash new WeakMap()) { if (target null || typeof target ! object) { return target; } if (hash.has(target)) { return hash.get(target); } if (target instanceof Date) { return new Date(target); } if (target instanceof RegExp) { return new RegExp(target.source, target.flags); } if (target instanceof Map) { const result new Map(); hash.set(target, result); target.forEach((value, key) { result.set(deepClone(key, hash), deepClone(value, hash)); }); return result; } if (target instanceof Set) { const result new Set(); hash.set(target, result); target.forEach((value) { result.add(deepClone(value, hash)); }); return result; } const result Array.isArray(target) ? [] : Object.create(Object.getPrototypeOf(target)); hash.set(target, result); Reflect.ownKeys(target).forEach((key) { result[key] deepClone(target[key], hash); }); return result; }十四、面试官可能追问的问题1.Object.assign是深拷贝吗不是是浅拷贝。2. 展开运算符是深拷贝吗不是对对象和数组都只是浅拷贝。3.JSON.stringify方案有什么缺陷会丢失undefined、function、symbol不能处理循环引用Date会变字符串不能处理Map、Set等。4. 为什么深拷贝要用WeakMap不用Map因为WeakMap的键是弱引用不会阻止垃圾回收更适合做对象缓存。5. 深拷贝函数怎么处理一般不真正克隆函数通常保留原引用。6. 深拷贝一定比浅拷贝好吗不一定。深拷贝更彻底但代价更高实际开发要看场景。十五、最后帮你浓缩成一句“面试结束语”你可以这样收尾所以我一般会把这个问题分成三层来理解第一层是概念上区分深浅拷贝第二层是实现上用递归和WeakMap解决嵌套和循环引用第三层是工程上权衡性能、兼容性和必要性而不是盲目追求“全量深拷贝”。深拷贝 / 浅拷贝 2 分钟背诵版面试答案浅拷贝和深拷贝的核心区别在于浅拷贝只复制对象的第一层属性如果属性值是对象、数组这类引用类型复制的其实还是引用地址深拷贝会递归复制所有层级让新对象和原对象完全独立互不影响。浅拷贝常见实现有Object.assign、展开运算符...以及数组的slice、concat但它们都只能拷贝第一层。深拷贝最简单的方式是JSON.parse(JSON.stringify(obj))它适合普通对象和数组但有明显缺陷不能处理undefined、function、symbolDate会变成字符串RegExp、Map、Set处理不好而且遇到循环引用会报错。如果让我手写一个深拷贝我会用递归 WeakMap。递归负责遍历每一层属性WeakMap用来缓存已经拷贝过的对象避免循环引用导致死递归。同时我会针对特殊对象做单独处理比如Date用new Date()RegExp用new RegExp()Map和Set需要遍历后重新构造再通过Reflect.ownKeys()兼容Symbol类型的 key在工程实践里我不会无脑用深拷贝因为它性能开销比较大。如果只是修改第一层数据浅拷贝就够了如果是复杂对象隔离才会考虑深拷贝如果运行环境支持也可以优先使用原生的structuredClone()。所以我理解这个问题不只是“会不会写递归”而是要从概念、实现、边界情况和工程取舍四个层面一起看。超短版 30 秒回答浅拷贝只拷贝第一层嵌套对象还是共享引用深拷贝会递归复制所有层级生成完全独立的新对象。浅拷贝常见方式有Object.assign和展开运算符。深拷贝可以用JSON.parse(JSON.stringify())但它无法处理函数、undefined、symbol、循环引用等问题。更完整的实现一般是用递归加WeakMap并单独处理Date、RegExp、Map、Set等类型。实际开发中我会根据场景权衡不会滥用深拷贝。