在 JavaScript 中使用结构化克隆()进行深度克隆

vanilla JavaScript 中的深度克隆早就应该使用了，而在 JavaScript 中深度克隆对象的下一个最佳方法是使用 spread (...) 运算符。 spread (...) 操作符只会创建对象的深层副本，直到级别 1。另一方面，嵌套对象遵循浅层副本的概念。

下面显示的是使用扩展 (...) 运算符深度克隆对象的示例：

const fictionalCharacter = {
  firstName: 'Sherlock',
  lastName: 'Holmes',
  age: 35,
  address: {
    addressLine1: '221B Baker Street',
    addressLine2: '',
    city: 'London',
    country: 'United Kingdom',
    postalCode: 'NW1 6XE'
  }
}

// Deep copy upto level 1
const clonedFictionalCharacter = { ...fictionalCharacter };

clonedFictionalCharacter.firstName = 'John';
clonedFictionalCharacter.lastName = 'Watson';

console.log(fictionalCharacter);
console.log(clonedFictionalCharacter);

// Shallow copy for nested address object
clonedFictionalCharacter.address.country = 'USA';

console.log(fictionalCharacter);
console.log(clonedFictionalCharacter);

在上面的示例中，firstName 和 lastName 获得了一个深层副本，这两个对象具有不同的值——fictionalCharacter 和 clonedFictionalCharacter。

但是，地址对象中的国家/地区键获得了浅拷贝，这意味着仅复制了引用，但它指向内存中的同一位置。 因此，两个对象中的国家/地区都更改为美国。

虽然我们有像 cloneDeep 这样的深度克隆方法，可以通过 loadash 等第三方 JS 库使用，或者通过编写 JSON.parse(JSON.stringify(originalObject)) 使用基于 JSON 的 hack，它支持对嵌套对象进行深度克隆，但现在 我们可以使用开箱即用的结构化克隆作为 JavaScript 的一部分，而无需在我们的任何 JS 应用程序中安装额外的依赖项，如 loadash。

下面显示的是使用结构化克隆（）方法深度克隆对象的示例：

const fictionalCharacter = {
  firstName: 'Sherlock',
  lastName: 'Holmes',
  age: 35,
  address: {
    addressLine1: '221B Baker Street',
    addressLine2: '',
    city: 'London',
    country: 'United Kingdom',
    postalCode: 'NW1 6XE'
  }
}

// Deep copy for nested objects using structuredClone()
const clonedFictionalCharacter = structuredClone(fictionalCharacter);

clonedFictionalCharacter.firstName = 'John';
clonedFictionalCharacter.lastName = 'Watson';
clonedFictionalCharacter.address.country = 'USA';

console.log(fictionalCharacter);
console.log(clonedFictionalCharacter);

克隆的结果是：

structuredClone() 方法还允许将原始值中的可转移对象转移而不是克隆到新对象。 转移对象与原始对象分离并附加到新对象； 它们不再可以在原始对象中访问。

大多数内置值可以使用结构化克隆（）进行复制。 将此方法与 RegExp 等原始类型一起使用仍有一些缺点。

结论

我们终于得到它了。 我希望你发现这篇文章很有用。 感谢您的阅读。 请随时提供您的意见、建议和任何其他可能有帮助的反馈。