深度克隆与浅度克隆

浅度克隆与深度克隆的区别

浅度克隆

主要是将数据的地址赋给对应的变量但并没有将具体的值赋值给对应的变量，变量会随着数据的改变而改变

<script>
	var obj = {
		name:'张三',
		age:18,
		sex:'male',
		grade:['English:80','Chinese:80','Math:90']
	}
	var obj = {};
	function clone(orgin,target){
			var target = target || {};
				for(var prop in target){
						target[prop] = orgin[prop]
				}
				return target;
	}
	clone(obj,obj1);
</script>

将obj的值克隆过来，所以产生了一个新的数据也就有了新的地址，原数据的改变不会影响新的数据变化

其他几种浅克隆的方法
1.如果克隆对象是基本类型，直接复制就可以

<script>
	var str1 = "abc"
	var str2 = str1
	console.log(str2)//abc
	str1 = '123'
	console.log(str2)//abc
</script>

2.不是基本类型就不可以直接复制，以数组

<script>
	var a = [1,2,3,4]
	var b = a;
	var c = b;
	c.pop();

	console.log(a);//[1,2,3]
	console.log(b);//[1,2,3,]
	console.log(c);//[1,2,3]
</script>

3.比较简单的遍历数组赋值

<script>
	var a = [1,2,3,4];
	var b = [];
	for(var i = 0;i<arr.length;i++){
		b.push(a[i])
	}
	console.log(b);//[1,2,3,4]
</script>

4.slice方法
返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
从index = 0开始到结尾没有存在没有获取不到的，可以实现克隆。
请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。

<script>
	var arr1 = [1,2,3,4]
	var arr2 = arr1.slice(0);
	console.log(arr2);
	arr1 = [4,2,3,1]
	console.log(arr2)//[1,2,3,4]
</script>

5.assign实现

<script>
	var obj = {a:1};
	var copy = object.assign({},obj);
	consolle.log(copy);//{a:1}

	var arr = [1,2,3];
	var copy = Object.assign([],arr);
	console.log(copy);//[1,2,3]

</script>

深度克隆

是将数据赋值给响应的变量，所以产生了一个新的数据也就有了新的地址，元数据的改变不会影响新的数据

<script>
        var obj1 = {}
        function deepClone(origin, target) {
            var target = target || {}; //以防用户没传，默认是对象
            for (var prop in origin) {
                //hasOwnProperty是用来判断某个属性是不是在对象自己的属性，它不会检测到原型链上去
                if (origin[prop] !== null && origin.hasOwnProperty(prop)) { //一定得确定对象上的属性不是原型链上的
                    if (typeof (origin[prop]) == 'object') { //判断是不是原始值
                        //在不是原始值的情况下，判断是数组还是对象
                        target[prop] = Object.prototype.toString.call(origin[prop]) == '[object Array]' ? [] : {};
                        deepClone(origin[prop], target[prop]);

                    } else {
                        target[prop] = origin[prop];
                    }
                }

            }
            return target;
        }
        var obj = {
            name: 'du',
            age: 21,
            brother: {
                name: 'rui',
                age: 12
            }
        };
</script>

其他深克隆

<script>
	let arr1 = [1,2,3,4];
	let arr2 = arr1.concat()
   arr2[1] = 9
   console.log(arr1,arr2);//[1,2,3,4],[1,2,3,4] 
</script>

<script>
	  var obj={
     		name:'du',
     		age:21,
     		borther:{
     		    name:'rui',
     		    age:12
     		}
     	};
     	var obj1 = JSON.parse(JOSN.stringify(obj));
     	
</script>