手把手教你手写深拷贝 DeepClone

前端

2024-01-24 10:50:47

深拷贝：实现对象和数组的独立复制

什么是深拷贝？

在 JavaScript 中，对象和数组属于引用类型，意味着它们存储的是变量的地址，而非变量本身。因此，当我们给一个对象或数组赋值时，实际操作的是对象的地址，而不是对象本身。对副本进行修改时，源对象也会受到影响。

深拷贝能够将一个对象或数组的所有数据复制到另一个对象或数组中，而不会影响源对象或数组。它确保副本与源对象完全独立，对副本的修改不会影响源对象。

实现深拷贝函数 DeepClone

实现深拷贝函数 DeepClone 的关键在于递归复制对象或数组的所有数据。其步骤如下：

判断数据类型： 基本类型（如字符串、数字、布尔值等）直接返回。
对象或数组： 创建新对象或数组，并递归复制源对象或数组的所有数据。
函数： 复制函数代码到新函数中。
其他类型： 抛出错误。

DeepClone 函数代码示例：

function DeepClone(obj) {
  if (typeof obj === 'object') {
    if (Array.isArray(obj)) {
      return obj.map(item => DeepClone(item));
    } else {
      const newObj = {};
      for (const key in obj) {
        newObj[key] = DeepClone(obj[key]);
      }
      return newObj;
    }
  } else {
    return obj;
  }
}

使用示例

const originalObj = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    street: '123 Main Street'
  },
  hobbies: ['basketball', 'tennis', 'swimming']
};

const clonedObj = DeepClone(originalObj);

clonedObj.name = 'Jane';
clonedObj.address.city = 'Los Angeles';
clonedObj.hobbies.push('hiking');

console.log(originalObj);
// {
//   name: 'John',
//   age: 30,
//   address: {
//     city: 'New York',
//     street: '123 Main Street'
//   },
//   hobbies: ['basketball', 'tennis', 'swimming']
// }

console.log(clonedObj);
// {
//   name: 'Jane',
//   age: 30,
//   address: {
//     city: 'Los Angeles',
//     street: '123 Main Street'
//   },
//   hobbies: ['basketball', 'tennis', 'swimming', 'hiking']
// }