当前位置：首页 > news >正文

JavaScript 深拷贝：手写一个简单可靠的 `deepClone` 函数

news 来源：原创 2025/5/9 21:18:13

1. 为什么需要这个 `deepClone` 函数？

在 JavaScript 中，直接赋值对象或数组时，只是复制了引用（浅拷贝），修改新对象会影响原对象。例如：

const original = { a: 1, b: { c: 2 } };
const shallowCopy = original; // 浅拷贝
shallowCopy.b.c = 3;

console.log(original.b.c); // 3（原对象被意外修改）

深拷贝（Deep Clone） 可以彻底复制对象及其嵌套结构，使新旧对象完全独立。

2. `deepClone` 函数解析

function deepClone(obj) {
  // 1. 处理基本类型（null, number, string, boolean, undefined, symbol）
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  // 2. 处理 Date 对象
  if (obj instanceof Date) {
    return new Date(obj);
  }

  // 3. 处理 RegExp 对象
  if (obj instanceof RegExp) {
    return new RegExp(obj);
  }

  // 4. 初始化克隆对象（数组或普通对象）
  const cloneObj = Array.isArray(obj) ? [] : {};

  // 5. 递归拷贝所有属性
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloneObj[key] = deepClone(obj[key]);
    }
  }

  return cloneObj;
}

关键点解析

基本类型直接返回
null、number、string、boolean、undefined、Symbol 等直接返回，因为它们是不可变的。
处理 Date 和 RegExp
这两种对象需要特殊处理，否则直接赋值会导致引用共享。
递归拷贝对象属性
遍历对象的所有自有属性（hasOwnProperty 过滤原型链属性），递归调用 deepClone 确保嵌套结构也被复制。

3. 使用示例

const original = {
  name: "Alice",
  age: 25,
  birthDate: new Date("1998-05-20"),
  skills: ["JavaScript", "React"],
  address: {
    city: "Beijing",
    zip: "100000"
  },
  regex: /hello/gi
};

const cloned = deepClone(original);

// 修改克隆对象，不影响原对象
cloned.age = 26;
cloned.skills.push("Vue");
cloned.address.city = "Shanghai";

console.log(original.age); // 25（未受影响）
console.log(original.skills); // ["JavaScript", "React"]（未受影响）
console.log(original.address.city); // "Beijing"（未受影响）