162 lines
4.4 KiB
JavaScript
162 lines
4.4 KiB
JavaScript
## 概念
|
||
|
||
- 浅拷贝：只拷贝最外面一层的数据；更深层次的对象，只拷贝引用。
|
||
|
||
- 深拷贝：拷贝多层数据；每一层级别的数据都会拷贝。
|
||
|
||
**总结**：
|
||
|
||
拷贝引用的时候，是属于**传址**，而非**传值**。关于传值和传址的区别，是很基础的内容，详见《JavaScript 基础/对象简介.md》这篇文章。
|
||
|
||
深拷贝会把对象里**所有的数据**重新复制到新的内存空间，是最彻底的拷贝。
|
||
|
||
## 浅拷贝的实现方式
|
||
|
||
### 用 for in 实现浅拷贝（比较繁琐）
|
||
|
||
```js
|
||
const obj1 = {
|
||
name: 'qianguyihao',
|
||
age: 28,
|
||
info: {
|
||
desc: '很厉害',
|
||
},
|
||
};
|
||
|
||
const obj2 = {};
|
||
// 用 for in 将 obj1 的值拷贝给 obj2
|
||
for (let key in obj1) {
|
||
obj2[key] = obj1[key];
|
||
}
|
||
|
||
console.log('obj2:' + JSON.stringify(obj2));
|
||
|
||
obj1.info.desc = '永不止步'; // 当修改 obj1 的第二层数据时，obj2的值也会被改变。所以 for in 是浅拷贝
|
||
|
||
console.log('obj2:' + JSON.stringify(obj2));
|
||
```
|
||
|
||
上方代码中，用 for in 做拷贝时，只能做到浅拷贝。也就是说，在 obj2 中， name 和 age 这两个属性会单独存放在新的内存地址中，和 obj1 没有关系。但是，`obj2.info` 属性，跟 `obj1.info`属性，**它俩指向的是同一个堆内存地址**。所以，当我修改 `obj1.info` 里的值之后，`obj2.info`的值也会被修改。
|
||
|
||
打印结果如下：
|
||
|
||
```
|
||
obj2:{"name":"qianguyihao","age":28,"info":{"desc":"很厉害"}}
|
||
|
||
obj2:{"name":"qianguyihao","age":28,"info":{"desc":"永不止步"}}
|
||
```
|
||
|
||
### 用 Object.assgin() 实现浅拷贝（推荐的方式）
|
||
|
||
上面的 for in 方法做浅拷贝过于繁琐。ES6 给我们提供了新的语法糖，通过 `Object.assgin()` 可以实现**浅拷贝**。
|
||
|
||
`Object.assgin()` 在日常开发中，使用得相当频繁，非掌握不可。
|
||
|
||
**语法**：
|
||
|
||
```js
|
||
newObj = Object.assgin(newObj, 被拷贝的对象);
|
||
```
|
||
|
||
参数解释：`newObj`指的是**拷贝给谁**。
|
||
|
||
**例 1**：
|
||
|
||
```js
|
||
const obj1 = {
|
||
name: 'qianguyihao',
|
||
age: 28,
|
||
info: {
|
||
desc: 'hello',
|
||
},
|
||
};
|
||
|
||
// 浅拷贝：把 obj1 拷贝给 obj2。如果 obj1 只有一层数据，那么，obj1 和 obj2 则互不影响
|
||
const obj2 = Object.assign({}, obj1);
|
||
console.log('obj2:' + JSON.stringify(obj2));
|
||
|
||
obj1.info.desc = '永不止步'; // 由于 Object.assign() 只是浅拷贝，所以当修改 obj1 的第二层数据时，obj2 对应的值也会被改变。
|
||
console.log('obj2:' + JSON.stringify(obj2));
|
||
```
|
||
|
||
代码解释：由于 Object.assign() 只是浅拷贝，所以在当前这个案例中， obj2 中的 name 属性和 age 属性是单独存放在新的堆内存地址中的，和 obj1 没有关系；但是，`obj2.info` 属性，跟 `obj1.info`属性，**它俩指向的是同一个堆内存地址**。所以，当我修改 `obj1.info` 里的值之后，`obj2.info`的值也会被修改。
|
||
|
||
打印结果：
|
||
|
||
```
|
||
obj2:{"name":"qianguyihao","age":28,"info":{"desc":"hello"}}
|
||
|
||
obj2:{"name":"qianguyihao","age":28,"info":{"desc":"永不止步"}}
|
||
```
|
||
|
||
**例 2**：(和上面的例 1 等价)
|
||
|
||
```js
|
||
const obj1 = {
|
||
name: 'qianguyihao',
|
||
age: 28,
|
||
};
|
||
|
||
const obj2 = {};
|
||
// 浅拷贝：把 obj1 拷贝给 obj2
|
||
Object.assign(obj2, obj1);
|
||
```
|
||
|
||
**例 3**：(和上面的例 2 等价)
|
||
|
||
```js
|
||
const obj1 = {
|
||
name: 'qianguyihao',
|
||
age: 28,
|
||
};
|
||
|
||
const obj2 = {};
|
||
// 浅拷贝：把 obj1 拷贝给 obj2。注意，这里的 obj2 和 obj3 其实是等价的，他们指向了同一个内存地址
|
||
const obj3 = Object.assign(obj2, obj1);
|
||
```
|
||
|
||
## 深拷贝的实现方式
|
||
|
||
深拷贝其实就是将浅拷贝进行递归。
|
||
|
||
### 用 for in 递归实现深拷贝
|
||
|
||
代码实现：
|
||
|
||
```js
|
||
let obj1 = {
|
||
name: 'qianguyihao',
|
||
age: 28,
|
||
info: {
|
||
desc: 'hello',
|
||
},
|
||
color: ['red', 'blue', 'green'],
|
||
};
|
||
let obj2 = {};
|
||
|
||
deepCopy(obj2, obj1);
|
||
console.log(obj2);
|
||
obj1.info.desc = 'github';
|
||
console.log(obj2);
|
||
|
||
// 方法：深拷贝
|
||
function deepCopy(newObj, oldObj) {
|
||
for (let key in oldObj) {
|
||
// 获取属性值 oldObj[key]
|
||
let item = oldObj[key];
|
||
// 判断这个值是否是数组
|
||
if (item instanceof Array) {
|
||
newObj[key] = [];
|
||
deepCopy(newObj[key], item);
|
||
} else if (item instanceof Object) {
|
||
// 判断这个值是否是对象
|
||
newObj[key] = {};
|
||
deepCopy(newObj[key], item);
|
||
} else {
|
||
// 简单数据类型，直接赋值
|
||
newObj[key] = item;
|
||
}
|
||
}
|
||
}
|
||
```
|