javascript 深拷贝 - Githubissues

最简单的深拷贝方法

b = JSON.parse( JSON.stringify(a) );

如果a是最基本的数组、对象、字符串、数字、布尔型可以采用这种方法。

问题：

1、无法复制函数。

    var a = {
           'name': function() {
               alert(1);
           },
           'age': 18
       }
       var b = JSON.parse(JSON.stringify(a));
       console.log(b);    // {age: 18}

2、原型链没了

自己实现深拷贝

// 是否是dom判断
   function isDOM(item) {

       return (typeof HTMLElement === 'function') 

       ? (item instanceof HTMLElement)

       : (item && (typeof item === 'object') && (item.nodeType === 1) && (typeof item.nodeName === 'string'));

   }

   // 数据类型判断
   function getType(obj) {
       return Object.prototype.toString.call(obj).slice(8, -1);
   }

   function deepClone(item) {
       var types = [Number, String, Boolean];
       var result;

       // 如果是number／string／boolea则直接返回
       types.forEach(function(type) {
           if (item instanceof type) {
               result = type(item);
           }
       });

       // 如果不是以上三种情况，则进行进一步判断
       if (typeof result == 'undefined') {
           if (isDOM(item)) {
               result = item.cloneNode( true );
           } else if (getType(item) == 'Date') {
               result = new Date(item);
           } else if (getType(item) == 'Array') {
               result = [];
               item.forEach(function(child, index, array) {
                   result[index] = deepClone(child);
               });
           } else if (getType(item) == 'Object') {
               result = {};
               for (var name in item) {
                   result[name] = deepClone(item[name]);
               }
           } else {
               result = item;
           }
       }
       return result;

   }

使用es7实现深拷贝

var obj = {
    a: 1,
    b: {
        c: 2
    }
}
var obj2 = Object.assign({}, obj);
var obj3 = {...obj, b:{c: 4}};
obj2.b.c = 3;
console.log(obj); // {a: 1, b: {c: 2}}
console.log(obj2);// {a: 1, b: {c: 3}}
console.log(obj3);// {a: 1, b: {c: 3}}

以上内容均来自互联网

ifeees / articles

javascript 深拷贝 #14