对象克隆：不同寻常的实用指南

2023-11-14 09:53:33

创建对象的副本：JavaScript 中的对象克隆

简介

在 JavaScript 中，对象是一种强大的数据结构，用于存储和组织数据。然而，有时我们需要创建对象的副本，以便我们可以修改或操作副本而不会影响原始对象。本文将探讨 JavaScript 中创建对象副本的三种常用方法。

为什么需要克隆对象？

在 JavaScript 中，使用等号（=）分配对象只会创建一个指向原始对象的引用，而不是创建一个新的副本。这意味着对副本所做的任何更改也会反映在原始对象上。当我们希望对对象进行修改而不影响原始对象时，例如在表单验证或创建对象列表时，这是一个问题。

方法 1：Object.assign()

Object.assign() 方法用于将一个或多个源对象的属性复制到目标对象中。它接受两个参数：目标对象和要克隆的对象。该方法只复制可枚举属性，即具有 Symbol 键的属性不会被复制。

代码示例：

const originalObject = {
  name: 'John Doe',
  age: 30
};

const clonedObject = Object.assign({}, originalObject);

clonedObject.name = 'Jane Doe';

console.log(originalObject); // { name: 'John Doe', age: 30 }
console.log(clonedObject); // { name: 'Jane Doe', age: 30 }

*方法 2：扩展运算符 (...)*

扩展运算符 (...) 可用于将对象展开为一系列键值对，然后将其复制到目标对象中。它是一个简便且易于使用的选项，特别适用于需要创建嵌套对象副本的情况。

代码示例：

const originalObject = {
  name: 'John Doe',
  age: 30
};

const clonedObject = {...originalObject};

clonedObject.name = 'Jane Doe';

console.log(originalObject); // { name: 'John Doe', age: 30 }
console.log(clonedObject); // { name: 'Jane Doe', age: 30 }

方法 3：JSON.parse() 和 JSON.stringify()

这种方法涉及将对象转换为 JSON 字符串，然后使用 JSON.parse() 将其解析回一个新的对象。它将创建一个包含原始对象相同值的新对象，但没有对原始对象的引用。

代码示例：

const originalObject = {
  name: 'John Doe',
  age: 30
};

const clonedObject = JSON.parse(JSON.stringify(originalObject));

clonedObject.name = 'Jane Doe';

console.log(originalObject); // { name: 'John Doe', age: 30 }
console.log(clonedObject); // { name: 'Jane Doe', age: 30 }

选择最佳方法

选择最适合你的场景的方法取决于几个因素，例如对象的复杂性、所需的性能和可读性偏好。以下是每个方法的优缺点：

方法	优点	缺点
`Object.assign()`	易于使用，支持可枚举属性	不支持不可枚举属性
扩展运算符 (...)	简洁、支持嵌套对象	不支持不可枚举属性
`JSON.parse()` 和 `JSON.stringify()`	支持所有属性，包括不可枚举属性	性能较低，难以阅读