JavaScript递归简单实现个对象深拷贝

Posted 2021-01-05 y-y-y-y

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript递归简单实现个对象深拷贝相关的知识，希望对你有一定的参考价值。

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

话不多说直接上码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <script>
11    function deepCopy(arr_obj){
12        //constructor 属性返回对创建此对象的数组函数的引用。
13        let obj_arr = arr_obj.constructor === Array ? [] : {};
14         for(let key in arr_obj){
15             //Object.prototype.toString.call()类型判断
16             //Object.prototype.toString.call(obj_arr) 返回 [object Object] 或者 [object Array]
17             if(Object.prototype.toString.call(arr_obj[key]) === \'[object Object]\'){
18                 obj_arr[key] = deepCopy(arr_obj[key]);
19             }else{
20                 
21                 if(Object.prototype.toString.call(arr_obj[key]) === \'[object Array]\'){
22                     //console.log(arr_obj[key]);
23                     arr_obj[key].forEach((item,index)=>{
24                         if(Object.prototype.toString.call(item) === \'[object Object]\'){
25                             obj_arr[key][index] = deepCopy(item);
26                         }else{
27                             obj_arr[key] = [];
28                             obj_arr[key][index] = item;
29                         }
30                     })
31                 }else{
32                     obj_arr[key] = arr_obj[key];
33                 }
34             }
35         }
36        
37         return obj_arr
38    }
39    let objA = {
40        a:123,
41        b:[\'a\',\'c\',{\'a\':[\'a\',\'b\',[\'c\',\'d\',{e:\'c\'}]]}],
42        c:\'yyyy\'
43    }
44    let objB = deepCopy(objA);
45    objA.a = 456
46    objA.b.push(\'yyyy\');
47    console.log(objA,objB);
48    
49     </script>
50 </body>
51 </html>

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

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

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

拷贝成功

以上是关于JavaScript递归简单实现个对象深拷贝的主要内容，如果未能解决你的问题，请参考以下文章

Day_4——JavaScript复制数据的几种级别-递归实现深拷贝-数组常用的方法