JavaScript中对象的深拷贝来说一直都算比较恶心 毕竟没有什么api能直接全拷贝了 得自己便利写  最近在项目中需要深拷贝 自己简单封了个方法

话不多说 直接上码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

     <script>

    function deepCopy(arr_obj){

        //constructor 属性返回对创建此对象的数组函数的引用。

        let obj_arr = arr_obj.constructor === Array ? [] : {};

         for(let key in arr_obj){

             //Object.prototype.toString.call()类型判断

             //Object.prototype.toString.call(obj_arr) 返回 [object Object] 或者 [object Array]

             if(Object.prototype.toString.call(arr_obj[key]) === '[object Object]'){

                 obj_arr[key] = deepCopy(arr_obj[key]);

             }else{

                 if(Object.prototype.toString.call(arr_obj[key]) === '[object Array]'){

                     //console.log(arr_obj[key]);

                     arr_obj[key].forEach((item,index)=>{

                         if(Object.prototype.toString.call(item) === '[object Object]'){

                             obj_arr[key][index] = deepCopy(item);

                         }else{

                             obj_arr[key] = [];

                             obj_arr[key][index] = item;

                         }

                     })

                 }else{

                     obj_arr[key] = arr_obj[key];

                 }

             }

         }

         return obj_arr

    }

    let objA = {

        a:123,

        b:['a','c',{'a':['a','b',['c','d',{e:'c'}]]}],

        c:'yyyy'

    }

    let objB = deepCopy(objA);

    objA.a = 456

    objA.b.push('yyyy');

    console.log(objA,objB);

     </script>

 </body>

 </html>

这个方法目前为止能拷贝的有 对象的value有数组 数组里面有对象 数组里面有数组 还有一些嵌套之类的 在复杂的数据结构没测过 不过这种也基本够用了

我改了objA.a 和objA.b.push('yyyy');

和深拷贝完成的objB做对比如下：

拷贝成功

JavaScript递归简单实现个对象深拷贝的更多相关文章

  1. JavaScript：利用递归实现对象深拷贝

    先来普及一下深拷贝和浅拷贝的区别浅拷贝:就是简单的复制,用等号即可完成 let a = {a: 1} let b = a 这就完成了一个浅拷贝但是当修改对象b的时候,我们发现对象a的值也被改变了 b. ...

  2. JavaScript递归实现对象深拷贝

    let personOne = { name:"张三", age:18, sex:"male", children:{ first:{ name:"z ...

  3. javascript对象深拷贝，浅拷贝 ，支持数组

    javascript对象深拷贝,浅拷贝 ,支持数组 经常看到讨论c#深拷贝,浅拷贝的博客,最近js写的比较多, 所以也来玩玩js的对象拷贝. 下面是维基百科对深浅拷贝的解释: 浅拷贝 One meth ...

  4. 简单的 JSON 对象进行深拷贝最简单的方法

    var json = { a: 123, b: '456' }; var json2 = JSON.parse(JSON.stringify(json)); 只需要先使用 JSON.stringify ...

  5. 【原创教程】JavaScript详解之语法和对象

    JavaScript的好的想法:函数.弱类型.动态对象和一个富有表现力的对象字面量表示法. JavaScript的坏的想法:基于全局变量的编程模型.   好了,不管他是好的还是坏的,都是我的最爱,下面 ...

  6. c#用反射原理递归遍历复杂实体对象

    之前在网上看到的都是遍历那种比较简单的实体对象,但是如果有实体嵌套,甚至是包含有List<XXInfo>这种属性的时候就没有办法处理了.通过递归遍历的方式可以完成对复杂实体对象的所有属性的 ...

  7. [C#]对象深拷贝

    关键代码: /// <summary> /// 对象深拷贝 /// </summary> /// <typeparam name="T">泛型& ...

  8. javascript事件：获取事件对象getEvent函数

    在javascript开发中我们会经常获取页面中的事件对象,然后来处理这些事件,例如下面的getEvent函数就是获取javascript下的页面事件对象. function getEvent(eve ...

  9. Javascript学习6 - 类、对象、继承

    原文:Javascript学习6 - 类.对象.继承 Javasciprt并不像C++一样支持真正的类,也不是用class关键字来定义类.Javascript定义类也是使用function关键字来完成 ...

随机推荐

  1. win10部署Python3和Python2

    首先添加两个的环境变量, 使用python3 -m pip -v (后面为自己的pip命令) 工具: pip install you-get you-get -url

  2. NYOJ7——街区最短路径问题

    街区最短路径问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:4  描述:一个街区有很多住户,街区的街道只能为东西.南北两种方向.住户只可以沿着街道行走.各个街道之间的间隔相等 ...

  3. SCUT - 244 - 全新的游戏 - 凸包

    https://scut.online/p/244 除了常规的求凸包求面积,还有一个判断点在凸包内,先找出点所在的三角扇区. #include<bits/stdc++.h> using n ...

  4. hdoj5698

    果然以前不想搞的东西,今天他妈全来了,我要爆炸,除了说操....真是欲哭无泪啊..... //这道题目卡在逆元了.... //利用逆元计算1/(n!(m-n)!) //对于正整数a,m如果有ax≡1( ...

  5. AT2534 港湾設備 (Port Facility)

    洛谷 先膜一下Iscream巨巨 首先我们可以把题目转化为线段覆盖,如果两条线段相交(不算某一条完全在另一条里面的情况),那么这两条线段代表的集装箱就不能放到同一个栈里,我们在它们之间连一条边.如果图 ...

  6. bzoj4145 [AMPPZ2014]The Prices（状压dp）

    Description 你要购买m种物品各一件,一共有n家商店,你到第i家商店的路费为d[i],在第i家商店购买第j种物品的费用为c[i][j], 求最小总费用. Input 第一行包含两个正整数n, ...

  7. 优化 SQL 查询：如何写出高性能SQL语句

    1. 首先要搞明白什么叫执行计划? 执行计划是数据库根据SQL语句和相关表的统计信息作出的一个查询方案,这个方案是由查询优化器自动分析产生的,比如一条SQL语句如果用来从一个 10万条记录的表中查1条 ...

  8. PJzhang:centos7上LNMP方式安装dvwa漏洞测试环境

    猫宁!!! 参考链接:https://www.jianshu.com/p/5491ce5bfbac https://www.cnblogs.com/wujuntian/p/8183952.html h ...

  9. Java Web中实现设置多个域名跨域访问

    添加以下设置可允许所有域名跨域访问: response.setHeader("Access-Control-Allow-Origin","*"); 但在实际应用 ...

  10. wordpress数据库结构及表说明

    数据表结构: wp_commentmeta:存储评论的元数据wp_comments:存储评论wp_links:存储友情链接(Blogroll)wp_options:存储WordPress系统选项和插件 ...