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

贪婪的君子2025-11-03 21:29

基础问答

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

答：拷贝，可以认为是赋值，对于 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) 方法将源对象的可枚举属性复制到目标对象，最后返回的是目标对象，使用这个方法时要注意：该方法仅拷贝对象自身属性（不包含继承属性），嵌套的对象仅拷贝引用，示例如下：
javascript 复制代码 
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（原对象被修改）
  1. 浅拷贝数组 Array.prototype.slice() 和 Array.prototype.concat()
    这两个方法返回的都是新数组（不在原数组上操作），示例如下：
javascript 复制代码 
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（原数组被修改）
  1. 扩展运算符 ...
    这个是 es6 新增的运算符，可以用于对象和数组的浅拷贝，语法相较于上面两种方式比较简单，示例如下：
javascript 复制代码 
// 对象浅拷贝
const obj = { a: 1, b: { c: 2 } };
const shallowObj = { ...obj };

// 数组浅拷贝
const arr = [1, [2, 3]];
const shallowArr = [...arr];

深拷贝

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

  1. 序列化方式拷贝 JSON.parse(JSON.stringify())
    利用 JSON 序列化与反序列化实现深拷贝，语法简单，多数时候够用。
javascript 复制代码 
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 类型
  • 对于日期对象和正则对象，有特殊处理，解析后可能得不到我们想要的结果
  1. 自定义实现拷贝函数
    思路：遍历对象，每一次遍历过程中判断是否是引用类型（对象或数组），如果是，则递归的调用拷贝函数，若不是，则直接赋值进行下一步。
javascript 复制代码 
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）

    完整的深拷贝示例：

javascript 复制代码 
function deepCopy(target, hash = new WeakMap()) {
  // 基本类型直接返回
  if (target === null || typeof target !== 'object') {
    return target;
  }

  // 处理循环引用：若已拷贝过，直接返回缓存的副本
  if (hash.has(target)) {
    return hash.get(target);
  }

  let copy;

  // 处理Date
  if (target instanceof Date) {
    copy = new Date(target);
    hash.set(target, copy);
    return copy;
  }

  // 处理RegExp
  if (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);

  // 遍历属性并递归拷贝
  // 处理Map
  if (target instanceof Map) {
    target.forEach((value, key) => {
      copy.set(key, deepCopy(value, hash));
    });
    return copy;
  }

  // 处理Set
  if (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. 实现一个浅拷贝函数？

    思路就是，直接遍历浅层对象（第一层），赋给新的对象。

javascript 复制代码 
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（嵌套对象共享引用）

  1. 深拷贝的时候，怎么特殊处理函数类型？

    函数属于引用类型，通常不需要深拷贝，因为函数体是改不了的，通常直接复制引用就行了。

    如果面试时强烈要求你深拷贝，可以直接使用 toString() + eval 实现，但可能随之而来的会将话题转到 eval 上来问词法作用域、严格模式、安全问题等等，一般是来转换个话题。

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

  • 前端分页，displayData 通常是直接通过 slice 获取原始列表的一部分数据，由于不需要操作，所以也不需要深拷贝
  • 接口传参，有时候我们为了方便，会在请求数据信息之后，直接将这个返回的对象赋值给某个地方，之后再提交的时候，由于接口要求的信息不同，我们有可能会直接操作这个返回对象，导致使用返回对象的地方出现变化，这种情况就需要深拷贝。
相关推荐
_安晓9 小时前
Rust 中精确大小迭代器（ExactSizeIterator）的深度解析与实践
java·前端·python
烛阴9 小时前
从create到yield：Lua协程完全上手指南
前端·lua
薛一半9 小时前
Vue3的Pinia详解
前端·javascript·vue.js
浅影歌年10 小时前
vue3模块中引用公共css变量文件
前端
盼哥PyAI实验室11 小时前
从搭建到打磨：我的纯前端个人博客开发复盘
前端·javascript
前端初见11 小时前
2025前端面试题大合集
前端
用户9047066835711 小时前
vue3.5新特性——useTemplateRef
前端
嘉琪00112 小时前
vue3+ts面试题（一）JSX，SFC
前端·javascript·react.js
何贤12 小时前
🪐 行星科技概念官网！Hero Section 回归！（Three.js ✨）
前端·javascript·three.js
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04《大数据技术原理与应用》实验报告三 熟悉HBase常用操作05Linux下V2Ray安装配置指南06安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）07NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南08GitLab 零基础入门指南：从安装到项目管理全流程09jdk21下载、安装（Windows、Linux、macOS）10在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）