做瞹网站,最有效的15个营销方法,网络管理系统有哪些,软件技术岗位有哪些1.我们怎么去实现深拷贝呢#xff0c;这里可以递归递归去复制所有层级属性。
这么我们封装一个深拷贝的函数(PS#xff1a;只是一个基本实现的展示#xff0c;并非最佳实践) 复制代码
function deepClone(obj){let objClone Array.isArray(obj)?[]:{};if(obj …1.我们怎么去实现深拷贝呢这里可以递归递归去复制所有层级属性。
这么我们封装一个深拷贝的函数(PS只是一个基本实现的展示并非最佳实践) 复制代码
function deepClone(obj){let objClone Array.isArray(obj)?[]:{};if(obj typeof objobject){for(key in obj){if(obj.hasOwnProperty(key)){//判断ojb子元素是否为对象如果是递归复制if(obj[key]typeof obj[key] object){objClone[key] deepClone(obj[key]);}else{//如果不是简单复制objClone[key] obj[key];}}}}return objClone;
}
let a[1,2,3,4],bdeepClone(a);
a[0]2;
console.log(a,b);复制代码
可以看到
跟之前想象的一样现在b脱离了a的控制不再受a影响了。
这里再次强调深拷贝是拷贝对象各个层级的属性可以看个例子。JQ里有一个extend方法也可以拷贝对象我们来看看
let a[1,2,3,4],ba.slice();
a[0]2;
console.log(a,b);那是不是说slice方法也是深拷贝了毕竟b也没受a的影响上面说了深拷贝是会拷贝所有层级的属性还是这个例子我们把a改改
let a[0,1,[2,3],4],ba.slice();
a[0]1;
a[2][0]1;
console.log(a,b);拷贝的不彻底啊b对象的一级属性确实不受影响了但是二级属性还是没能拷贝成功仍然脱离不了a的控制说明slice根本不是真正的深拷贝。
这里引用知乎问答里面的一张图
第一层的属性确实深拷贝拥有了独立的内存但更深的属性却仍然公用了地址所以才会造成上面的问题。
同理concat方法与slice也存在这样的情况他们都不是真正的深拷贝这里需要注意。
2.除了递归我们还可以借用JSON对象的parse和stringify 复制代码
function deepClone(obj){let _obj JSON.stringify(obj),objClone JSON.parse(_obj);return objClone
}
let a[0,1,[2,3],4],bdeepClone(a);
a[0]1;
a[2][0]1;
console.log(a,b);复制代码
可以看到这下b是完全不受a的影响了。
附带说下JSON.stringify与JSON.parse除了实现深拷贝还能结合localStorage实现对象数组存储。有兴趣可以阅读博主这篇文章。
localStorage存储数组对象localStorage,sessionStorage存储数组对象
3.除了上面两种方法之外我们还可以借用JQ的extend方法。
$.extend( [deep ], target, object1 [, objectN ] )
deep表示是否深拷贝为true为深拷贝为false则为浅拷贝
target Object类型 目标对象其他对象的成员属性将被附加到该对象上。
object1 objectN可选。 Object类型 第一个以及第N个被合并的对象。 let a[0,1,[2,3],4], b$.extend(true,[],a); a[0]1; a[2][0]1; console.log(a,b); 可以看到效果与上面方法一样只是需要依赖JQ库。
说了这么多了解深拷贝也不仅仅是为了应付面试题在实际开发中也是非常有用的。例如后台返回了一堆数据你需要对这堆数据做操作但多人开发情况下你是没办法明确这堆数据是否有其它功能也需要使用直接修改可能会造成隐性问题深拷贝能帮你更安全安心的去操作数据根据实际情况来使用深拷贝大概就是这个意思。
