【每日一面】实现一个深拷贝函数

基础问答

问：知道浅拷贝和深拷贝吗？为什么要用深拷贝？

答：拷贝，可以认为是赋值，对于 JavaScript 中的基础类型，如 string, number, null, boolean, undefined, symbol 等，在赋值给一个变量的时候，是直接拷贝值给变量，而对于引用类型，如 object, array, function 等，则会拷贝其引用（地址）。
使用深拷贝，是为了避免操作公共对象的时候，影响到其他使用该对象的组件。

扩展延伸

一个拷贝函数，可以直接评估出来你对 JavaScript 基础能力掌握水平。

在理解浅拷贝和深拷贝前，需先明确拷贝的本质。在 JavaScript 中数据类型分为基本类型（string、number、boolean、null、undefined、symbol、bigint）和引用类型（object、array、function 等），这两种类型在内存中存储方式是不一样的：

• 基本类型：值直接存储在栈内存中，赋值时直接拷贝值。
• 引用类型：值存储在堆内存中，栈内存仅存储指向堆内存的引用地址，赋值时仅拷贝引用地址（而非实际值）。

所以，根据这两种存储方式很容易想到，浅拷贝和深拷贝的区别就在于 是否递归复制嵌套的引用类型。 这里给出一个简单的定义：

• 浅拷贝（Shallow Copy）：仅复制对象的表层属性，若属性值为引用类型（如嵌套对象、数组），则拷贝的是引用地址（引用地址就是表层属性），新旧对象共享嵌套数据。
• 深拷贝（Deep Copy）：递归复制对象的所有属性，包括嵌套的引用类型，新旧对象完全独立，修改拷贝后的对象不会影响原始对象的数据。

实现方式

浅拷贝

浅拷贝适用于无嵌套引用类型或无需独立嵌套数据的场景，实现方式简单，性能开销小。

1. 浅拷贝对象 Object.assign()
Object.assign(target, ...sources) 方法将源对象的可枚举属性复制到目标对象，最后返回的是目标对象，使用这个方法时要注意：该方法仅拷贝对象自身属性（不包含继承属性），嵌套的对象仅拷贝引用，示例如下：

const obj = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, obj);// 测试基本类型属性：修改不影响原对象
shallowCopy.a = 100;
console.log(obj.a); // 输出：1（原对象不变）// 测试嵌套对象：修改会影响原对象
shallowCopy.b.c = 200;
console.log(obj.b.c); // 输出：200（原对象被修改）

2. 浅拷贝数组 Array.prototype.slice() 和 Array.prototype.concat()
   这两个方法返回的都是新数组（不在原数组上操作），示例如下：

const arr = [1, [2, 3]];
const shallowCopy1 = arr.slice(0); // 方法1：slice
const shallowCopy2 = [].concat(arr); // 方法2：concat// 测试基本类型元素：修改不影响原数组
shallowCopy1[0] = 100;
console.log(arr[0]); // 输出：1（原数组不变）// 测试嵌套数组：修改会影响原数组
shallowCopy2[1][0] = 200;
console.log(arr[1][0]); // 输出：200（原数组被修改）

3. 扩展运算符 ...
   这个是 es6 新增的运算符，可以用于对象和数组的浅拷贝，语法相较于上面两种方式比较简单，示例如下：

// 对象浅拷贝
const obj = { a: 1, b: { c: 2 } };
const shallowObj = { ...obj };// 数组浅拷贝
const arr = [1, [2, 3]];
const shallowArr = [...arr];

深拷贝

深拷贝适用于包含嵌套引用类型且需要完全独立副本的场景，实现复杂度较高，需处理递归、循环引用等边界情况。属于前端八股面试必须准备的一个问题。

1. 序列化方式拷贝 JSON.parse(JSON.stringify())
   利用 JSON 序列化与反序列化实现深拷贝，语法简单，多数时候够用。

const obj = { a: 1, b: { c: 2 }, d: [3, 4] };
const deepCopy = JSON.parse(JSON.stringify(obj));// 测试嵌套对象：修改不影响原对象
deepCopy.b.c = 200;
console.log(obj.b.c); // 输出：2（原对象不变）

但是这个方式有一定的局限性：

• 不能拷贝函数（JSON不支持）
• 不能拷贝 undefined ，Symbol 类型
• 不能处理循环引用
• 不支持 BigInt 类型
• 对于日期对象和正则对象，有特殊处理，解析后可能得不到我们想要的结果

2. 自定义实现拷贝函数
   思路：遍历对象，每一次遍历过程中判断是否是引用类型（对象或数组），如果是，则递归的调用拷贝函数，若不是，则直接赋值进行下一步。

function deepCopy(target) {// 基本类型直接返回if (target === null || typeof target !== 'object') {return target;}// 区分数组和对象let copy;if (Array.isArray(target)) {copy = [];} else {copy = {};}// 遍历属性并递归拷贝for (const key in target) {if (target.hasOwnProperty(key)) {// 递归处理引用类型copy[key] = deepCopy(target[key]);}}return copy;
}// 测试
const obj = { a: 1, b: { c: 2 }, d: [3, 4] };
const copyObj = deepCopy(obj);
copyObj.b.c = 200;
console.log(obj, copyObj, obj === copyObj, obj.b.c); // 对比输出结果，可以发现两个对象是不同的
copyObj.d[0] = 300;
console.log(obj, copyObj, obj === copyObj, obj.d[0]); // 同上

