📜  在 javascript 中克隆一个对象(1)

📅  最后修改于: 2023-12-03 15:37:21.484000             🧑  作者: Mango

在 JavaScript 中克隆一个对象

在 JavaScript 中,可以使用多种方式进行对象克隆,包括浅克隆和深克隆。浅克隆会复制对象的基本类型属性和引用类型属性的地址,而深克隆会完全复制对象及其引用类型属性的值。

浅克隆
Object.assign()

Object.assign() 方法可以用于浅克隆一个对象:

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = Object.assign({}, obj1);

// 修改 obj2 的基本类型属性不会影响 obj1
obj2.a = 3;
console.log(obj1.a); // 1
console.log(obj2.a); // 3

// 修改 obj2 的引用类型属性会影响 obj1
obj2.b.c = 4;
console.log(obj1.b.c); // 4
console.log(obj2.b.c); // 4
Spread Syntax

Spread Syntax 也可以用于浅克隆一个对象:

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { ...obj1 };

// 修改 obj2 的基本类型属性不会影响 obj1
obj2.a = 3;
console.log(obj1.a); // 1
console.log(obj2.a); // 3

// 修改 obj2 的引用类型属性会影响 obj1
obj2.b.c = 4;
console.log(obj1.b.c); // 4
console.log(obj2.b.c); // 4
深克隆

除了浅克隆方式,还可以使用以下方法进行深克隆:

JSON.parse() 和 JSON.stringify()

可以使用 JSON.parse() 和 JSON.stringify() 来进行深克隆:

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = JSON.parse(JSON.stringify(obj1));

// 修改 obj2 的基本类型属性不会影响 obj1
obj2.a = 3;
console.log(obj1.a); // 1
console.log(obj2.a); // 3

// 修改 obj2 的引用类型属性不会影响 obj1
obj2.b.c = 4;
console.log(obj1.b.c); // 2
console.log(obj2.b.c); // 4

需要注意的是,使用 JSON.parse() 和 JSON.stringify() 会忽略对象的原型和函数。

Lodash 的 _.cloneDeep()

Lodash 中的 _.cloneDeep() 方法可以用于深克隆一个对象:

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = _.cloneDeep(obj1);

// 修改 obj2 的基本类型属性不会影响 obj1
obj2.a = 3;
console.log(obj1.a); // 1
console.log(obj2.a); // 3

// 修改 obj2 的引用类型属性不会影响 obj1
obj2.b.c = 4;
console.log(obj1.b.c); // 2
console.log(obj2.b.c); // 4

需要注意的是,使用 _.cloneDeep() 方法需要先通过 npm 安装 Lodash 库。

以上是 JavaScript 中克隆对象的几种方法,开发者需要根据需求来选择合适的方式。