js 赋值、浅拷贝、深拷贝

了解js的浅拷贝、深拷贝之前我们必须要了解js的数据类型以及他们在内存中的储存方式

1：基础类型

string、number、null、undefind、symbol

基础类型的值是直接存在堆当中，传的是值

2:引用类型

object

引用类型的值分两步份、一份是值得地址存在堆当中、另外一部分值是存在栈当中 

3：赋值

 1 var obj = { 
 2    name:"小刘",//str 类型
 3    age:1,//number 类型
 4    language:undefined,//undefined 类型
 5    weight:null,//null 类型
 6    hobby:['学习'],// object 类型（数组）
 7    study:{ //object 类型
 8        math:89,
 9        english:98
10    }
11  } 
12  var obj1 = obj
13  obj1.name = "小华"
14  obj1.hobby[0] = '打游戏'
15  obj1.weight = '90'
16  console.log(obj)
17 //  {
18 //   name: '小华',
19 //   age: 1,
20 //   language: undefined,
21 //   weight: '90',
22 //   hobby: [ '打游戏' ],
23 //   study: { math: 89, english: 98 }
24 // }
25  console.log(obj1)
26 //  {
27 //   name: '小华',
28 //   age: 1,
29 //   language: undefined,
30 //   weight: '90',
31 //   hobby: [ '打游戏' ],
32 //   study: { math: 89, english: 98 }
33 // }

obj、obj1 一毛一样

4：浅拷贝

var obj = { 
   name:"小刘",//str 类型
   age:1,//number 类型
   language:undefined,//undefined 类型
   weight:null,//null 类型
   hobby:['学习'],// object 类型（数组）
   study:{ //object 类型
       math:89,
       english:98
   }
 } 
 function copy(obj){
     var newObj = {}
     for(var key in obj){
        if(obj.hasOwnProperty(key)){//遍历自身属性、忽略继承属性
            newObj[key] = obj[key]
        }
     }
     return newObj
 }
 var obj1 = copy(obj)
 obj1.name = "小华"
 obj1.hobby[0] = '打游戏'
 obj1.weight = '90'
 console.log(obj)
//  {
//   name: '小刘',
//   age: 1,
//   language: undefined,
//   weight: null,
//   hobby: [ '打游戏' ],
//   study: { math: 89, english: 98 }
// }
 console.log(obj1)
//  {
//   name: '小华',
//   age: 1,
//   language: undefined,
//   weight: '90',
//   hobby: [ '打游戏' ],
//   study: { math: 89, english: 98 }
// }

从上面我们可以看到obj里面得name这个数据类型是基础类型得值改变了，但是hobby这个引用类型两者都变化了。

如果我们想要做到引用类型也做到完全复制，就要使用深拷贝了。

4：深拷贝

 1 var obj = { 
 2    name:"小刘",//str 类型
 3    age:1,//number 类型
 4    language:undefined,//undefined 类型
 5    weight:null,//null 类型
 6    hobby:['学习'],// object 类型（数组）
 7    study:{ //object 类型
 8        math:89,
 9        english:98
10    }
11  } 
12  function deepCopy(obj){
13      return JSON.parse(JSON.stringify(obj))
14  }
15  var obj1 = deepCopy(obj)
16  obj1.name = "小华"
17  obj1.hobby[0] = '打游戏'
18  obj1.weight = '90'
19  console.log(obj)
20 // {
21 //   name: '小刘',
22 //   age: 1,
23 //   language: undefined,
24 //   weight: null,
25 //   hobby: [ '学习' ],
26 //   study: { math: 89, english: 98 }
27 // }
28  console.log(obj1)
29 // {
30 //   name: '小华',
31 //   age: 1,
32 //   weight: '90',
33 //   hobby: [ '打游戏' ],
34 //   study: { math: 89, english: 98 }
35 // }

 深拷贝还能用递归实现（项目中不建议）

 1 var obj = { 
 2    name:"小刘",//str 类型
 3    age:1,//number 类型
 4    language:undefined,//undefined 类型
 5    weight:null,//null 类型
 6    hobby:['学习'],// object 类型（数组）
 7    study:{ //object 类型
 8        math:89,
 9        english:98
10    }
11  } 
12  function deepCopy(obj){
13     var newObj = obj instanceof Array?[]:{}
14     for(var key in obj){
15         if(typeof(obj[key])== 'object'){
16             console.log(111)
17             newObj[key] = deepCopy(obj[key])
18         }else{
19             console.log(222)
20             newObj[key] = obj[key]
21         }
22     }
23     return newObj
24  }
25  var obj1 = deepCopy(obj)
26  obj1.name = "小华"
27  obj1.hobby[0] = '打游戏'
28  obj1.weight = '90'
29  console.log(obj)
30 // {
31 //   name: '小刘',
32 //   age: 1,
33 //   language: undefined,
34 //   weight: null,
35 //   hobby: [ '学习' ],
36 //   study: { math: 89, english: 98 }
37 // }
38  console.log(obj1)
39 // {
40 //   name: '小华',
41 //   age: 1,
42 //   language: undefined,
43 //   weight: '90',
44 //   hobby: [ '打游戏' ],
45 //   study: { math: 89, english: 98 }
46 // }

 

posted @ 2021-08-04 14:05  Liu-H-W  阅读(130)  评论(0)    收藏  举报