1.通过递归实现深拷贝
封装一个简易版的深拷贝函数
(适用于对象,数组,二维数组,但如果对象数组之间相互引用,这个代码无法实现)
//拷贝函数 简易的深拷贝(对象,数组,二维数组,但如果对象数组之间相互引用,这个代码无法实现)
function deepCopy(newObj, oldObj) {
for (let k in oldObj) {
//处理数组的问题 把数组再次遍历 //递归思想
//一定要把数组判断放在前面,不能颠倒。因为数组也属于对象,万物皆对象
if (oldObj[k] instanceof Array) {
newObj[k]=[]
deepCopy(newObj[k], oldObj[k])
}
//处理对象的问题
else if (oldObj[k] instanceof Object) {
newObj[k]={}
deepCopy(newObj[k], oldObj[k])
}
else {
//k 属性名 oldObj[k] 属性值
newObj[k] = oldObj[k] //到这儿只是浅拷贝,还需要判断数组这种复杂类型,所以加了一个if else
}
}
}
总结四句话:
- 利用递归函数的思想,使拷贝后的对象值改变时不影响原来对象
- 碰到值,直接拷贝;碰到数组,再次调用递归函数
- 碰到对象,也是再次调用递归函数
- 判断时,一定要把数组判断放在对象判断前面
2.JS库lodash里面cloneDeep内部实现了深拷贝
lodash是一个一致性,模块化,高性能的JavaScript实用工具库。
直接引入,使用
<script src="../js/lodash.min.js"></script>
<script>
const obj = {
uname: 'pink',
age: 18,
hobby: ['羽毛球', '滑板',['111','111']],
family:{
baby:'小pink'
}
}
const o= _.cloneDeep(obj)
console.log(o);
o.family.baby="老pink"
console.log(obj);
</script>
3.通过JSON.stringfy()实现深拷贝
<script>
const obj = {
uname: 'pink',
age: 18,
hobby: ['羽毛球', '滑板',['111','111']],
family:{
baby:'小pink'
}
}
// JSON.stringify()//把对象转化为JSON 字符串, 打印出来的是一堆字符串
// JSON.parse()//在把字符串转化为对象
const o=JSON.parse(JSON.stringify(obj))
console.log(o);
o.family.baby="老pink"
console.log(obj);
</script>