js对象深度拷贝、Object.assign()、Object.assign()复制非对象

把对象target1, target2,...合并到对象origin上

    Object.assign(origin, target1, target2, ....);

1.合并的是对象

var origin = {
    a: 'a'
},

target1 = {
    a:'a1'
    b: 'b'
},

target2 = {
    c: 'c'
}

//执行
Object.assign(origin, target1, target2);

// origin原有属性被覆盖，新属性添加
console.log(origin) // {a:'a1',b:'b',c:'c'}

 

2.合并的值是 数字、空符串 ''、布尔值(false或true) 、undefined、null

var origin = { a: 'a' },

target1 = 1;

// 执行
Object.assign(origin, target1);

// origin不改变：
console.log(origin) // {a:'a'}

3.合并的是数组

var origin = { a: 'a' },

target1 =[12, 123];

// 执行
Object.assign(origin, target1)

// target1会被以 索引为属性，值为属性值复制到origin
console.log(origin) // {0:12,1:123,a:'a'}


// 如果原对象有0, 1之类的属性会被替换值
var origin = { 0: 0, a: 'a' },

target1 =[12, 123];
Object.assign(origin, target1)
console.log(origin) // {0:12,1:123,a:'a'}

4.合并的是非空字符串

var origin = { a: 'a' },

target1 = 'nihao啊';

// 执行
Object.assign(origin, target1);

// 字符串会被以索引为属性，值为属性值复制到origin
console.log(origin) // {0:'n',1:'i',2:'h',3:'a',4:'o',5:'啊',a:'a'}

 

Object.assign方法是浅拷贝即只有一层值的时候拷贝是没问题的，拷贝之后，origin和target1的值再改变时是不会相互影响的

 

拷贝的对象如果有两层及以上的时候，拷贝之后会相互影响，target1改变 origin也会跟着改变

var origin = { a: 'a' },

target1 = {
    b: { c: 1 }
};

// 执行
Object.assign(origin, target1);
console.log(origin) // 得到{a:'a',b:{c:1}}

// 改变target1中b.c的值
target1.b.c++
console.log(origin) // {a:'a',b:{c:2}} origin也改变了。

自定方法实现深度拷贝

    function deepClone(origin, target) {

        var target = target || {};

        for (var prop in target) {

            if (target.hasOwnProperty(prop)) {

                if (target[prop] !== null && typeof target[prop] === 'object') {

                    origin[prop] = Object.prototype.toString.call(target[prop]) === '[object Array]' ? [] : {};

                    deepClone(origin[prop], target[prop]);

                } else {
                    origin[prop] = target[prop]
                }
            }

        }

    }

    var obj = {

            name: 'name',

            arr: [1, 2, 3]

        },

        obj1 = {

            obj: { a: 'a' },

        };

    // 执行
    deepClone(obj, obj1)
    console.log(obj)

    /*

    {
	    name: 'name',
	    arr: [1, 2, 3],
	    obj: { a: 'a' }
    }

    */

    // 改变obj1的值
    obj1.obj.a = 'b';

    console.log(obj)
    /*
    {
	    name: 'name',
	    arr: [1, 2, 3],
	    obj: { a: 'a' }
    }
    */

    //obj不会跟随obj1改变