/*****************************************************************************************/
原生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. 为 Ubuntu 18.04 添加开机自动加载 ntfs分区 功能

    注意:Ubuntu终端命令是区分大小写的 1,准备的:     ntfs-3g -- 提供ntfs读写支持(一般说来是自带的,若没有,可是使用 sudo apt-get isntall ntfs-3g ...

  2. 在 Jenkins Windows Agent 节点上执行 Shell 命令

    Jenkins 在 Windows agent 上执行shell 命令,听起来很有意思,以下方法可以在 Jenkins 中执行一些简单的 shell 脚本,如果是复杂脚本就交给 Linux agent ...

  3. HDU 5463

    题意:一个盒子有36个格子.每个格子可以装64个物品,搬运一个箱子是一次搬运,问最少到搬运次数 思路:直接求总需要多少个格子,然后去求盒子,这里求盒子呢有个小技巧,就是用ceil函数 #include ...

  4. 怎么让FOXMAIL关了以后在右下角自动收取邮件

    1.缩小到任务栏:打开foxmail,在工具-系统设置-常规,选项中有一项最小化时在任务栏显示,勾选上即可.2.要自动收取邮件,选中邮件账户,右键打开菜单,属性-接收邮件,右边勾选上“每隔*分钟自动收 ...

  5. C# 使用反射获取私有属性的方法

    本文告诉大家多个不同的方法使用反射获得私有属性,最后通过测试性能发现所有的方法的性能都差不多 在开始之前先添加一个测试的类 public class Foo { private string F { ...

  6. element ui 批量删除

    <el-table :data="tableData" stripe border style="width: 100%" @selection-chan ...

  7. linux内核指针和错误值

    很多内部内核函数返回一个指针值给调用者. 许多这些函数也可能失败. 大部分情况, 失 败由返回一个 NULL 指针值来指示. 这个技术是能用的, 但是它不能通知问题的确切特性. 一些接口确实需要返回一 ...

  8. Linux 内核USB 驱动

    通用串行总线(USB)是一个在主机和许多外设之间的连接. 最初它被创建来替代许多慢速和不同的总线- 并口, 串口, 和键盘连接--有一个单个的所有设备都可以连接的总线类型.[45] USB 已经成长超 ...

  9. SPA+.NET Core3.1 GitHub第三方授权登录 使用AspNet.Security.OAuth.GitHub

    GitHub第三方授权登录 使用SPA+.NET Core3.1实现 GitHub第三方授权登录 类似使用AspNet.Security.OAuth.GitHub,前端使用如下:VUE+Vue-Rou ...

  10. Android studio相关设置及实现存在于工程目录中的视频播放

    一:相关设置 1:主题设置 File-->Settings-->Appearance &Behavior-->Appearance-->THeme 2:Java源码的颜 ...