JavaScript深拷贝

偶尔在今日头条看到一篇关于JavaScript深拷贝的文章(感谢原作者:外卖杂谈(头条号)),备忘一下

浅拷贝代码:

 1 //浅拷贝
 2     var temp_1 = {name: 'Liang', age: '21',
 3         wife:{
 4             name:"hello",
 5             author:"world"
 6         },
 7         hobby: ['baskeball', 'coding', 'eating', 'sleeping']};
 8     var temp_2 = {};
 9     for (var k in temp_1) {
10         temp_2[k] = temp_1[k];
11     }
12     console.log("push之前");
13     console.log(temp_1);
14     temp_2["hobby"].push("laughing");
15     console.log("push之后");
16     console.log(temp_2);
17     console.log(temp_1);

浏览器输出结果

注意Array的变化。原因:在复制属性值为Object的时候只是进行了简单的地址拷贝

深拷贝:

 1 var temp_1 = {
 2         name: 'Liang', age: '21',
 3         wife: {
 4             name: "hello",
 5             author: "world"
 6         },
 7         hobby: ['baskeball', 'coding', 'eating', 'sleeping']
 8     };
 9     var temp_2 = {};
10     /**
11      *深层拷贝
12      * @param obj1 新对象
13      * @param obj2 被拷贝对象
14      */
15     function myCopy(obj1, obj2) {
16         obj1 = obj1 || {};
17         for (var temp in obj2) {
18             if (obj2.hasOwnProperty(temp)) {//hasOwnProperty(x)    指示对象是否具有指定名称的属性
19                 if (typeof obj2[temp] == 'object') {//属性值为object
20                     obj1[temp] = Array.isArray(obj2[temp]) ? [] : {};//确定属性类型
21                     myCopy(obj1[temp], obj2[temp]);//递归进行处理
22                 } else {
23                     obj1[temp] = obj2[temp]
24                 }
25             }
26         }
27     }
28     myCopy(temp_2,temp_1);
29     console.log("push之前");
30     console.log(temp_1);
31     temp_2["hobby"].push("laughing");
32     console.log("push之后");
33     console.log(temp_2);
34     console.log(temp_1);

运行结果:

代码不难理解,问题主要来自复制对象时候,浅拷贝直接使用了地址引用,导致复制前后两个对象变量含有共享内容,而深拷贝中 obj1[temp] = Array.isArray(obj2[temp]) ? [] : {}; 这行代码重新创建新的变量,so...

如有不正确的地方,麻烦大神指正一下,谢谢!!!

原文地址:https://www.cnblogs.com/liangqinghai/p/6441992.html