对象拷贝: 浅拷贝、深拷贝

作者：辰风沐阳阅读：701 发布时间：2022-02-01 上次更新：2022-02-01

#### 1. 浅拷贝
---

**浅拷贝: 只是拷贝了基本类型的数据，而引用类型的数据，复制后还会发生引用**

示例数据

```javascript
const user = { name: 'liang', age: 23 }
```

在 js 中，引用类型的数据使用 **=** 进行赋值时，传递的都是引用，而并非其对应的值，这样赋值并没有真正的拷贝数据

```javascript
const user1 = user
user1.name = 'my name is liang'
console.log(user)  // {name: 'my name is liang', age: 23}
```

我们有以下几种方案可以进行浅拷贝

```javascript
// 方案一: 使用 for in 循环取出属性和值，赋值给一个新的对象
const obj = {}
for (const key in user) {
    obj[key] = user[key]
}

// 方案二: 使用 Object.assign() 进行浅拷贝
const obj = Object.assign({}, user)

// 方案三: 使用展开语法
const obj = { ...user }
```

浅拷贝存在的问题: 当属性值存在引用类型数据时，则拷贝的是引用，并不是真正的拷贝，要解决这个问题则需要深拷贝

```javascript
const user = {
    name: 'liang',
    info: {
        age: 23,
    }
}

const profile = { ...user }

profile.name = 'zhang'
profile.info.age = 18

console.log(user) // {name: 'liang', info: {age: 18}}
console.log(profile) // {name: 'zhang', info: {age: 18}}
```

#### 2. 深拷贝
---

**深拷贝: 拷贝基本类型和引用类型的数据，而不是拷贝引用类型的引用**

数据示例

```javascript
const user = {
    name: 'liang',
    info: { age: 23 },
    array: ['html', 'css', 'javascript'],
    show(name) {
        return `${name} call show method`
    }
}
```

深拷贝对象-迭代递归法

```javascript
// 深拷贝对象
function copy(object) {
    let data = object instanceof Array ? [] : {}
    for (const [key, value] of Object.entries(object)) {
        data[key] = typeof value == 'object' ? copy(value) : value;
    }
    return data
}

// 拷贝对象
const profile = copy(user)

// 修改通过拷贝得到的变量不会影响原数据
profile.name = 'zhang'
profile.info.age = 18
profile.array.push('profile push data')
profile.show = () => 'profile update show method'

console.log(user)
console.log(profile)
```

对象拷贝: 浅拷贝、深拷贝

最新发布

友情链接