深浅拷贝

JavaScript进阶

js的数据类型有数字、字符串、布尔、null、undefined和对象，其中数字、字符串、布尔、null、undefined属于基本数据类型，对象属于引用数据类型。
基本数据类型的存储是存储在栈里的，引用类型是存储在堆里的，然后将堆地址存贮在栈里

复杂数据类型引用

1
2
3
const obj1 = { a: 1 }

const obj2 = obj1

这种情况我们称为obj1和obj2同时引用对象 { a: 1 } 的地址

浅拷贝

对于拷贝来说，是将对象的每一个属性都复制给另外一个对象，如果只是复制最外层的属性，不考虑多层嵌套情况，我们称之为浅拷贝，例如：

1
2
3
4
5
6
7
8
9
10
// 浅拷贝
const obj = {
    a: 1,
    b: 2
}
const shallowCopy = value => {
    // copy 动作
}

const copyObj = shallowCopy(obj) // { a: 1, b: 2 }

最后拷贝出来的是另一个对象，obj和copyObj地址不一样，但是对于多层嵌套的对象，想要进行完全拷贝，要进行递归，这就是深拷贝的内容

深拷贝

深拷贝是在浅拷贝的基础上，将对象的复杂数据类型的属性进行递归拷贝，实现方法：


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 获取数据类型
const getType = value => {
    const objectType = Object.prototype.toString.call(value);

    const type = objectType.match(/^\[object (.*)\]$/)[1];

    return type.toLowerCase()
}

// 深拷贝
const deepCopy  = value => {
    let copyValue = value
    const type = getType(value)
    if (type === 'object') {
        copyValue = {}
        for (const key in value) {
            copyValue[key] = deepCopy(value[key])
        }
    }

    if (type === 'array') {
        // copyValue = []
        copyValue = value.map(i => deepCopy(i))
    }

    return copyValue
}

const obj1 = {
    a: 1,
    b: {
        c: 2,
        d: [1, 2, 3]
    }
}

deepCopy(obj1)

image.png