壹.3.1 深拷贝与浅拷贝

深/浅拷贝是容易被问到的一个知识点，考察的是对基础理论的掌握是否扎实。
壹.3.1.1 什么是深拷贝？什么是浅拷贝？
深拷贝是指源对象与拷贝对象互相独立，其中任何一个对象的改动都不会对另外一个对象造成影响。举个例子，一个人名叫张三，后来用他拷贝出（假设法律允许）另外一个人叫李四，不管是张三缺胳膊少腿还是李四缺胳膊少腿都不会影响另外一个人，这就是深拷贝了。比较典型的深拷贝就是JavaScript的“值类型”(7种数据类型），如 string，number，bigint，boolean，null，undefined，symbol 。
深拷贝之外的拷贝叫浅拷贝。
出于节省内存的考虑，JavaScript对“引用类型”(也即第8种数据类型)Object的拷贝默认是浅拷贝。
壹.3.1.2 几种简单的深拷贝
1.JSON内置的方法
1
(() => {
2
    let a = { x: 1 }
3
    let b = JSON.parse(JSON.stringify(a))
4
    console.log(b)//>> {x:1}
5
    b.x = 2
6
    console.log(b)//>> {x:2}
7
    console.log(a)//>> {x:1}
8
})();
Copied!
该方法是用JSON.stringify将对象序列化为字符串，然后在用JSON.parse将json字符串解析为对象，解析的时候会自己去构建新的内存地址存放新对象。
缺点：
会忽略 undefined；
会忽略symbol；
如果对象的属性为Function，因为JSON格式字符串不支持Function，在序列化的时候会自动删除；
诸如 Map, Set, RegExp, Date, ArrayBuffer 和其他内置类型在进行序列化时会丢失；
不支持循环引用对象的拷贝。
2.Object的内置方法assign
1
(() => {
2
    let a = { x: 1 }
3
    let b = Object.assign({},a);
4
    console.log(b)//>> {x:1}
5
    b.x = 2
6
    console.log(b)//>> {x:2}
7
    console.log(a)//>> {x:1}
8
})();
Copied!
该方法是用Object.assign对对象进行拼接， 将后续对象的内容插入到第一个参数指定的对象，不会修改第一个参数之后的对象，而我们将第一个对象指定为一个匿名空对象，实现深拷贝。
 Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。
引自MDN。所以这种方法拷贝会有缺陷。
缺点：
对象嵌套层次超过2层，就会出现浅拷贝的状况；
非可枚举的属性无法被拷贝。
3.使用MessageChannel
1
// 有undefined + 循环引用
2
let obj = {
3
  a: 1,
4
  b: {
5
    c: 2,
6
    d: 3,
7
  },
8
  f: undefined
9
}
10
​
11
obj.c = obj.b;
12
obj.e = obj.a;
13
obj.b.c = obj.c;
14
obj.b.d = obj.b;
15
obj.b.e = obj.b.c;
16
​
17
function deepCopy(obj) {
18
  return new Promise((resolve) => {
19
    const {port1, port2} = new MessageChannel();
20
    port2.onmessage = ev => resolve(ev.data);
21
    port1.postMessage(obj);
22
  });
23
}
24
​
25
deepCopy(obj).then((copy) => {// 异步的
26
    let copyObj = copy;
27
    console.log(copyObj, obj)
28
    console.log(copyObj == obj)
29
});
Copied!
缺点：
这个方法是异步的；
拷贝有函数的对象时，还是会报错。
壹.3.1.3 递归版深拷贝
前面的深拷贝都有缺点，有没有一种比较理想的办法？有的！
示例代码如下：
1
function deepCopy(obj) {
2
    // 创建一个新对象
3
    let result = {}
4
    let keys = Object.keys(obj),
5
        key = null,
6
        temp = null;
7
​
8
    for (let i = 0; i < keys.length; i++) {
9
        key = keys[i];    
10
        temp = obj[key];
11
        // 如果字段的值也是一个对象则递归操作
12
        if (temp && typeof temp === 'object') {
13
            result[key] = deepCopy(temp);
14
        } else {
15
        // 否则直接赋值给新对象
16
            result[key] = temp;
17
        }
18
    }
19
    return result;
20
}
Copied!
壹.3.1.4 循环引用之深拷贝
例如这种情况，obj引用自身：
1
var obj = {
2
    name: 'coffe1891',
3
    sex: 'male'
4
};
5
obj['deefRef'] = obj;
Copied!
此时如果调用上面的deepCopy函数的话，会陷入一个死循环，从而导致堆栈溢出。解决这个问题也非常简单，只需要判断一个对象的字段是否引用了这个对象或这个对象的任意父级即可，修改一下代码：
1
function deepCopy(obj, parent = null) {
2
    // 创建一个新对象
3
    let result = {};
4
    let keys = Object.keys(obj),
5
        key = null,
6
        temp = null,
7
        _parent = parent;
8
    // 该字段有父级则需要追溯该字段的父级
9
    while (_parent) {
10
        // 如果该字段引用了它的父级则为循环引用
11
        if (_parent.originalParent === obj) {
12
            // 循环引用直接返回同级的新对象
13
            return _parent.currentParent;
14
        }
15
        _parent = _parent.parent;
16
    }
17
    for (let i = 0; i < keys.length; i++) {
18
        key = keys[i];
19
        temp = obj[key];
20
        // 如果字段的值也是一个对象
21
        if (temp && typeof temp === 'object') {
22
            // 递归执行深拷贝 将同级的待拷贝对象与新对象传递给 parent 方便追溯循环引用
23
            result[key] = DeepCopy(temp, {
24
                originalParent: obj,
25
                currentParent: result,
26
                parent: parent
27
            });
28
​
29
        } else {
30
            result[key] = temp;
31
        }
32
    }
33
    return result;
34
}
Copied!
壹.3.1.5 非循环引用的子对象之拷贝
上面已经解决了深拷贝循环引用的问题，但是还不是特别的完善。
现在我们把一个对象想像成一棵树：
对象A有B,C,D三个子对象，其中子对象D中有个属性E引用了对象A下面的子对象B。
用代码来表示就是这样：
1
var A = {
2
    B: {
3
        name: 'b'
4
    },
5
    C: {
6
        name: 'c'
7
    },
8
    D: {
9
​
10
    }
11
};
12
A.D.E = A.B;
Copied!
此时 A.D.E 与 A.B 是相等的，因为他们引用了同一个对象：
1
console.log(A.B === A.D.E) //>> true
Copied!
如果再调用刚才的DeepCopy函数深拷贝一份对象A的副本X：
1
var X = DeepCopy(A);
2
console.log(X.B); //>> {name: "b"}
3
console.log(X.D.E);//>> {name: "b"}
4
console.log(X.B === X.D.E); //>> false
Copied!
虽然 X.B 和 X.D.E在字面意义上是相等的，但二者并不是引用的同一个对象，这点上来看对象 X和对象A还是有差异的。
这种情况是因为 A.B 并不在 A.D.E 的父级对象链上，所以deepCopy函数就无法检测到A.D.E对A.B也是一种引用关系，所以deepCopy函数就将A.B深拷贝的结果赋值给了 X.D.E。
知道原因那么解决方案就呼之欲出了：父级的引用是一种引用，非父级的引用也是一种引用，那么只要记录下对象A中的所有对象，并与新创建的对象一一对应即可。
1
function eepCopy(obj) {
2
    // Hash表 记录所有的对象引用关系
3
    let map = new WeakMap();
4
    function dp(obj) {
5
        let result = null;
6
        let keys = null,
7
            key = null,
8
            temp = null,
9
            existObj = null;
10
        
11
        existObj = map.get(obj);
12
        // 如果这个对象已被记录则直接返回
13
        if (existObj) {
14
            return existObj;
15
        }
16
        keys = Object.keys(obj);
17
        result = {};
18
        // 记录当前对象
19
        map.set(obj,result);
20
        for (let i = 0; i < keys.length; i++) {
21
            key = keys[i];
22
            temp = obj[key];
23
            // 如果字段的值也是一个对象则递归复制
24
            if (temp && typeof temp === 'object') {
25
                result[key] = dp(temp);
26
            } else {
27
                // 否则直接赋值给新对象
28
                result[key] = temp;
29
            }
30
        }
31
        return result;
32
    }
33
    return dp(obj);
34
}
Copied!
测试一下看看：
1
var X = deepCopy(A);
2
console.log(X.B); // >> {name: "b"}
3
console.log(X.D.E);// >> {name: "b"}
4
console.log(X.B === X.D.E); //>> true
Copied!
壹.3.1.6 终极完美方案：lodash
​lodash的_.cloneDeep()支持循环对象、大量的内置类型，对很多细节都处理的比较不错，推荐使用。 
那么，lodash是如何解决循环引用这个问题的？查阅源码：
会发现lodash是用一个栈记录了所有被拷贝的引用值，如果再次碰到同样的引用值的时候，不会再去拷贝一遍，而是利用之前已经拷贝好的。
综上，在生产环境，我们推荐使用lodash的cloneDeep()。

壹、前端之灵：JavaScript/ECMAScript - 以前

壹.2.14 模块化开发

下一个 - 壹、前端之灵：JavaScript/ECMAScript

壹.3.2 JavaScript函数柯里化

最近更新 1yr ago

复制链接

内容

壹.3.1.1 什么是深拷贝？什么是浅拷贝？

壹.3.1.6 终极完美方案：lodash