js 中的深拷贝/浅拷贝

发表于 | 分类于 | 评论数： | 阅读次数：

深拷贝和浅拷贝最根本的区别就在于是否真正获取到了一个对象的复制实体,而不是引用.

对于原始对象,不存在深拷贝/浅拷贝的问题

1
2
3
4
5
let a =1;
let b= a;
a = 2;
console.log(b)
///2

浅拷贝的实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let arrA = [1,2,3]
let arrB = arrA
arrA.push(4)
console.log(arrB)

//[1,2,3,4]


let objA = {
  a:1
}
let objB = objA

objA.a =2 

console.log(objA)

///{
///  a:2
///}

如何深拷贝

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

// 判断arr是否为一个数组，返回一个bool值
function isArray(arr: any) {
    return Object.prototype.toString.call(arr) === '[object Array]';
}
//深度克隆
function cloneDeep(obj: any) {

    if (typeof obj == "object" && obj instanceof Date) {
        return obj
    }
    if (typeof obj !== "object" && typeof obj !== 'function') {
        return obj;        //原始类型直接返回
    }
    if (obj == null) {
        return obj
    }
    let o: any = isArray(obj) ? [] : {};
    let i: any
    for (i in obj) {
        if (obj.hasOwnProperty(i)) {
            o[i] = (typeof obj[i] === "object") ? cloneDeep(obj[i]) : obj[i];
        }
    }
    return o;
}

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let arrA = [1,2,3]
let arrB = deepClone(arrA)
arrA.push(4)
console.log(arrB)

//[1,2,3]


let objA = {
  a:1
}
let objB = deepClone(objA)

objA.a =2 

console.log(objA)

///{
///  a:1
///}
thank u !