如何在 JavaScript 中克隆对象?
对象是指具有属性和类型的实体。例如，将人视为一个对象，它具有身高、体重、年龄和薪水等属性。类似地，JavaScript 也有对象及其定义的属性。
JavaScript 中的对象是一种复杂的数据类型，它可以存储各种数据类型。让我们考虑下面的这个例子
const employee = {
name : 'Dhoni',
age : 41,
height : 5.8,
}
使用 JavaScript 克隆对象
一般来说，"克隆"被定义为复制原始对象，其中包含相同的属性。这些 JavaScript 对象通过引用存储在内存中。在内存中，两个变量可以指向同一个对象。如果我们尝试修改一个对象变量，就会对其他变量产生影响。
const copyemp = employee; console.log(copyemp);
在上述情况下，我们不能简单地这样写来克隆对象，原因是 employee 是一个对象。
copyemp.name = 'Kohli'; copyemp.age = 34; Console.log(copyemp.name); // Kohli Console.log(employee.name); //Kohli
在上述情况下，copyemp 的变量与 employee 对象的变量具有相同的值。由于此处未设置目标，对 copyemp 对象值所做的更改也已应用于 employee 对象。
我们已经看到两个对象的变化，因为 copyemp 和 employee 引用的是同一个对象。
可以通过以下方式克隆对象，它们是
- 使用 object.assign()。
- 使用扩展语法。
- 遍历每个属性并将它们复制到新对象。
使用 Object.assign()
JavaScript 的"Object.assign()"方法将创建一个具有原始对象所有属性的重复对象并返回它。要实现，需要遵循以下步骤。
如果我们使用 Object.assign() 来克隆一个对象。
声明一个 对象，将其视为父对象
将属性分配给父对象
创建 克隆对象 并使用 Object.assign() 对其进行分配。
示例
在此示例中，我们使用了方法 Object.assign()。将其与 stringify() 一起使用，我们可以获取 JSON 对象的内容 −
<!DOCTYPE html> <html> <head> <script> const employee = { name: 'Dhoni', age: 41, role: 'Manager', salary: 80000, } const copyemp = Object.assign({}, employee); document.write(JSON.stringify(copyemp), "<br>"); copyemp.name = 'Kohli'; copyemp.age = 34; document.write(JSON.stringify(copyemp.name), "<br>"); document.write(JSON.stringify(copyemp.age), "<br>"); document.write(JSON.stringify(employee.name), "<br>"); document.write(JSON.stringify(employee.age)); </script> </head> </html>
输出
上述脚本的输出将是 −
{ name: 'Dhoni', age: 41, role: 'Manager', salary: 80000 }
"Kohli"
34
"Dhoni"
41
使用 Spread 语法 (…)
"Spread"运算符可有效地将对象或数组的所有属性复制到新对象或数组中。要实现，我们需要遵循以下步骤 -
如果我们使用 (…) 语法来克隆对象。
声明一个 对象，将其视为父对象
将属性分配给父对象
创建 克隆对象 并使用 {… 父对象} 分配它。
示例
在此示例中，我们使用方法 "扩展语法"(…)。此扩展语法也用于从父对象复制属性。
<!DOCTYPE html> <html> <head> <script> const employee = { name: 'Dhoni', age: 41, role: 'Manager', salary: 80000, } // cloning the object const copyemp = { ... employee} document.write(JSON.stringify(copyemp), "<br>"); // modifying the value of copyemp copyemp.name = 'Peter'; copyemp.age = 34; document.write(JSON.stringify(copyemp.name), "<br>"); document.write(JSON.stringify(copyemp.age), "<br>"); document.write(JSON.stringify(employee.name), "<br>"); document.write(JSON.stringify(employee.age)); </script> </head> </html>
输出
上述脚本的输出将是 −
{"name":"Dhoni","age":41,"role":"Manager","salary":80000}
"Peter"
34
"Dhoni"
41
使用 JSON.parse()
JavaScript 方法 JSON.parse() 将 JSON 字符串转换为对象。如果传递给 JSON.parse() 的字符串包含任何尾随逗号，则它将失败，因为它们在 JSON 中无效。要实现此方法，需要遵循以下步骤。
如果我们使用 JSON.parse() 语法来克隆对象。
声明一个 对象，将其视为父对象
将属性分配给父对象
创建 克隆对象 并使用 JSON.parse() 对其进行分配
如果对象文字具有 Functions 和 Symbol 属性，则在 JSON.parse() 中它不会执行克隆对象的工作。这仅在对象文字为 Number 和 String 时才有效。
示例
在此示例中，我们使用 JSON.parse() 方法，这将从现有对象复制属性。
<!DOCTYPE html> <html> <head> <script> const employee = { name: 'Dhoni', age: 41, role: 'Manager', salary: 80000, } // cloning the object const copyemp = JSON.parse(JSON.stringify(employee)); document.write(JSON.stringify(copyemp), "<br>"); // modifying the value of copyemp copyemp.name = 'Peter'; copyemp.age = 34; document.write(JSON.stringify(copyemp.name), "<br>"); document.write(JSON.stringify(copyemp.age), "<br>"); document.write(JSON.stringify(employee.name), "<br>"); </script> </head> </html>
输出
上述脚本的输出将是 −
{"name":"Dhoni","age":41,"role":"Manager","salary":80000}
"Peter"
34
"Dhoni"
