不要再问我JS Clone的问题了

2023-12-20 12:21:25

用clone()方法

JavaSript的clone()方法可以快速轻松地复制对象。然而，重要的是要注意，clone()只进行浅拷贝，这意味着它只复制对象本身，而不复制对象的属性。

const original = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA",
    zip: "12345"
  }
};

const clone = original.clone();

clone.name = "Jane";
clone.address.street = "456 Elm St";

console.log(original);
// { name: 'John', age: 30, address: { street: '456 Elm St', city: 'Anytown', state: 'CA', zip: '12345' } }

正如您所看到的，对clone的更改也会反映在original中，这是因为clone()只复制了对象的引用，而不是属性值本身。

使用深度优先搜索算法

为了创建一个深度克隆，您需要使用深度优先搜索算法。该算法将遍历对象及其所有属性，并创建一个包含所有原始值的新对象。

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

  const clone = {};

  for (const key in obj) {
    clone[key] = deepClone(obj[key]);
  }

  return clone;
}

const original = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA",
    zip: "12345"
  }
};

const clone = deepClone(original);

clone.name = "Jane";
clone.address.street = "456 Elm St";

console.log(original);
// { name: 'John', age: 30, address: { street: '123 Main St', city: 'Anytown', state: 'CA', zip: '12345' } }

正如您所看到的，对clone的更改不会反映在original中，这是因为deepClone()创建了一个新对象，该对象包含原始值的新副本。

使用JSON

另一种创建深度克隆的方法是使用JSON。JSON.stringify()方法将对象转换为JSON字符串，然后JSON.parse()方法可以将JSON字符串转换回对象。

const original = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA",
    zip: "12345"
  }
};

const clone = JSON.parse(JSON.stringify(original));

clone.name = "Jane";
clone.address.street = "456 Elm St";

console.log(original);
// { name: 'John', age: 30, address: { street: '123 Main St', city: 'Anytown', state: 'CA', zip: '12345' } }