JavaScript 从浅入深 100 题训练计划--（3）深拷贝实现

题目：手写深拷贝函数 deepClone，处理基本类型、对象、数组、循环引用、Date、RegExp 等

要求： 不能使用 JSON.parse(JSON.stringify())

 

相关知识点：

浅拷贝：创建一个新对象，这个对象仅复制原始对象的第一层属性。如果属性是基本类型，拷贝的是值；如果是引用类型，拷贝的是内存地址，新旧对象会共享同一块内存

深拷贝：创建一个全新的对象，递归复制所有层级的属性，新对象与原对象完全独立，修改新对象不会影响原对象

 

浅拷贝实现方式：

//  拓展运算符 ...
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { ...obj1 };

obj2.a = 100;      // obj1.a 不受影响
obj2.b.c = 999;    // ❌ obj1.b.c 也变成 999


// Object.assign()

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

obj2.b.c = 888;    // ❌ obj1.b.c 也被修改


//数组的浅拷贝方法
const arr1 = [1, 2, { a: 10 }];
const arr2 = arr1.concat();   // 或 arr1.slice()
arr2[2].a = 999;   // ❌ arr1[2].a 也被修改

　　

深拷贝实现方式：

const obj = {
a: 1,
b: { c: 2 },
d: undefined, // ❌ 丢失
e: Symbol('test'), // ❌ 丢失
f: function() {}, // ❌ 丢失
g: new Date(), // ❌ 变成字符串
h: /test/, // ❌ 变成空对象 {}
i: NaN, // ⚠️ 变成 null
j: Infinity, // ⚠️ 变成 null
};
const deep = JSON.parse(JSON.stringify(obj));

 

structuredClone()（现代浏览器推荐）

//  structuredClone()（现代浏览器推荐）


// 原生 API，2022 年起浏览器支持
const obj = { 
  a: 1, 
  b: { c: 2 },
  d: new Date(),
  e: new Set([1, 2, 3]),
  f: new Map([['x', 1]]),
  g: /test/i,
};

const cloned = structuredClone(obj);

// ✅ 支持：Object、Array、Date、RegExp、Map、Set、Blob、File
// ❌ 不支持：function、Symbol、Error
// ❌ 不支持：DOM 节点

 

const person = {
  name: 'john',
  age: 20,
  hobbit: {
    ball: 'footerball',
    book: 'vue'
  }
}
const deepClone = function (obj: any) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  if (obj instanceof Date) {
    return new Date(obj.getTime());
  }

  if (obj instanceof Array) {
    return obj.map(item => deepClone(item));
  }
  const cloneObj = {
  }
  if (typeof obj === 'object') {
    for (const key in obj) {
      console.log(key)
      cloneObj[key] = deepClone(obj[key])
    }
  }

  return cloneObj
}

console.log(deepClone(person), deepClone(person) === person)