javascript如何深度拷贝对象？浅拷贝和深拷贝的区别是什么？

在javascript开发过程中，对象的拷贝操作十分常见，很多开发者容易混淆浅拷贝和深拷贝的概念，也不清楚如何实现可靠的对象深度拷贝。理解两者的差异并掌握对应的实现方法，能够有效避免开发中出现数据互相干扰的问题。

浅拷贝和深拷贝的核心区别

要理解两种拷贝的差异，首先需要明确javascript中数据类型的存储方式。基本类型（如number、string、boolean）存储在栈内存中，引用类型（如object、array）的引用地址存储在栈内存，实际数据存储在堆内存中。

浅拷贝的特点

浅拷贝只会复制对象的第一层属性：如果属性是基本类型，会直接复制值；如果属性是引用类型，只会复制引用地址，不会复制堆内存中的实际数据。因此拷贝后的对象和原对象的引用类型属性指向同一个堆内存地址，修改其中一个对象的引用类型属性，另一个对象也会受到影响。

常见的浅拷贝实现方式有Object.assign()、扩展运算符...等，以下是浅拷贝的示例：

// 原对象
const originObj = {
  name: '测试对象',
  info: {
    age: 20,
    hobby: ['读书', '运动']
  }
};

// 使用扩展运算符实现浅拷贝
const shallowCopyObj = { ...originObj };

// 修改拷贝对象的引用类型属性
shallowCopyObj.info.age = 25;
shallowCopyObj.info.hobby.push('旅行');

console.log(originObj.info.age); // 输出25，原对象的age被修改
console.log(originObj.info.hobby); // 输出["读书", "运动", "旅行"]，原对象的hobby被修改

深拷贝的特点

深拷贝会递归复制对象的所有层级属性，无论是基本类型还是引用类型，都会重新创建一份完全独立的数据。拷贝后的对象和原对象没有任何关联，修改任意一方的属性都不会影响另一方。

以下是深拷贝的对比示例：

// 原对象
const originObj = {
  name: '测试对象',
  info: {
    age: 20,
    hobby: ['读书', '运动']
  }
};

// 假设deepClone是深拷贝函数
const deepCopyObj = deepClone(originObj);

// 修改拷贝对象的引用类型属性
deepCopyObj.info.age = 25;
deepCopyObj.info.hobby.push('旅行');

console.log(originObj.info.age); // 输出20，原对象的age未被修改
console.log(originObj.info.hobby); // 输出["读书", "运动"]，原对象的hobby未被修改

javascript实现深度拷贝的常见方法

方法一：JSON序列化反序列化

这是最简单的深拷贝实现方式，核心思路是将对象转换为JSON字符串，再将字符串解析为新的对象。该方法仅适用于对象中只包含可JSON序列化的类型（如number、string、boolean、array、object、null），如果对象包含函数、undefined、Symbol等类型，这些属性会丢失。

function jsonDeepClone(obj) {
  // 先将对象转为JSON字符串，再解析为新的对象
  return JSON.parse(JSON.stringify(obj));
}

// 测试示例
const testObj = {
  name: '测试',
  age: 18,
  hobby: ['吃饭', '睡觉'],
  info: {
    address: '北京'
  }
};

const clonedObj = jsonDeepClone(testObj);
clonedObj.info.address = '上海';
console.log(testObj.info.address); // 输出北京，原对象未被修改

方法二：递归手写深拷贝函数

手写递归深拷贝可以处理更多类型的属性，能够兼容函数、undefined等特殊类型，适用性更强。实现思路是遍历对象的每个属性，判断属性类型：如果是基本类型直接返回，如果是引用类型则递归调用拷贝函数，直到所有属性都被复制。

function deepClone(obj, map = new WeakMap()) {
  // 处理基本类型和null
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  // 处理循环引用，如果已经拷贝过该对象直接返回缓存的结果
  if (map.has(obj)) {
    return map.get(obj);
  }

  // 处理数组和对象
  const cloneObj = Array.isArray(obj) ? [] : {};

  // 将当前对象存入缓存
  map.set(obj, cloneObj);

  // 遍历对象的所有自有属性
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      // 递归拷贝每个属性
      cloneObj[key] = deepClone(obj[key], map);
    }
  }

  return cloneObj;
}

// 测试示例
const testObj = {
  name: '测试',
  age: 18,
  hobby: ['吃饭', '睡觉'],
  info: {
    address: '北京'
  },
  sayHi: function() {
    console.log('hi');
  }
};
// 添加循环引用
testObj.self = testObj;

const clonedObj = deepClone(testObj);
clonedObj.info.address = '上海';
clonedObj.hobby.push('打游戏');
console.log(testObj.info.address); // 输出北京
console.log(testObj.hobby); // 输出["吃饭", "睡觉"]
clonedObj.sayHi(); // 输出hi，函数属性被正常拷贝

方法三：使用第三方库的深拷贝方法

如果项目中已经引入了lodash等工具库，可以直接使用库提供的深拷贝方法，这类方法经过了大量场景的测试，兼容性和稳定性更好，能够处理更多边缘情况。例如lodash的_.cloneDeep()方法，使用方式如下：

// 假设已经引入lodash
const _ = require('lodash');

const originObj = {
  name: '测试对象',
  info: {
    age: 20
  }
};

const clonedObj = _.cloneDeep(originObj);
clonedObj.info.age = 30;
console.log(originObj.info.age); // 输出20，原对象未被修改

不同深拷贝方案的适用场景

如果拷贝的对象仅包含可JSON序列化的基础类型，且不需要处理循环引用，使用JSON序列化反序列化的方式最简单高效；如果需要处理包含函数、undefined等复杂类型，或者需要兼容循环引用场景，手写递归深拷贝函数更合适；如果项目已经引入了成熟的工具库，直接使用库提供的深拷贝方法可以减少代码量，同时保证稳定性。

在实际开发中，需要根据对象的具体结构和业务需求选择对应的拷贝方案，避免不必要的性能消耗或者数据错误。

javascript深度拷贝浅拷贝对象拷贝修改时间：2026-06-14 03:57:19