JS实现深拷贝和浅拷贝及区别

JS实现深拷贝和浅拷贝及区别

深拷贝和浅拷贝对比

• 浅拷贝

  • 优：与深拷贝相比不占用内存，不影响性能
  • 缺：因使用的同一个地址，B值改变，A值也会随着改变

• 深拷贝

  • 优：有自己独立属性、地址，不可被更改
  • 缺：与浅拷贝相比占用内存，并非常影响性能问题，不建议大范围的使用

简单数组实现深拷贝方法

• 通过for循环遍历赋值
• arr.slice(),截取数组元素(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);

第三种写法【更简洁】：

function deepClone(obj, newObj) {
    var newObj = newObj || {};
    for (let key in obj) {
        if (typeof obj[key] == 'object') {
            newObj[key] = (obj[key].constructor === Array) ? [] : {}
            deepClone(obj[key], newObj[key]);
        } else {
            newObj[key] = obj[key]
        }
    }
    return newObj;
}