原生JS 完成庞杂对象深拷贝(对象值包括函数)

之前对深拷贝和浅拷贝没有太深的印象,厥后才晓得是由于没掉进去过它的坑里。近来掉坑了才意想到它们的重要性。

闲话少叙,来说说坑:如果我须要保留一个庞杂的对象 obj 并把它赋值给 originalObj ,厥后对obj对象的某个属性值进行了修正,然后,,,我保留的初始值originalObj 也被修正了!!!
这个时刻明眼人应当看出题目来了:由于我给originalObj 赋值的时刻用的是浅拷贝,所以修正obj 的属性值的时刻,originalObj 也随着变了。这就是浅拷贝的直接表现。
那末 如果我想保留一份初始值originalObj ,不论 obj 怎样修正,都坚持originalObj 始终不变,该怎样办呢?答案就是用深拷贝。。。
网上有许多要领,比方Object.assign()、JSON对象的parse和stringify、JQ的extend等,然则它们有一个配合的题目就是对简朴对象能够完成深拷贝,然则对庞杂对象就不行了,比方如许一个对象(属性值有函数、数组、庞杂对象等):

《原生JS 完成庞杂对象深拷贝(对象值包括函数)》

这个时刻适才那几个要领就不行了。那该怎样办呢?
这个时刻就须要本身写一个函数了:

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; 
}

然后 copy 对象的结果以下:

let obj_2 = deepCopy(obj_1); 
console.log(obj_1); // 修正name属性之前,打印出来 name 也是 Edited 
obj_1.name = 'Edited'; 
console.log(obj_1); // 修正name属性以后,打印出来 name 是 Edited 
console.log(obj_2); // 由因而深拷贝,修正obj_1 的 name属性之前,不影响 obj_2 的 name 属性

《原生JS 完成庞杂对象深拷贝(对象值包括函数)》

愿望这个用函数完成庞杂对象的深拷贝的要领对您有所协助!

    原文作者:小禾子
    原文地址: https://segmentfault.com/a/1190000018274342
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