JS 深浅拷贝

在日常开发当中那面会遇到对象拷贝问题

一、对象浅拷贝（shallowClone）

使用 Object.assign 把源对象自身的、可枚举的属性拷贝到目标对象上

var person = {name: '张三',age: 18,sex: '男',hobbies: ['篮球', '足球', '排球'],sayName: function () {console.log(this.name);},play: null,info: {address: '四川成都',child: [{id: 1,name: '张小三',age: 5,sex: '女'}]}
};var newPerson = Object.assign({}, person);
console.log(newPerson);

拷贝后新旧对象的对比：
在这里插入图片描述

但是当我操作对象里面更深层次的属性之后：
在这里插入图片描述
结果把源数据给改了

使用 for in 遍历拷贝

function shallowClone(target, origin) {var tar = target || {};for (var key in origin) {// 过滤原型上的属性origin.hasOwnProperty(key) && (target[key] = origin[key]);}return tar;
}

二、深拷贝（deepClone）

使用 for in 循环遍历 + 递归

判断是不是原型上的属性
判断是引用值（注意：typeof null === 'object'）还是原始值
如果是引用值就递归继续拷贝，否则就直接拷贝
把拷贝好的对象 return 出去

function deepClone(target, origin) {var target = target || {},toStr = Object.prototype.toString,arrType = '[object Array]';for (var key in origin) {if (origin.hasOwnProperty(key)) {if (typeof origin[key] === 'object' && origin[key] !== null) {target[key] = toStr.call(origin[key]) === arrType ? [] : {};deepClone(target[key], origin[key]);} else {target[key] = origin[key];}}}return target;
}

当我操作拷贝之后的对象：
在这里插入图片描述
结果源对象不会发生改变：

简单粗暴直接 JSON.parse(JSON.stringify(originObj));
```
function deepClone(target, origin) {var target = target || {};target = JSON.parse(JSON.stringify(origin));return target;
}
```
记得初学的时候，以为一个对象赋值另一个空对象（newObj = originObj）就可以达到拷贝的效果，结果后来操作被赋值的那个对象之后，没想到源对象也修改了（后来才知道因为它俩用的是同一个引用地址的东西，呜呜呜~）