js原生深拷贝
/*****************************************************************************************/
原生js实现深拷贝 function clone(target){
if(typeof target === 'object'){
let obj = Array.isArray(target) ? [] : {}
for(const key in target ){
obj[key] = clone(target[key])
}
return obj;
}else{
return target;
}
} 例子: var obj1 = {
name:'abc',
age:10,
children:{
name:'abc-child',
age:2
},
address:[1,2,3,4,56,323]
} var obj2 = clone(obj1) // 得出obj2对象 /*****************************************************************************************/ 以上拷贝能解决大部分深拷贝问题,除了还有引用的对象;
例子: obj1.obj = obj1 //
var obj3 = clone(obj1) //----会报错 报错信息:
Uncaught RangeError: Maximum call stack size exceeded
at new Map (<anonymous>)
at clone (<anonymous>:1:29)
at clone (<anonymous>:9:24)
at clone (<anonymous>:9:24)
at clone (<anonymous>:9:24)
at clone (<anonymous>:9:24)
at clone (<anonymous>:9:24)
at clone (<anonymous>:9:24)
at clone (<anonymous>:9:24)
at clone (<anonymous>:9:24) 原因:obj1的深拷贝引出了无限循环,因为obj1.obj引用了它本身; 解决办法:
1, obj1.obj = clone(obj1)
2,修改clone方法如下: function clone(target,map=new Map()){
if(typeof target === 'object'){
let obj = Array.isArray(target) ? [] : {}
if(map.get(target)){
return target;
}
map.set(target,obj);
for(const key in target ){
obj[key] = clone(target[key])
}
return obj;
}else{
return target;
}
} /*优化版*/
function clone(target,map=new WeakMap()){
if(typeof target === 'object'){
let obj = Array.isArray(target) ? [] : {}
if(map.get(target)){
return target;
}
map.set(target,obj);
for(const key in target ){
obj[key] = clone(target[key])
}
return obj;
}else{
return target;
}
}
obj1.obj = obj var obj3 = clone(obj1,map)
js原生深拷贝的更多相关文章
- 一篇文章彻底说清JS的深拷贝/浅拷贝
一篇文章彻底说清JS的深拷贝and浅拷贝 这篇文章的受众 第一类,业务需要,急需知道如何深拷贝JS对象的开发者. 第二类,希望扎实JS基础,将来好去面试官前秀操作的好学者. 写给第一类读者 你只需要一 ...
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
- JS原生效果瀑布流布局的实现(一)
JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...
- 工作当中实际运用(3)——js原生实现鼠标点击弹出div层 在点击隐藏
function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...
- 仿jQuery的siblings效果的js原生代码
仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...
- js原生的url操作函数,及使用方法。(附:下边还有jquery对url里的中文解码函数)
js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var ...
- 图片轮播(左右切换)--JS原生和jQuery实现
图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章 淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...
- 图片轮播(淡入淡出)--JS原生和jQuery实现
图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...
- 手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
随机推荐
- 使用提示(Hints)
对于表的访问,可以使用两种Hints. FULL 和 ROWID FULL hint 告诉ORACLE使用全表扫描的方式访问指定表. 例如: SELECT /*+ FULL(EMP) */ * FRO ...
- oracle强制索引失效
如果两个或以上索引具有相同的等级,你可以强制命令ORACLE优化器使用其中的一个(通过它,检索出的记录数量少) . 举例: SELECT ENAME FROM EMP WHERE EMPNO = 79 ...
- tp3.2.3 解决http://lx.com/后必须加index.php才能访问的问题,配置文件中忘了加index index.php index.html 等默认文件
server { listen 80; server_name lx.com; root "D:\phpstudy\PHPTutorial\WWW\liuxue"; locatio ...
- 2018-8-10-win10-uwp-slider-隐藏显示数值
title author date CreateTime categories win10 uwp slider 隐藏显示数值 lindexi 2018-08-10 19:17:19 +0800 20 ...
- LOGO的浮空显示-Verilog
为了方便生成准确的mif数据,以实现特定的透明效果.使用Photoshop将网上下载的Logo修改颜色,保存大小为120*120像素,如图1所示. 图1 ps修改后的Logo 使用Pic2mif软件, ...
- 2018-9-2-WPF-开发自动删除软件
title author date CreateTime categories WPF 开发自动删除软件 lindexi 2018-09-02 14:51:48 +0800 2018-08-09 09 ...
- 2018-6-15-win10-uwp-xaml-绑定接口
title author date CreateTime categories win10 uwp xaml 绑定接口 lindexi 2018-6-15 21:7:19 +0800 2018-2-1 ...
- 51nod 挑剔的美食家
挑剔的美食家 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 与很多奶牛一样,Farmer John那群养尊处优的奶牛们对食物越来越挑剔,随便拿堆草就能打发她们午饭的日子自然是一 ...
- javascript修改css样式表
//创建var sheet=document.createElement('style');document.bodt.appendChild(sheet);sheet.styleSheet.cssT ...
- 019.MFC_两种对话框
对话框分为模态和非模态对话框两种 模态对话框(Modal) d.DoModal() 必须关闭才能返回主窗口 非模态对话框(Modaless) p->Create(IDD_DIALOG,this) ...