ES5,ES6浅层深层克隆的对比

]

ES5 :原生方法

ES6 ：使用展开运算符 …

ES5

浅层克隆和深层克隆的概念和方法

1.概念

在javascript中，把目标对象的属性值复制到一个新对象中，把目标对象中的属性值原封不动的复制到新对象中就是浅层克隆，此时若存在符合属性（对象，数组），新旧两个对象里面存储的指针指向同一个房间，即两者间会相互影响，为了解决互相影响的问题，需要使用深度克隆。

2.浅层克隆的方法

	
 
    var car1 = {
		name : 'marzs',
		color: 'red',
		attribute :{
			heiight : '5.2m',
			weight : '500kg'
		},
		type:['0071','0082','0093'],
        print(){
            console.log(this.color,this.name)
        }
	}
    var car2 = {};
// 封装一个函数  把car1 的属性克隆给 car2
	function clone (target,origin){
	var traget = target || {}  // 做个兼容
	for(prop in origin){
		target[prop] = origin[prop];
		}
		return target
	}	
	clone(car2,car1)

console.log(car1.attribute === car2.attribute)  //true  指针指向同一个房间
console.log(car1.type === car2.type)  // true
console.log(car1.print === car2.print)  // true

3.深层克隆的方法

1.原理

利用递归的思想，当在属性中碰到对象，数组这样的复合属性时，一层一层的复制属性里面的原始值。

	 
    var car1 = {
		name : 'marzs',
		color: 'red',
		attribute :{
			heiight : '5.2m',
			weight : '500kg'
		},
		type:['0071','0082','0093'],
        print(){
            console.log(this.color,this.name)
        }
	}
	  var car2 = {};
	 // 封装一个深层克隆的函数
	 function deepClone(Origin, Target) {
        var Target = Target || {};
        var toStr = Object.prototype.toString; //原型链上的toString方法，判断是数组还是对象
        var arrStr = '[object Array]';
        for (var prop in Origin) {
            if (Origin.hasOwnProperty(prop)) {
                if (Origin[prop] !== 'null' && typeof (Origin[prop]) == 'object') {
                    // if (toStr.call(Origin[prop]) == arrStr) {
                    //     Target[prop] = [];
                    // } else {
                    //     Target[prop] = {};
                    // }
                    toStr.call(Origin[prop]) == arrStr ? Target[prop] = [] :Target[prop] = {};
                    deepClone(Origin[prop], Target[prop])
                } else {
                    Target[prop] = Origin[prop];
                }
            }
        }
        return Target
    }
 
    deepClone(car2,car1)
console.log(car1.attribute === car2.attribute)  //false  
console.log(car1.type === car2.type)  // false
console.log(car1.print === car2.print)  // false
	  

ES6

浅层克隆和深层克隆的方法

注：ES6的出现，就是为了解决ES5 中代码的冗余，和一些容易发生的错误，降低代码出错的几率 ，使用 （...） 剩余运算符来实现克隆

1.浅层克隆

	    const car1 = {
		name : 'marzs',
		color: 'red',
		attribute :{
			heiight : '5.2m',
			weight : '500kg'
		},
		type:['0071','0082','0093'],
        print(){
            console.log(this.color,this.name)
        }
	}
	  const car2 = {
		...car1   // 剩余运算符展开对象为ES7的语法
	};
	  
console.log(car1.attribute === car2.attribute)  //true  指针指向同一个房间
console.log(car1.type === car2.type)  // true
console.log(car1.print === car2.print)  // true

2.深层克隆

	    const car1 = {
		name : 'marzs',
		color: 'red',
		attribute :{
			heiight : '5.2m',
			weight : '500kg'
		},
		type:['0071','0082','0093'],
        print(){
            console.log(this.color,this.name)
        }
	}
	  const car2 = {
		...car1 
		attribute{
			...car1.attribute  //会覆盖之前的
		}
		type:[...car1.type]  //剩余运算符展开对象为ES6的语法
	};
// 当知道目标对象有哪些值是复合属相时，可以如此操作。