在 JavaScript 中，深度克隆对象的最高效方法是什么？

在 JavaScript 中，对象是键值对的集合。对象的属性是键，并用字符串表示。键的值是给定对象属性的值。在 JavaScript 中，对象可以通过多种方式复制到其他对象，其中一些将在下面讨论。

  • 使用扩展运算符(…),

  • 使用 assign() 函数和

  • 使用 JSON.parse() 和 JSON.stringify() 函数。

使用 Json.parse() 和 Stingify() 方法

在上面提到的三种方法中，为了深度克隆对象，使用 JSON.stringify() 和 JSON.parse() 函数。

  • parse() 方法接受一个 JSON 字符串作为参数，并根据该字符串创建一个 JavaScript 对象。

  • stringify() 方法将 JavaScript 对象的值转换为 JSON 字符串。

使用这两种方法，您可以快速轻松地将原始对象复制到新对象中。当给定输入为数字、字符串和对象字面量时，可以使用 parse 进行复制。parse() 函数会将字符串解析为 JavaScript 对象，通过这种方式，这两个对象将拥有各自的内存。

语法

下面给出 parse 函数的语法。

JSON.parse(JSON.stringify(originalObjectName))

示例 1

这是 parse() 方法和 stringify() 复制对象的示例 -

let employee = {
   emp_name: 'Abdul Rawoof',
   company: 'Tutorials Point',
   emp_id: 'TP10000',
   role: 'Software Engineer-Intern',
   salary: 18000
}

let cpyEmployee = JSON.parse(JSON.stringify(employee))
console.log("This is the original object:",employee)
console.log("This is the new copied object:",cpyEmployee)
cpyEmployee.emp_name = 'B Jason'
cpyEmployee.emp_id = 'TP9999'
cpyEmployee.role = 'Content Writing-Intern'
console.log("The copied object with updations is:",cpyEmployee)

示例 2

以下是使用 parse() 和 stringify() 方法克隆对象的另一个示例 -

let obj = {
   foo: 1,
   bar: { baz: 'test' }
}
let newObj = JSON.parse(JSON.stringify(obj));
obj.bar.baz = 20;
console.log(obj);
console.log(newObj);

Object.assign() 方法

OBJECT.assign() 函数用于将原始对象复制到新对象中。它与扩展运算符的区别在于，当存在嵌套对象时，如果使用 assign() 复制对象，则嵌套对象不会更改，而对象的其它变量可以更改。

示例

此示例演示了如何在 JavaScript 中使用 assign() 合并对象。

var empDetails = {
   emp_name: "Abdul Rawoof",
   emp_sex: "M",
   emp_age: 23
}
var empCompany = {
   emp_id: "TP1000",
   emp_role: "Software Engineer-Intern",
   emp_salary: 18000
}
console.log("The employee details object is:", empDetails)
console.log("The employee company object is:",empCompany)

var mergeObj = Object.assign({},empDetails,empCompany)
console.log("The merged object is",mergeObj)

更新于: 2022-08-26

1K+ 次查看

启动您的 职业生涯

通过完成课程获得认证

开始
广告