首页 > 编程语言 > 详细

JavaScript深拷贝

时间:2017-02-25 16:51:12      阅读:155      评论:0      收藏:0      [点我收藏+]

偶尔在今日头条看到一篇关于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...

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

 

JavaScript深拷贝

原文:http://www.cnblogs.com/liangqinghai/p/6441992.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!