但是这个没有处理边界情况，主要是两种情况：

• 循环应用
  循环引用指对象引用自身（如 obj.self = obj），直接递归会导致无限循环栈溢出。可以用 WeakMap 存储已拷贝的对象，避免在递归过程中重复拷贝。

• 特殊对象
  类似于 Date，RegExp 的对象，需要我们手动特殊处理（根据类型直接 new）
  完整的深拷贝示例：

function deepCopy(target, hash = new WeakMap()) {// 基本类型直接返回if (target === null || typeof target !== 'object') {return target;}// 处理循环引用：若已拷贝过，直接返回缓存的副本if (hash.has(target)) {return hash.get(target);}let copy;// 处理Dateif (target instanceof Date) {copy = new Date(target);hash.set(target, copy);return copy;}// 处理RegExpif (target instanceof RegExp) {copy = new RegExp(target.source, target.flags);copy.lastIndex = target.lastIndex; // 保留lastIndex属性hash.set(target, copy);return copy;}// 处理数组和对象if (Array.isArray(target)) {copy = [];} else {// 处理普通对象（包括自定义对象）copy = new target.constructor(); // 保持原型链}// 缓存已拷贝的对象，解决循环引用hash.set(target, copy);// 遍历属性并递归拷贝// 处理Mapif (target instanceof Map) {target.forEach((value, key) => {copy.set(key, deepCopy(value, hash));});return copy;}// 处理Setif (target instanceof Set) {target.forEach(value => {copy.add(deepCopy(value, hash));});return copy;}// 处理普通对象和数组的属性for (const key in target) {if (target.hasOwnProperty(key)) {copy[key] = deepCopy(target[key], hash);}}return copy;
}// 测试循环引用
const obj = { name: 'test' };
obj.self = obj; // 循环引用
const copyObj = deepCopy(obj);
console.log(copyObj.self === copyObj, copyObj === obj, obj, copyObj);// 测试特殊对象
const date = new Date();
const copyDate = deepCopy(date);
console.log(copyDate instanceof Date, copyDate === date, date, copyDate);const reg = /abc/gim;
reg.lastIndex = 10;
const copyReg = deepCopy(reg);
console.log(copyReg, reg);

差异对比

这里我简单总结一个表来让你快速理解二者异同：

对比方向	浅拷贝	深拷贝
拷贝层级	仅拷贝对象表层属性	递归拷贝所有层级（包括嵌套的引用类型）
内存占用	较小（共享嵌套对象的内存）	较大（完全复制所有数据，独立占用内存）
性能开销	低（无需递归，操作简单）	高（递归处理，需处理边界情况）
拷贝前后对象的独立性	表层属性独立，嵌套引用类型共享	完全独立，新旧对象无任何关联
适用场景	无嵌套引用类型、性能优先、无需独立嵌套数据的情况，简单来说，不需要前后独立的，都可以直接用浅拷贝	有嵌套引用类型、需完全隔离数据、修改不能相互影响的情况
实现复杂度	简单（可通过原生方法或简单遍历实现）	复杂（需处理递归、循环引用、特殊对象类型）

面试追问

1. 直接使用 = 赋值算浅拷贝还是深拷贝？
   都不是，赋值运算符只是将一个值或者引用赋给一个变量，对于基本类型，赋值运算符是直接复制这个值给变量，对于引用类型，赋值运算符则是复制引用给变量，而非对象本身。
   这个和浅拷贝的定义略有差异。

2. 实现一个浅拷贝函数？
   思路就是，直接遍历浅层对象（第一层），赋给新的对象。

function shallowCopy(target) {// 区分目标是数组还是对象if (Array.isArray(target)) {const copy = [];for (let i = 0; i < target.length; i++) {copy[i] = target[i];}return copy;} else if (target !== null && typeof target === 'object') {const copy = {};// 仅拷贝自身可枚举属性for (const key in target) {if (target.hasOwnProperty(key)) {copy[key] = target[key];}}return copy;} else {// 基本类型直接返回（无需拷贝）return target;}
}// 测试
const obj = { a: 1, b: { c: 2 }, d: [3, 4] };
const copyObj = shallowCopy(obj);
copyObj.b.c = 200;
console.log(obj.b.c); // 输出：200（嵌套对象共享引用）

3. 深拷贝的时候，怎么特殊处理函数类型？
   函数属于引用类型，通常不需要深拷贝，因为函数体是改不了的，通常直接复制引用就行了。
   如果面试时强烈要求你深拷贝，可以直接使用 toString() + eval 实现，但可能随之而来的会将话题转到 eval 上来问词法作用域、严格模式、安全问题等等，一般是来转换个话题。

4. 实际开发的时候，有经常用这两种模式吗？举个场景说明一下

• 前端分页，displayData 通常是直接通过 slice 获取原始列表的一部分数据，由于不需要操作，所以也不需要深拷贝
• 接口传参，有时候我们为了方便，会在请求数据信息之后，直接将这个返回的对象赋值给某个地方，之后再提交的时候，由于接口要求的信息不同，我们有可能会直接操作这个返回对象，导致使用返回对象的地方出现变化，这种情况就需要深拷贝。