JS實現深拷貝和淺拷貝及區別

JS實現深拷貝和淺拷貝及區別

深拷貝和淺拷貝對比

• 淺拷貝

  • 優：與深拷貝相比不佔用內存，不影響性能
  • 缺：因使用的同一個地址，B值改變，A值也會隨着改變

• 深拷貝

  • 優：有自己獨立屬性、地址，不可被更改
  • 缺：與淺拷貝相比佔用內存，並非常影響性能問題，不建議大範圍的使用

簡單數組實現深拷貝方法

• 通過for循環遍歷賦值
• arr.splice(),截取數組元素(start, end) 默認截取全部元素，不會改變原來的數組
• arr.concat() 方法用於連接兩個或多個數組，不改變原來的數組
• […arra] 使用拓展運算符

簡單對象實現深拷貝方法

• 通過for循環遍歷賦值

• Object.assign({}, obj):當object只有一層的時候，是深拷貝;多層時,改變多層內的數據時是淺拷貝

• JSON.parse(JSON.stringify(obj)) 單層&多層都可以，有函數時不行

• {…obj} 使用拓展運算符

複雜解構的深拷貝兩種寫法

第一種寫法：

function copyFn(obj) {
    if (obj == null) { return null }
    var result = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            if (typeof obj[key] === 'object') {
                result[key] = copyFn(obj[key]); // 如果是對象/數組，再次調用該方法自身 
            } else {
                result[key] = obj[key];
            }
        }
    }
    return result;
}
/////////////////// 測試
// 測試對象
var obj = {
    "a": 1, "b": [2, 3], "c": { "d": 4, "e": 5 }, "f": function (g) {
        return g * 2
    }
}
let obj1 = copyFn(obj)
obj1.c.d = 0
console.log(obj);
console.log(obj1);

// 測試數組
var arra = [1, 2, 3, { "a": 9, "b": 8, "c": [4, 5], "d": function (g){
    return g * 2
}}]
let arrb = copyFn(arra)
arrb[0] = 0
arrb[3].a = 6
arrb[3].c[0] = 7
console.log(arra);
console.log(arrb);

第二種寫法：

function clone(obj) {
    var o;
    // 如果是對象object的話, 因爲null,object,array也是'object';
    if (typeof obj === 'object') {
        // 如果是空的話
        if (obj === null) {
            o = null;
        } else if (obj instanceof Array) {
            // 如果是數組arr的話
            o = [];
            for (var i = 0, len = obj.length; i < len; i++) {
                o.push(clone(obj[i]));
            }
        } else {
            // 如果是對象object的話
            o = {};
            for (var j in obj) {
                o[j] = clone(obj[j]);
            }
        }
    }
    else {
        o = obj;
    }
    return o;
};
/////////////////// 測試
// 測試數組
var arrc = [1, 2, 3, {
    "a": 9, "b": 8, "c": [4, 5], "d": function (g) {
        return g * 2
    }
}]
let arrd = clone(arrc)
arrd[0] = 0
arrd[3].a = 6
arrd[3].c[0] = 7
console.log(arrc);
console.log(arrd);

// 測試對象
var obj1 = {
    "a": 1, "b": [2, 3], "c": { "d": 4, "e": 5 }, "f": function (g) {
        return g * 2
    }
}
let obj2 = clone(obj1)
obj2.c.d = 0
console.log(obj);
console.log(obj2);