返回

浅拷贝和深拷贝:剖析JavaScript中的对象拷贝机制

前端




## 浅拷贝
浅拷贝,是指只复制对象本身的属性,而不复制其属性所引用的对象。因此,浅拷贝创建的新对象与原对象共享相同的属性值,但它们指向不同的内存地址。浅拷贝可以通过多种方式实现,最常见的是使用Object.assign()方法或扩展运算符(...)。

**代码示例:** 

const obj1 = {
name: 'John Doe',
age: 30,
address: {
street: '123 Main Street',
city: 'New York',
state: 'NY'
}
};

const obj2 = Object.assign({}, obj1);

console.log(obj2);


输出结果:

{
name: 'John Doe',
age: 30,
address: {
street: '123 Main Street',
city: 'New York',
state: 'NY'
}
}


从输出结果可以看出,obj2与obj1具有相同的属性值,但它们指向不同的内存地址。这意味着,如果修改obj2的属性值,不会影响到obj1的属性值,反之亦然。

## 深拷贝
深拷贝,是指不仅复制对象本身的属性,还复制其属性所引用的对象。因此,深拷贝创建的新对象与原对象完全相同,它们具有相同的属性值和内存地址。深拷贝可以通过多种方式实现,最常见的是使用递归算法或JSON.parse(JSON.stringify(obj))方法。

**代码示例:** 

const obj1 = {
name: 'John Doe',
age: 30,
address: {
street: '123 Main Street',
city: 'New York',
state: 'NY'
}
};

const obj2 = JSON.parse(JSON.stringify(obj1));

console.log(obj2);


输出结果:

{
"name": "John Doe",
"age": 30,
"address": {
"street": "123 Main Street",
"city": "New York",
"state": "NY"
}
}


从输出结果可以看出,obj2与obj1完全相同,它们具有相同的属性值和内存地址。这意味着,如果修改obj2的属性值,也会影响到obj1的属性值,反之亦然。

## 浅拷贝和深拷贝的应用场景
浅拷贝和深拷贝在JavaScript中都有其特定的应用场景。一般来说,浅拷贝适用于以下情况:

* 当需要复制一个对象,并且不需要修改其属性值时。
* 当需要复制一个对象,并且其属性值都是基本类型(如字符串、数字、布尔值)时。

深拷贝适用于以下情况:

* 当需要复制一个对象,并且需要修改其属性值时。
* 当需要复制一个对象,并且其属性值包含引用类型(如数组、对象)时。

## 结论
浅拷贝和深拷贝是JavaScript中两种不同的对象拷贝方式。浅拷贝只复制引用,而深拷贝则创建一模一样的新对象。浅拷贝和深拷贝都有其特定的应用场景,了解它们的异同并合理使用它们,可以帮助您编写出更加高效和健壮的代码。