Object对象assign方法

发表于 | 分类于

JS中深拷贝和浅拷贝

一 : 先来区分下一个小的细节 点操作符 和 [ ] 操作 对象属性的时候的区别

1
2
3
4
5
6
var arr = [12,13,14];
 for(key in arr){
     console.log(key);  //输出数组的索引  0,1,2···
     console.log(arr.key); //undefined  undefined undefined
     console.log(arr[key]); // 12 13 14
 }
1
2
3
4
5
6
7
8
9
10
var obj = {
       name:"Jhon",
       age:13,
       address:"American"
   }
   for(key in obj){
       console.log(key);  // name age address
       console.log(obj.key); //undefined undefined undefined
       console.log(obj[key]); // Jhon  13 American
   }
1
2
3
4
5
6
7
8
9
10
11
12
var obj = {
       name:"Jhon",
       age:13,
       address:"American"
   }
   console.log(obj.name) //Jhon
   console.log(obj["name"]) //Jhon
   
   var key = "name";
console.log(obj[key]) //Jhon
   console.log(obj.key)  //Jhon
   //[] 可以接受变量，点操作符不可以

二 下面来实现一个浅拷贝的源码: 浅拷贝是指在复制一个对象的时候，仅仅对第一层的键值对进行复制，第二层的对象复制的是一个地址

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
  function shadowCopy (target,source){
        if(!source || typeof source !== 'object'){  //source必须是对象
            return;
        }
        if(!target || typeof target !== 'object'){
            return;
        }
        for(var key in source){  
            if(source.hasOwnProperty(key)){
                target[key] = source[key];//注意必须用[]形式，不能用点操作符
            }
        }
    }
    var obj1 = {
        name:"Jhon",
        age:13,
        address:"American",
        other:{		//other是一个对象
            gender:"man"
        }
    }
    var obj2 = {};
    shadowCopy(obj2,obj1);
    console.dir(obj2);
    //浅拷贝有一个问题，就是复制的obj2中的other和obj1中的other指向的是同一个对象
	obj1.name = "JiM";
    obj1.other.gender = "woman"; //修改obj1中的属性gender
	
	console.log(obj2.name);//Jhon  // obj2中的name不会跟着改变 
    console.log(obj2.other.gender);//woman //obj2中的gender也跟着改变
//基本数据类型复制传值，复杂数据类型的复制传地址，这个是内因
//这是浅拷贝的一个缺陷，虽然说也拷贝了一份，但是对于对象的拷贝不够彻底

三 深拷贝原理如下:用到了递归

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function deepCopy (target,source){
        if(!source || typeof source !== 'object'){  //source必须是对象
            return;
        }
        if(!target || typeof target !== 'object'){
            return;
        }
        for(var key in source){  
            if(source.hasOwnProperty(key)){
               if(source[key] && typeof source[key] == 'object'){
                 	target[key] = {};
                 	deepCopy(source[key],target[key]);
               }else{
                 	target[key] = source[key];
               }
            }
        }
    }

注意数组的slice和concat方法其实是一种浅复制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
    var arr = [{
        id : 1,
        price : '40',
    },{
        id : 2,
        price : '30',
    },{
        id : 3,
        price : '60',
    },{
        id : 4,
        price : '30',
    }];
    var newArr = arr.slice(0);	//复制数组
    console.dir(newArr);	
    console.dir(newArr[0].id);	//1
    arr[0].id = 666;
    console.dir(newArr[0].id);	//666
</script>