javascript 生深拷贝

方法一：使用 JSON.parse() 方法

要实现深拷贝有很多办法，比如最简单的办法是使用 JSON.parse()：

function deepClone(initalObj) { var obj = {}; try { obj = JSON.parse(JSON.stringify(initalObj)); } return obj; }

/* ================ 客户端调用 ================ */ var obj = { a: { a: "world", b: 21 } } var cloneObj = deepClone(obj); cloneObj.a.a = "changed";

console.log(obj.a.a); // "world"

2.2 方法二：递归拷贝

/* ================ 深拷贝 ================ */ function deepClone(initalObj, finalObj) { var obj = finalObj || {}; for (var i in initalObj) { if (typeof initalObj[i] === 'object') { obj[i] = (initalObj[i].constructor === Array) ? [] : {}; arguments.callee(initalObj[i], obj[i]); } else { obj[i] = initalObj[i]; } } return obj; } 上述代码确实可以实现深拷贝。但是当遇到两个互相引用的对象，会出现死循环的情况。

为了避免相互引用的对象导致死循环的情况，则应该在遍历的时候判断是否相互引用对象，如果是则退出循环。

改进版代码如下：

/* ================ 深拷贝 ================ */ function deepClone(initalObj, finalObj) { var obj = finalObj || {}; for (var i in initalObj) { var prop = initalObj[i];

    // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
    if(prop === obj) {
        continue;
    }

    if (typeof prop === 'object') {
        obj[i] = (prop.constructor === Array) ? [] : {};
        arguments.callee(prop, obj[i]);
    } else {
        obj[i] = prop;
    }
}
return obj;

}

2.3 方法三：使用Object.create()方法

直接使用var newObj = Object.create(oldObj)，可以达到深拷贝的效果。 /* ================ 深拷贝 ================ */ function deepClone(initalObj, finalObj) { var obj = finalObj || {}; for (var i in initalObj) { var prop = initalObj[i];

    // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
    if(prop === obj) {
        continue;
    }

    if (typeof prop === 'object') {
        obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
    } else {
        obj[i] = prop;
    }
}
return obj;

}

jQuery.js的jQuery.extend()也实现了对象的深拷贝。下面将官方代码贴出来，以供参考

jQuery.extend = jQuery.fn.extend = function() { var options, name, src, copy, copyIsArray, clone, target = arguments[ 0 ] || {}, i = 1, length = arguments.length, deep = false;

// Handle a deep copy situation
if ( typeof target === "boolean" ) {
    deep = target;

    // Skip the boolean and the target
    target = arguments[ i ] || {};
    i++;
}

// Handle case when target is a string or something (possible in deep copy)
if ( typeof target !== "object" && !jQuery.isFunction( target ) ) {
    target = {};
}

// Extend jQuery itself if only one argument is passed
if ( i === length ) {
    target = this;
    i--;
}

for ( ; i < length; i++ ) {

    // Only deal with non-null/undefined values
    if ( ( options = arguments[ i ] ) != null ) {

        // Extend the base object
        for ( name in options ) {
            src = target[ name ];
            copy = options[ name ];

            // Prevent never-ending loop
            if ( target === copy ) {
                continue;
            }

            // Recurse if we're merging plain objects or arrays
            if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
                ( copyIsArray = jQuery.isArray( copy ) ) ) ) {

                if ( copyIsArray ) {
                    copyIsArray = false;
                    clone = src && jQuery.isArray( src ) ? src : [];

                } else {
                    clone = src && jQuery.isPlainObject( src ) ? src : {};
                }

                // Never move original objects, clone them
                target[ name ] = jQuery.extend( deep, clone, copy );

            // Don't bring in undefined values
            } else if ( copy !== undefined ) {
                target[ name ] = copy;
            }
        }
    }
}

// Return the modified object
return target;

};

** 深度优先遍历**

深度优先遍历 function deepClone(obj){ if(typeof obj !=='object' || obj===null){ return obj; }

let newObj={};

//通过constructor 属性指回构造函数 判断类型
if(obj.constructor===Array){
    newObj=[];
}

for(let key in obj){
    if(obj.hasOwnProperty(key)){
        newObj[key]=deepClone(obj[key]);
    }
}
return newObj;

}

广度优先遍历

//广度优先遍历

function isObject(x){ return Object.prototype.toString.call(x)==='[Object Object]'; }

function deepClone(obj){

//去重
const uniqueList = new WeakMap();

let root={};

//队列 初始化节点
let queue=[{
    parent:root,
    key:undefined,
    data:obj
}]

while(queue.length){

    const node=queue.shift();
    const parent=node.parent;
    const key=node.key;
    const data=node.data;

    let res=parent;
    if(typeof key!=='undefined'){
        let obj={};
        if(data.constructor===Array){//判断类型 处理数组
            obj=[];
        }
        //保持引用关系
        res=parent[key]=obj;
    }

    if(uniqueList.has(data)){
        parent[key]=uniqueList.get(data);
        break;
    };
    uniqueList.set(data,res);

    for(let key in data){
        if(data.hasOwnProperty(key)){
            if (isObject(data[key]) {
                queue.push({
                    parent:res,
                    key:key,
                    data:data[key]
                })
            }else{
                res[key]=data[key];
            }
           
        }

    }
}

return root;

}

总结：

1. 深度优先的方式容易栈溢出，而广度优先遍历里面有个引用。就像作者说的有各自的边界问题；
2. 了解JSON.parse(JSON.stringify())，方式深度拷贝也有栈溢出问题。
3. 通过map对象，将拷贝过的数据存储起来。
4. 后来查看资料可以使用 new WeakMap() 防止循环引用