一条搞定对象的深度克隆！

前端

2023-12-10 07:25:12

引言

在 JavaScript 中，对象是一种复杂的数据类型，可以包含各种属性和方法。当我们需要复制一个对象时，可以使用两种方式：浅拷贝和深拷贝。浅拷贝只复制对象的引用，而深拷贝会复制对象及其所有属性的值，包括嵌套的对象。

在某些情况下，我们需要对对象进行深度克隆。例如，当我们想要修改一个对象而不影响原始对象时，或者当我们需要将一个对象传递给另一个函数或模块时，就需要进行深度克隆。

克隆过程

对象深度克隆的过程可以分为以下几个步骤：

首先，创建一个新的空对象。
然后，遍历原始对象的所有属性，并将其值复制到新的对象中。
如果属性的值是另一个对象，则递归地克隆该对象。
如果属性的值是函数，则复制函数的引用。
如果属性的值是 Symbol，则复制 Symbol 的值。

实现代码

function deepClone(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

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

  if (obj instanceof RegExp) {
    return new RegExp(obj.source, obj.flags);
  }

  if (obj instanceof Function) {
    return obj.bind(this);
  }

  if (obj instanceof Symbol) {
    return Symbol(obj.toString());
  }

  const newObj = Array.isArray(obj) ? [] : {};

  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      newObj[key] = deepClone(obj[key]);
    }
  }

  return newObj;
}

使用示例

const obj = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  },
  hobbies: ['coding', 'reading', 'hiking'],
  job: {
    title: 'Software Engineer',
    company: 'Acme Corporation'
  },
  salary: 100000,
  skills: ['JavaScript', 'Python', 'Java', 'C++'],
  favoriteColor: Symbol('blue')
};

const clonedObj = deepClone(obj);

console.log(clonedObj);

输出结果：

{
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  },
  hobbies: ['coding', 'reading', 'hiking'],
  job: {
    title: 'Software Engineer',
    company: 'Acme Corporation'
  },
  salary: 100000,
  skills: ['JavaScript', 'Python', 'Java', 'C++'],
  favoriteColor: Symbol('blue')
}