深浅拷贝的简单理解

1.深浅拷贝的定义

浅拷贝只复制指向某个对象的指针而不复制对象本身，新旧对象还是共享同一块内存。
深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

2.赋值和浅拷贝的区别

• 当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。
• 浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。即：默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝)，即只复制对象空间而不复制资源。

3.手写深拷贝

// 手写深拷贝
function deepClone(source){
    const targetObj = source.constructor === Array ? []:{};
    for(let keys in source){
        if(source.hasOwnProperty(keys)){
            if(source[keys] && typeof source[keys] === 'object'){
                // 对象、数组
                targetObj[keys] = source[keys].constructor === Array ? []:{};
                targetObj[keys] = deepClone(source[keys]);
            }else{
                targetObj[keys] = source[keys]
            }
        }
    }
    return targetObj;
};

验证结果

var obj = {
    name:'张三',
    age:20,
    friend:['Bob','John','Nick'],
    parent:{
        farther:'赵一',
        morther:'钱二',     
    },
    color:['red','blue']
}

var newObj = deepClone(obj);
newObj.friend.push('Greg');
newObj.name = '李四';
console.log(obj);
// {
//     name: '张三',
//     age: 20,
//     friend: [ 'Bob', 'John', 'Nick' ],
//     parent: { farther: '赵一', morther: '钱二' },
//     color: [ 'red', 'blue' ]
//   }
console.log(newObj);
// {
//     name: '李四',
//     age: 20,
//     friend: [ 'Bob', 'John', 'Nick', 'Greg' ],
//     parent: { farther: '赵一', morther: '钱二' },
//     color: [ 'red', 'blue' ]
//   }

4.解构赋值与深浅拷贝

// 解构赋值
// 一维数据 -> 深拷贝
// 二维数据 -> 浅拷贝
var arr1 = [1,2,3];
var newArr1 = [...arr1];
newArr1.push(4);
console.log(arr1, newArr1);//[ 1, 2, 3 ] [ 1, 2, 3, 4 ]

var arr2 = [1,2,3,[4,5,6]];
var newArr2 = [...arr2];
newArr2[3].push(7);
console.log(arr2, newArr2);//[ 1, 2, 3, [ 4, 5, 6, 7 ] ] [ 1, 2, 3, [ 4, 5, 6, 7 ] ]