javascript的深拷贝和浅拷贝

javascript的深拷贝和浅拷贝

JavaScript的数据类型分为两类，基本数据类型和引用数据类型，基本类型的数据和引用类型的数据存储方式不一样，基本类型数据是存在栈中的，而引用数据类型是分两部分存的，引用数据类型的变量名字存在栈中，而值存在堆中，栈中相当于存的是值的指针。
目前JavaScript中的基本数据类型有Boolean、Null、Undefined、Number、String、Symbol。引用数据类型有Object、Array、Function、RegExp、Date。
JavaScript中的深拷贝和浅拷贝是针对引用数据类型的。

浅拷贝

浅拷贝只是浅层的拷贝，对于引用数据类型，浅拷贝就是复制了一份栈中的指针给被赋值的变量。新变量操纵的还是原有变量指向的值。

var a = {
    b: 100
}
var c = a;
c.b = 1;
console.log(a.b);//a.b=1 c.b=1

上面的这种方式就是浅拷贝，其中c和a指向的是同一个堆地址，所以在修改c时a也被修改。

深拷贝

深拷贝是相对于浅拷贝的，深拷贝要做到对引用变量的整体拷贝，也就是把堆中的值也拷贝过来，这时候，修改新变量的值不会对原有变量产生影像。那我们如何做到深拷贝呢？

暴力深拷贝

我们知道，对一个基本变量类型的拷贝，是可以完全不对原有变量的值造成影响的。并且每个引用类型都是由基本数据类型构成的。所以可以考虑使用暴力方法把对象的每一层都进行基本类型的拷贝。

var deepclone = function(obj){
    var result = Array.isArray(obj):[]?{};
       if (obj && typeof (obj) === "object") {
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                if (obj[key] && typeof (obj[key] === "object")) {
                    result[key] = deepclone(obj[key]);
                } else {
                    result[key] = obj[key];
                }
            }
        }
    }
    return result;
}

上面的方法就是通过暴力的方法来进行每一层的复制的深拷贝，但是这个方法存在存在可能成环的问题。

var deepclone = function (obj, parent = null) {
    let result = Array.isArray(obj) ? [] : {};
    let _parent = parent;
    while (_parent) {
        if (_parent.originalParent === obj) {
            return _parent.currentResult;
        }
        _parent = _parent.parent;
    }
    if (obj && typeof (obj) === "object") {
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                if (obj[key] && typeof (obj[key] === "object")) {
                    result[key] = deepclone(obj[key], {
                        parent: parent,
                        originalParent: obj,
                        currentResult: result
                    });
                } else {
                    result[key] = obj[key];
                }
            }
        }
    }
    return result;
}

上面这个方法则可以避免成环问题。

数组的拷贝

通过自带的slice(),可以实现一维数组的深拷贝。

var arr1=[3,4,5];
var arr2=arr1.slice();
console.log(arr1);//{3,4,5}
console.log(arr2);//{3,4,5}

上面这个方法只对一维数组有用，多维数组的话还是浅拷贝。

对象的拷贝

Object.assign()

Object.assign()可以对一维对象进行拷贝

var obj1={
    a:1
}
var obj2=Object.assign({},obj1);

如果是多维对象，那这个方法就不适用了，多维中的其他对象依旧会是浅拷贝。

JSON.parse(JSON.stringify(obj))

这个方法是用了JSON的方法，JSON.stringify(obj)会将对象转换为字符串，然后JSON.parse会将字符串转换为对象。通过这个方法可以实现多维对复制，但会忽略undefined和任意的函数以及symbol。

var obj1={
    a:1,
    b:{
        c:2
    }
}
var obj2=JSON.parse(JSON.stringify(obj1));

---

Blog地址:https://www.limesea.world/