📜  js 克隆深度 - Javascript (1)

📅  最后修改于: 2023-12-03 15:02:22.956000             🧑  作者: Mango

JS克隆深度 - JavaScript

在JavaScript中,对象的克隆通常可以使用Object.assign或扩展运算符(...)实现。然而,在某些情况下,这些方法可能不是深度克隆,也就是说,它们只能创建原始对象的浅层副本,而不是对象内部引用和嵌套对象的深层副本。

浅层克隆

浅层克隆是一种创建原始对象的副本的方法,但是在对象中包含的引用类型(如数组和对象)仅复制它们的引用。这意味着对原始对象和副本对象中的引用对象所做出的更改都将影响相同的实例。

使用扩展运算符

可以使用扩展运算符(...)来浅层克隆对象,如下所示:

const original = { name: 'John', address: { city: 'San Francisco' } };
const copy = { ...original };
使用Object.assign

还可以使用Object.assign方法来浅层克隆对象,这个方法可以将一个或多个源对象的值复制到目标对象中,并返回目标对象的引用,如下所示:

const original = { name: 'John', address: { city: 'San Francisco' } };
const copy = Object.assign({}, original);
深层克隆

深层克隆是一种创建对象及其整个层次结构的副本的方法,这意味着所有对象及其引用的对象,数组以及嵌套对象都将完全复制,并具有相同的值,但是它们是完全独立的实例。

自定义函数 - 递归克隆

可以使用自定义递归函数来深度克隆对象,递归函数将循环遍历对象的每个属性,如果属性的值仍然是对象,则递归函数将继续迭代到下一层级,并在相应位置创建新的对象,如下所示:

function deepClone(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  let clone = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key]);
    }
  }
  return clone;
}
JSON.parseJSON.stringify

还可以使用JSON.parseJSON.stringify方法来深度克隆对象,这个方法将对象转化为字符串再转化为对象,在这个过程中实现了深度克隆,如下所示:

const original = { name: 'John', address: { city: 'San Francisco' } };
const copy = JSON.parse(JSON.stringify(original));

然而,这种方法有一些限制:

  • 如果对象包含非JSON序列化的属性,例如函数(成员函数),这些属性将无法包含在克隆副本中。
  • 如果对象包含循环引用,例如A引用B,B引用A等循环引用关系,这些引用将被忽略,导致错误或死循环。

需要注意的是,在深度克隆时,为了防止死循环,递归函数在复制每个对象时应该检查是否已将其添加到对象树中。这可以通过使用一个数组来记录对象引用及其副本来解决。

以上是JS克隆深度的介绍及各种方式的具体实现方法。