🚀 对象的深拷贝和浅拷贝的区别

📅 发布于 2026年1月 | 👤 作者：博主 | 🏷️ 标签：深拷贝, 浅拷贝, JavaScript, 对象拷贝, Web开发, 前端, 面试

欢迎来到我的博客文章！所有文章都是满满的前端干货，文章简明扼要。

一、核心区别

特性 浅拷贝 深拷贝
基本类型属性 ✅ 完全复制（值拷贝） ✅ 完全复制
引用类型属性（如对象、数组） ❌ 只复制引用地址（新旧对象共享同一内存） ✅ 递归创建全新副本（独立内存）
修改嵌套属性是否影响原对象？ ✅ 会互相影响 ❌ 完全隔离

三、浅拷贝的实现方法

1. 展开运算符（Spread Operator）

const obj = { a: 1, b: { c: 2 } };
const copy = { ...obj };
copy.b.c = 99; // 原对象 obj.b.c 也变成 99

2. Object.assign()

const copy = Object.assign({}, obj);

3. Array.prototype.slice() / concat()（仅数组）

const arr = [1, 2, [3, 4]];
const copy1 = arr.slice();
const copy2 = arr.concat();

四、深拷贝的实现方法

✅ 方法 1：JSON.parse(JSON.stringify())（简单场景）

const obj = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(obj));
仅适用于纯 JSON 数据（如 API 响应）。

方法 2：递归实现（推荐基础版）

function deepClone(obj) {
  // 处理 null、undefined、基本类型
  if (obj === null || typeof obj !== 'object') return obj;

  // 处理 Date
  if (obj instanceof Date) return new Date(obj);

  // 处理 RegExp
  if (obj instanceof RegExp) return new RegExp(obj);

  // 处理 Array
  const clone = Array.isArray(obj) ? [] : {};

  // 递归拷贝所有可枚举属性
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key]);
    }
  }

  return clone;
}

方法 4：使用第三方库（最可靠）

五、如何选择？

场景 推荐方法
简单数据（无函数、日期、循环引用） JSON.parse(JSON.stringify())
需要兼容老环境 + 基础对象 递归实现（方法2）
生产环境 + 复杂对象 Lodash _.cloneDeep 或 structuredClone
仅复制一层 展开运算符 {...obj}
← 返回首页