/*****************************************************************************************/
原生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原生深拷贝的更多相关文章

  1. 一篇文章彻底说清JS的深拷贝/浅拷贝

    一篇文章彻底说清JS的深拷贝and浅拷贝 这篇文章的受众 第一类,业务需要,急需知道如何深拷贝JS对象的开发者. 第二类,希望扎实JS基础,将来好去面试官前秀操作的好学者. 写给第一类读者 你只需要一 ...

  2. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  3. JS原生效果瀑布流布局的实现(一)

    JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  4. 工作当中实际运用(3)——js原生实现鼠标点击弹出div层 在点击隐藏

    function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...

  5. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  6. js原生的url操作函数,及使用方法。(附:下边还有jquery对url里的中文解码函数)

    js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var ...

  7. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  8. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

  9. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

随机推荐

  1. Python3:ImportError: No module named 'compiler.ast'

    from compiler.ast import flatten 上面这条语句好像在python3 以后就废除了,如果使用的话就会报错.Traceback (most recent call last ...

  2. Python--day67--Jsonresponse响应介绍和路由系统的分组命名匹配方式(简单介绍)

    1,Jsonresponse响应介绍: ,2,路由系统的分组命名匹配方式:(简单介绍)

  3. Adam那么棒,为什么还对SGD念念不忘 (3)—— 优化算法的选择与使用策略

    在前面两篇文章中,我们用一个框架梳理了各大优化算法,并且指出了以Adam为代表的自适应学习率优化算法可能存在的问题.那么,在实践中我们应该如何选择呢? 本文介绍Adam+SGD的组合策略,以及一些比较 ...

  4. js常见错误类型及chrome常见报错(更新中)

    ECMA-262 定义了下列 7 种错误类型: 1.Error 错误 2.EvalError 全局错误 eval函数没有正确执行 3.RangeError 范围错误 4.ReferenceError ...

  5. Mule自带例子之flight-reservation

    1 配置效果图 2 应用的配置文件 <?xml version="1.0" encoding="UTF-8"?> <mule xmlns:sc ...

  6. win10 uwp 在 Canvas 放一个超过大小的元素会不会被裁剪

    我尝试在一个宽度200高度200的 Canvas 放了一个宽度 300 高度 300 的元素,这个元素会不会被 Canvas 裁剪了? 经过我的测试,发现默认是不会被裁剪 火火问了我一个问题,如果有一 ...

  7. Vue 循环为选中的li列表添加效果

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vu ...

  8. python NameError: name 'raw_input' is not defined

    错误:NameError: name 'raw_input' is not defined 原因出在raw_input ,python3.0版本后用input替换了raw_input 话说回来,学习p ...

  9. vue项目安装scss,以及安装scss报错(this.getResolve is not a function)

    1.安装scss: npm install node-sass sass-loader vue-style-loader --save-dev //安装node-sass sass-loader vu ...

  10. The Preliminary Contest for ICPC Asia Nanjing 2019ICPC南京网络赛

    B.super_log (欧拉降幂) •题意 定一个一个运算log*,迭代表达式为 给定一个a,b计算直到迭代结果>=b时,最小的x,输出对m取余后的值 •思路 $log*_{a}(1)=1+l ...