JS实现深拷贝与浅拷贝的几种方式_javascript技巧_技术教程

浅拷贝只复制对象第一层属性，引用类型共享内存，常用方法有Object.assign、扩展运算符和slice；深拷贝递归复制所有层级，完全独立，可使用JSON.parse(JSON.stringify())、手写递归函数或structuredClone()实现，后者支持更多数据类型但需考虑兼容性。

在JavaScript中，拷贝对象是一个常见需求。根据是否复制对象内部的引用类型数据，分为浅拷贝和深拷贝。理解它们的区别并掌握实现方式，对开发非常有帮助。

浅拷贝的实现方式

浅拷贝只复制对象的第一层属性，如果属性是引用类型（如数组、对象），则复制的是引用地址，而不是创建新的对象。

1. 使用 Object.assign()

Object.assign() 可以将一个或多个源对象的所有可枚举属性复制到目标对象。

示例：

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = Object.assign({}, obj1);
obj2.b.c = 3;
console.log(obj1.b.c); // 输出 3，说明是引用共享

2. 使用扩展运算符 (...)

扩展运算符是目前最简洁的浅拷贝方法。

示例：

const obj1 = { x: 1, y: { z: 2 } };
const obj2 = { ...obj1 };
obj2.y.z = 4;
console.log(obj1.y.z); // 输出 4，仍然是引用共享

3. 使用 Array.prototype.slice()（仅适用于数组）

对于数组，slice() 方法可以快速实现浅拷贝。

示例：

const arr1 = [1, 2, { val: 3 }];
const arr2 = arr1.slice();
arr2[2].val = 5;
console.log(arr1[2].val); // 输出 5

深拷贝的实现方式

深拷贝会递归复制对象的所有层级，新旧对象完全独立，互不影响。

1. 使用 JSON.parse(JSON.stringify())

这是最简单快捷的深拷贝方法，适用于纯数据对象（没有函数、undefined、Symbol、Date等特殊类型）。

示例：

const obj1 = { name: 'Tom', info: { age: 20 } };
const obj2 = JSON.parse(JSON.stringify(obj1));
obj2.info.age = 25;
console.log(obj1.info.age); // 输出 20，互不影响

注意：该方法无法处理函数、正则、Date、undefined 等值，且会忽略不可枚举属性和Symbol。

2. 手写递归实现深拷贝

通过递归判断属性类型，手动处理对象和数组，是最通用的方法。

示例：

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);
  const cloned = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloned[key] = deepClone(obj[key]);
    }
  }
  return cloned;
}

这种方式能处理大部分情况，包括嵌套对象、数组、Date、RegExp等。

3. 使用 structuredClone()（现代浏览器支持）

HTML标准提供的 structuredClone() 方法可以直接实现深拷贝，支持更多类型（如Date、RegExp、Map、Set等）。

示例：

const obj1 = { date: new Date(), data: { value: 1 } };
const obj2 = structuredClone(obj1);
obj2.data.value = 2;
console.log(obj1.data.value); // 输出 1

注意：不支持函数和DOM节点，兼容性需考虑（Chrome 98+ 支持）。