如何在JavaScript中进行深度克隆

方法 1

var cloned = JSON.parse(JSON.stringify(objectToClone));

优缺点

1、写法简单

2、适用于小数据量的符合json格式的数据

3、数据量大时耗内存

4、只适合符合json格式的数据

方法 2

function clone(item) {
    if (!item) { return item; } // null, undefined values check

    var types = [ Number, String, Boolean ], 
        result;

    // normalizing primitives if someone did new String('aaa'), or new Number('444');
    types.forEach(function(type) {
        if (item instanceof type) {
            result = type( item );
        }
    });

    if (typeof result == "undefined") {
        if (Object.prototype.toString.call( item ) === "[object Array]") {
            result = [];
            item.forEach(function(child, index, array) { 
                result[index] = clone( child );
            });
        } else if (typeof item == "object") {
            // testing that this is DOM
            if (item.nodeType && typeof item.cloneNode == "function") {
                result = item.cloneNode( true );    
            } else if (!item.prototype) { // check that this is a literal
                if (item instanceof Date) {
                    result = new Date(item);
                } else {
                    // it is an object literal
                    result = {};
                    for (var i in item) {
                        result[i] = clone( item[i] );
                    }
                }
            } else {
                // depending what you would like here,
                // just keep the reference, or create new object
                if (false && item.constructor) {
                    // would not advice to do that, reason? Read below
                    result = new item.constructor();
                } else {
                    result = item;
                }
            }
        } else {
            result = item;
        }
    }

    return result;
}

再看一种ES6的写法

function deepClone(obj, hash = new WeakMap()) {
    if (Object(obj) !== obj) return obj; // primitives
    if (hash.has(obj)) return hash.get(obj); // cyclic reference
    const result = obj instanceof Set ? new Set(obj) // See note about this!
                 : obj instanceof Map ? new Map(Array.from(obj, ([key, val]) => 
                                        [key, deepClone(val, hash)])) 
                 : obj instanceof Date ? new Date(obj)
                 : obj instanceof RegExp ? new RegExp(obj.source, obj.flags)
                 // ... add here any specific treatment for other classes ...
                 // and finally a catch-all:
                 : obj.constructor ? new obj.constructor() 
                 : Object.create(null);
    hash.set(obj, result);
    return Object.assign(result, ...Object.keys(obj).map(
        key => ({ [key]: deepClone(obj[key], hash) }) ));
}

优缺点

1、适合各种数据类型的深度克隆

2、代码量比较大，适合封装在公共类函数中

方法 3

_.cloneDeep(object)

_.cloneDeepWith(object, (val) => {if(_.isElement(val)) return val.cloneNode(true)})

优缺点

1、工具库封装好的，拿来就用，性能调教的比较好

2、需要引入 loadsh 库

当然还有一些对于特定数据类型的一些方法

如

const arr1=[1,2,3];
const arr2=Array.from(arr1）

Array.prototype.concat()
arrayObject.concat(arrayX,arrayX,......,arrayX)

参考： How to Deep clone in javascript