数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在 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
使用展开语法 (…)
“展开”运算符有效地将对象或数组的所有属性复制到新的对象或数组中。要实现此方法，我们需要遵循以下步骤：
如果我们使用 (…) 语法来克隆对象。
声明一个对象，将其视为父对象
为父对象分配属性
创建克隆对象并使用{…父对象} 为其赋值。
示例
在这个示例中，我们使用了“展开语法” (…)。此展开语法也用于从父对象复制属性。
<!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() 为其赋值。
在JSON.parse() 中，如果对象文字包含函数和符号属性，则它不会执行对象的克隆工作。这只在对象文字包含数字和字符串时才有效。
示例
在这个示例中，我们使用的是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"
5K+ 次浏览
