js的深浅拷贝与赋值 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <script>
11         /**
12          * 1.什么是深浅拷贝
13          * 2.实现的方式
14          * 3.在vue的使用
15          **/
16 
17 
18          /**
19           * String 字符串
20           * Number 数值
21           * Boolean 布尔值
22           * Null 空值
23           * Undefined 未定义
24           * Object 对象
25           *
26           * 基本数据类型： String Number Boolean Null Undefined
27           * 引用数据类型： Object
28           *
29           * 使用typeof检查Null值，会返回Object
30           * */
31 
32          //拷贝
33         var a = 123  //存储于栈
34         var obj = {} //存储于堆
35         //栈 指向 堆
36 
37 
38 
39         //赋值
40         //  基本数据类型直接保存在栈内存中
41         var person = {        //person 变量存储于栈中； name、hobby为对象，存储于堆中
42             name: '爱就一个字',
43             hobby:['休息',['看电视','听音乐'],'运动']
44         }
45 
46         var person1 = person  //赋值 将person的值赋值给person1，也就是name、hobby对象，得到的是person的地址
47         person1.name = '望相似'
48         person1.hobby[0] = '玩耍'
49         console.log(person)  
50         console.log(person1) //结果一样,为修改后的值
51 
52 
53 
54         // 浅拷贝
55         // 浅拷贝是创建一个新对象，这个对象有着原始对象属性的一份精确拷贝。
56         // 如果属性是基本类型，拷贝的就是基本类型的值；如果属性是引用类型，拷贝的就是内存地址
57         // 如果其中一个对象改变了这个地址，就会影响到另一个对象
58         // 重新在堆中创建内存，拷贝前后对象的基本数据类型互不影响，但对象的引用类型因共享一块内存，会互相影响
59 
60         function shallowCopy(person) {
61             var target = {} //重新创建了一个内存
62             for (var i in obj) {
63                 if (obj.hasOwnProperty(i)) {
64                     target[i] = obj[i]
65                 }
66             }
67             return target
68         }
69         var person2 = shallowCopy(person)  //浅拷贝于person2
70         person.name = '朱大壮'  //改变基本类型
71        
72         person2.hobby[0] = '睡觉' //改变引用类型
73         console.log(person) //基本类型不变 name= 爱就一个字 ，hobby[0] = 睡觉
74         console.log(person2)//name = 朱大壮,hobby[0] = 睡觉
75 
76 
77         // 深拷贝
78         // 将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个的区域存放新对象
79         // 且修改新对象不会影响到原对象
80 
81         function deepClone(obj) {
82             var cloneObj = new obj.constructor()// var cloneObj = {}
83             if (obj === null) return obj
84             if (obj instanceof Date) return new Date(obj)
85             if (obj instanceof RegExp) return new RegExp(obj)
86             if (typeof obj !== 'object') return obj
87             for (var i in obj) {
88                 if (obj.hasOwnProperty(i)) {
89                     cloneObj[i] = deepClone(obj[i])
90                 }
91             }
92             return cloneObj
93         }
94 
95     </script>
96 </body>
97 </html>

 

posted @ 2021-10-27 14:59  TM_cc  阅读(190)  评论(0)    收藏  举报