JavaScript深浅拷贝实现_对象复制方案

深拷贝能完全复制对象及嵌套属性,避免引用共享;浅拷贝仅复制一级属性,嵌套对象仍共享内存。1. 浅拷贝用Object.assign或扩展运算符,无法隔离嵌套引用;2. 深拷贝可用JSON方法(限纯数据)或递归实现(支持Date、RegExp、循环引用等);3. 实际推荐:简单场景用JSON,复杂类型用手写递归或Lodash的cloneDeep。

JavaScript中对象和数组的复制不是简单的赋值就能解决的,因为引用类型的数据存储的是地址,直接赋值会导致多个变量指向同一个内存空间。改变其中一个,其他变量也会受到影响。为了解决这个问题,就需要用到深拷贝和浅拷贝。

浅拷贝实现方式

浅拷贝是指创建一个新对象,这个对象有着原始对象属性的一级副本。如果属性是基本类型,拷贝的就是值;如果是引用类型,拷贝的则是内存地址。

常见实现方法:
  • Object.assign():可将多个源对象的所有可枚举属性复制到目标对象
  • 扩展运算符(...):语法简洁,适用于对象和数组
  • 手动遍历赋值:适合简单场景,逐个复制属性

示例:

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = Object.assign({}, obj1);
// 或 const obj2 = { ...obj1 };

obj2.b.c = 3;
console.log(obj1.b.c); // 输出 3,说明b是引用共享

可见,浅拷贝无法处理嵌套对象的独立复制。

深拷贝实现方式

深拷贝会递归地拷贝所有层级,确保新对象与原对象完全独立,互不影响。

常用方法包括:
  • JSON.stringify + JSON.parse:简单快捷,但有局限性
  • 递归实现:可控性强,能处理复杂类型
  • 借助第三方库(如 Lodash):功能完整,兼容性好

方法一:JSON 方法(适用于纯数据对象)

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = JSON.parse(JSON.stringify(obj1));

obj2.b.c = 3;
console.log(obj1.b.c); // 输出 2,成功隔离

限制:不能处理函数、undefined、Symbol、Date、RegExp 和循环引用。

方法二:手写递归深拷贝

function deepClone(target, map = new WeakMap()) {
  if (target === null || typeof target !== 'object') return target;

  // 处理日期
  if (target instanceof Date) return new Date(target);
  // 处理正则
  if (target instanceof RegExp) return new RegExp(target);

  // 防止循环引用
  if (map.has(target)) return map.get(target);

  const clone = Array.isArray(target) ? [] : {};
  map.set(target, clone);

  for (let key in target) {
    if (Object.prototype.hasOwnProperty.call(target, key)) {
      clone[key] = deepClone(target[key], map);
    }
  }

  return clone;
}

这个版本支持对象、数组、Date、RegExp,并使用 WeakMap 避免循环引用问题。

实际应用建议

根据使用场景选择合适方案:

  • 若对象结构简单且只包含基本类型或普通对象数组,用 JSON 方法最快
  • 需要完整支持各种类型时,推荐使用 递归 + WeakMap 实现
  • 项目中频繁使用,可引入 _.cloneDeep 等成熟工具

基本上就这些,掌握原理后可以根据需求灵活调整实现方式。不复杂但容易忽略细节,比如循环引用和特殊对象处理。