深拷贝 - 知食记

参考来源
​https://juejin.im/post/5d6aa4f96fb9a06b112ad5b1#heading-0​
乞丐版
1
let obj1, obj2
2
obj2 = JSON.parse(JSON.stringify(obj1))
Copied!
这种写法非常简单，而且可以应对大部分的应用场景，但是它还是有很大缺陷的，比如拷贝其他引用类型、拷贝函数、循环引用等情况。
基础版本
1
function clone(target) {
2
    if (typeof target === 'object') {
3
        let cloneTarget = {};
4
        for (const key in target) {
5
            cloneTarget[key] = clone(target[key]);
6
        }
7
        return cloneTarget;
8
    } else {
9
        return target;
10
    }
11
};
Copied!
迭代遍历对象的深度，并最终返回结果。不过，这个函数还没有考虑数组的场景。修改为：
1
function clone(target) {
2
    if (typeof target === 'object') {
3
        let cloneTarget = Array.isArray(target) ? [] : {};
4
        for (const key in target) {
5
            cloneTarget[key] = clone(target[key]);
6
        }
7
        return cloneTarget;
8
    } else {
9
        return target;
10
    }
11
};
Copied!
循环引用
1
const target = {
2
    field1: 1,
3
    field2: undefined,
4
    field3: {
5
        child: 'child'
6
    },
7
    field4: [2, 4, 8]
8
};
9
target.target = target;
Copied!
会使得之前的函数递归无法推出而溢出。
解决循环引用问题，我们可以额外开辟一个存储空间，来存储当前对象和拷贝对象的对应关系，当需要拷贝当前对象时，先去存储空间中找，有没有拷贝过这个对象，如果有的话直接返回，如果没有的话继续拷贝，这样就巧妙化解的循环引用的问题。
1
function clone(target, map = new Map()) {
2
    if (typeof target === 'object') {
3
        let cloneTarget = Array.isArray(target) ? [] : {};
4
        if (map.get(target)) {
5
            return map.get(target);
6
        }
7
        map.set(target, cloneTarget);
8
        for (const key in target) {
9
            cloneTarget[key] = clone(target[key], map);
10
        }
11
        return cloneTarget;
12
    } else {
13
        return target;
14
    }
15
};
Copied!
Map -> Weakmap
weakmap是弱引用。Map是强引用。在下面的场景中，强引用的数据并没有被释放
1
let obj = { name : 'ConardLi'}
2
const target = new Map();
3
target.set(obj,'code秘密花园');
4
obj = null;
Copied!
克隆函数
实际上克隆函数是没有实际应用场景的，两个对象使用一个在内存中处于同一个地址的函数也是没有任何问题的。
首先，我们可以通过prototype来区分下箭头函数和普通函数，箭头函数是没有prototype的。
我们可以直接使用eval和函数字符串来重新生成一个箭头函数，注意这种方法是不适用于普通函数的。
我们可以使用正则来处理普通函数：
分别使用正则取出函数体和函数参数，然后使用new Function ([arg1[, arg2[, ...argN]],] functionBody)构造函数重新构造一个新的函数。
1
function cloneFunction(func) {
2
    const bodyReg = /(?<={)(.|\n)+(?=})/m;
3
    const paramReg = /(?<=\().+(?=\)\s+{)/;
4
    const funcString = func.toString();
5
    if (func.prototype) {
6
        console.log('普通函数');
7
        const param = paramReg.exec(funcString);
8
        const body = bodyReg.exec(funcString);
9
        if (body) {
10
            console.log('匹配到函数体：', body[0]);
11
            if (param) {
12
                const paramArr = param[0].split(',');
13
                console.log('匹配到参数：', paramArr);
14
                return new Function(...paramArr, body[0]);
15
            } else {
16
                return new Function(body[0]);
17
            }
18
        } else {
19
            return null;
20
        }
21
    } else {
22
        return eval(funcString);
23
    }
24
}
Copied!

以前

type

下一个

isEuqal

最近更新 2yr ago

复制链接

内容