JavaScript深拷贝

最新推荐文章于 2025-04-22 14:57:14 发布

转载最新推荐文章于 2025-04-22 14:57:14 发布 · 72 阅读

0 ·

CC 4.0 BY-SA版权

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

文章标签：

#javascript #ViewUI

本文通过实例对比浅拷贝与深拷贝的区别，详细解析了深拷贝的实现原理及其实现方式，帮助读者理解如何避免对象引用带来的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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