JavaScript 如何克隆一个对象

在JavaScript中，你可以通过创建一个新对象并将原始对象的属性复制到新对象中来克隆一个对象。以下是几种克隆对象的方法：

使用Object.assign()方法

示例：

let obj1 = { a: 1, b: 2 };
let obj2 = Object.assign({}, obj1);
console.log(obj2); 

输出：

{ a: 1, b: 2 }

在这个示例中，使用 Object.assign() 方法创建一个新对象 ({}) 并将 obj1 的属性分配给它。结果对象 (obj2) 是obj1的克隆。

使用展开运算符

示例：

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1 };
console.log(obj2);  

输出：

{ a: 1, b: 2 }

在这个示例中， 展开运算符(…) 被用来创建一个新对象({})并将obj1的属性赋值给它。结果对象(obj2)是obj1的克隆。

使用JSON.parse()和JSON.stringify()方法

示例：

let obj1 = { a: 1, b: 2 };
let obj2 = JSON.parse(JSON.stringify(obj1));
console.log(obj2); 

输出：

{ a: 1, b: 2 }

在这个示例中，使用 JSON.stringify() 方法将 obj1 对象转换成一个 JSON 字符串，然后使用 JSON.parse() 方法将该 JSON 字符串转换回一个 JavaScript 对象。结果对象（obj2）是 obj1 的一个克隆。

注意，如果原始对象包含非 JSON 安全的数据类型，例如函数或未定义的值，该方法可能无法正常工作。

选择最适合您用例的方法，并了解每种方法的任何限制。以下是使用 Object.create() 方法克隆对象的另一个示例：

let obj1 = { a: 1, b: 2 };
let obj2 = Object.create(obj1);
console.log(obj2); 
console.log(obj2.a); 
console.log(obj2.b); 

输出：

{}
1
2

在这个示例中， Object.create() 方法用于创建一个新对象（obj2），并将其原型设置为obj1。这将创建一个继承了obj1所有属性和方法的新对象。结果对象（obj2）是obj1的一个克隆。

你还可以使用一些库和框架，比如 Lodash 和 jQuery ，在JavaScript中克隆对象。这些库提供了额外的功能和选项来克隆对象，例如深度克隆和只复制特定属性。下面是另一个使用扩展运算符克隆对象并修改克隆对象的示例：

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };
console.log(obj2); 

输出：

{ a: 1, b: 2, c: 3 }

在这个示例中，扩展运算符(…)被用来创建一个新对象（obj2）并将obj1的属性分配给它。然后将c属性添加到obj2中，结果是一个拥有obj1所有属性和额外c属性的新对象。

请注意，修改克隆对象也会修改原始对象，因为在JavaScript中对象是按引用传递的。如果你需要避免修改原始对象，你可以使用之前提到的其他克隆方法，比如Object.assign()或JSON.parse()/JSON.stringify()。

这是使用Lodash库进行深拷贝对象的示例：

const _ = require('lodash');

let obj1 = {
a: 1,
b: { c: 2, d: 3 },
e: [4, 5, 6]
};

let obj2 = _.cloneDeep(obj1);
console.log(obj2); 
obj2.b.c = 20;
obj2.e[1] = 50;
console.log(obj2); 
console.log(obj1); 

输出：

{ a: 1, b: { c: 2, d: 3 }, e: [ 4, 5, 6 ] }
{ a: 1, b: { c: 20, d: 3 }, e: [ 4, 50, 6 ] }
{ a: 1, b: { c: 2, d: 3 }, e: [ 4, 5, 6 ] }

在这个示例中，使用了Lodash库中的_.cloneDeep()方法来创建obj1对象的深拷贝。深拷贝意味着所有嵌套的对象和数组也会被克隆，而不仅仅是复制它们的引用。这确保修改克隆的对象不会影响原始对象。

在克隆对象后，修改了obj2中的b.c属性和e[1]元素。这些更改不会影响原始的obj1对象，因为它们是在一个独立的数据副本上工作。

请注意，在使用它之前，您需要安装和导入Lodash库。您可以使用npm或其他软件包管理器进行安装。