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.图片一 ...
随机推荐
- 最新版本的ADT使用问题
昨天把androidsdk和adt更新到最新版本,android sdk r22版本. 更新完后原来的项目打包后出现第三方JAR包找不到,网上搜了半天终于找到问题所在: 新版本多了一个Android ...
- 小程序中使用threejs
webgl调试 起初使用threejs 在小程序里面调试,明明是按着官方的文档来,但是会发现开发者工具上面会提示getContext,经过一翻摸索,发现webgl调试只能在手机端调试. 总结:webg ...
- 使用colab平台进行训练
https://www.zhongxiaoping.cn/2018/12/01/%E4%BD%BF%E7%94%A8colab%E5%B9%B3%E5%8F%B0%E8%BF%9B%E8%A1%8C% ...
- 如何检查linux是否安装了php
方法一.在终端通过php -v命令来查看一下当前php的版本.如果没有安装php,一般会提示没有php这个命令的. 2 方法二.在终端查询安装的包中是否有php,以redhat为例,则可以执行如下命令 ...
- 纯JS前端分页方法(JS分页)
1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...
- [WC2013]平面图——平面图点定位
[WC2013]平面图 码农题 平面图点定位: 1.平面图转对偶图:[HNOI2016]矿区 2.扫描线点定位 把所有的顶点和询问点排序,扫描线 每个边在fr的位置加入,to的位置删除,竖直直线不要 ...
- zshrc配置
大部分没有改动 # If you come from bash you might have to change your $PATH. # export PATH=$HOME/bin:/usr/lo ...
- linux Completions 机制
内核编程的一个普通模式包括在当前线程之外初始化某个动作, 接着等待这个动作结束. 这个动作可能是创建一个新内核线程或者用户空间进程, 对一个存在着的进程的请求, 或 者一些基于硬件的动作. 在这些情况 ...
- AI百度接口以及图灵接口的使用
百度AI接口 AI智能种类方向 耳朵 = 倾听 = 麦克风 = 语音识别 ASR:Automatic Speech Recognition 嘴巴 = 诉说 = 扬声器 = 语音合成 TTS:Text ...
- 2018-8-10-win10-uwp-MVVM-语义耦合
title author date CreateTime categories win10 uwp MVVM 语义耦合 lindexi 2018-08-10 19:16:53 +0800 2018-2 ...