es6之前的克隆方法
如过对于toStr.call不理解可以看这篇文章的最后部分讲解到了这个方法：https://blog.csdn.net/weixin_41277748/article/details/113359608
/**
* es6之前的方法
* 深度克隆
* @param origin 原始值
* @param target 克隆目标
*/
function deepClone(origin, target) {
let aims = target || {},
toStr = Object.prototype.toString,
arrStr = "[object Array]";
for (const prop in origin) {
if (origin.hasOwnProperty(prop)) {
if (typeof (origin[prop]) !== null && typeof (origin[prop]) == 'object') {
aims[prop] = toStr.call(origin[prop]) == arrStr ? [] : {};
deepClone(origin[prop], aims[prop]);
} else {
aims[prop] = origin[prop];
}
}
}
}
数组克隆
1、使用deepClone方法进行克隆数组
const arr1=[1,2,3,4,5];
const arr2=[];
deepClone(arr1,arr2);
console.log('arr1',arr1,'arr2深度克隆结果',arr2);
arr2.push(6);
console.log('arr1',arr1,'arr2深度克隆结果添加数据不影响之前的',arr2);
使用es6方法克隆数组 都不会影响原先数组
const arr3=[...arr1];
console.log('克隆',arr3);
arr3.push(7);
console.log('添加后的数组',arr3)
对象克隆
1、使用deepClone方法进行克隆对象
const obj1={
name:'wq',
age:18,
sex:'male',
love:['隔壁王嫂','隔壁陈嫂','隔壁刘嫂'],
wife:{
name:'杜XX',
age:20,
sex:"female"
}
};
const obj2={};
deepClone(obj1,obj2)
console.log('克隆后的对象',obj2);
obj2.name='老王';
console.log('原先的对象',obj1,'克隆后修对象',obj2);
2、使用es6方法克隆对象 可以克隆也可以添加属性，不会改变原来的值
const obj3={
...obj1,
love:[...obj1.love],
wife:{
...obj1.wife,
appearance:'笑起来真好看'
}
}
console.log('原来的对象',obj1,'克隆的对象',obj3)
