JS深克隆浅克隆

我心飞翔 分类:javascript

深克隆浅克隆

浅度克隆:原始类型为值传递,对象类型为引用传递。浅克隆的对象的引用值是拷贝对象里的引用,这两个对象里面的引用(如对象里的数组或者内嵌对象)指向的地方是一致的。

深度克隆:所有对象的属性和值均全部复制,即所有新对象的修改不会影响原对象。

有一个数组,包括基本类型,对象和正则。现在对数组进行克隆。

 let arr1 = [10, 20, {name: '小宝贝'}, /^\d+$/, function () {}]; 

 

浅克隆

  1. 浅克隆: 只把第一级克隆一份过来,第二级及以后和原始对象公用相同的堆地址。
  2. 比较常见的方法:...(展开运算符)、 slice、
  3. 函数的克隆通过浅克隆就可以实现,并不影响原函数。因为函数克隆会在内存中单独开辟一片空间,互不影响。
        let arr2 = [...arr1];
		console.log(arr1,arr2);
		arr1 === arr2   //false
		arr1[2] === arr2[2]   //true
 
        let arr2 = arr1.slice(0);
 

深克隆

常见方法

1. JSON.parse(JSON.stringify())
  1. 基于JSON方法,先把原始对象转换为字符串,再把字符串重新定义为对象,此时实现了内容的深度克隆。
  2. 问题:如果对象中的某一项值是正则或者函数,基于JSON.stringify和JSON.parse处理后就不在是正则(变为空对象)或者函数(变为null)了。
  3. 能正确处理的对象只有Number、String、Array等能够被json表示的数据结构,因此函数这种不能被json表示的类型将不能被正确处理。
                let arr2 = JSON.parse(JSON.stringify(arr1));
		arr1 === arr2       //false
		arr1[2] === arr2[2]         //false
 
2. 自己写一个深克隆
  • 思路:
  1. 把浅克隆的框架先写出来,然后再在上面添加条件判断。
  2. 接下来判断属性是否null, 基本类型,function,正则,日期,做相应的处理。
  3. 判断源对象的上的属性是否属于对象上,而不是原型上,因为我们只是要克隆对象上的属性。
  4. 然后用递归的方式,把该属性作为源对象调用deep函数。
  5. 最后一步要记得返回newObj对象
function deep(obj){
            // 如果是null直接返回null
			if (obj === null) return null;
			// 如果是基本数据值或者函数,也直接返回即可(函数无需克隆处理)
			if (typeof obj !== 'object') return obj;
			// 如果是正则, 把当前正则复制(克隆)一份
			if (_type(obj) === '[object RegExp]') return new RegExp(obj); // 创建一个正则
			// 如果是日期格式的数据
			if (_type(obj) === '[object Date]') return new Date(obj);
    // obj.constructor:找到的是所属类原型上的constructor,而原型上的constructor指向的是当前类本身
    // =>保证传递进来什么类型的值,我们最后创建的newObj也是对应类型的
			let newObj = new obj.constructor;
			for (let key in obj) {
				console.log(key)
				if (obj.hasOwnProperty(key)) { 
				
				//in 不知会判断当前对象中是否包含此属性 还会向原型中查找是否包含此属性
				//hasOwnProperty 只会判断当前对象中是否包含此属性
				
				// 如果某一项的值是引用值吗,我们还需要进一步迭代循环,把引用值中的每一项也进一步克隆 =>深度克隆
				newObj[key] = _deepClone(obj[key]);
				}
			}
			return newObj;

}

function _type(value) { // 返回数据类型
    return Object.prototype.toString.call(value);
}
 

然后测试一下

let arr1 = [10, 20, {
    name: '小红'
}, /^\d+$/, function () {console.log(123)}];

let arr2 = deepe(arr1);
console.log(arr2);
arr2[1]=30
arr2[2].name='test'
arr2[3]='string'
console.log(arr1); // 还是原来的
console.log(arr2);
 

另外一个例子

let obj1 = {
			name: '小明',
			ke: ['语文', '数学', '英语'],
			color: {
				n: 'red',
				m: 'blue'
			}
		};
let obj2 = deep(obj1);
console.log(obj2);

obj2.ke.push('物理')
obj2.color['n']='yellow'
console.log(obj1); // 不会被影响,还是原来的
console.log(obj2); 
 

另外一种写法:先用循环读进来,再进行类型判断,只有object需要二次处理。前一种是先判断,再循环。

        function _type(value) {
			return Object.prototype.toString.call(value);
		}

        function _deepClone(obj) {	// 必须保证OBJ是数组或者对象等
			let newObj = new obj.constructor;
			for (let key in obj) {
				if (!obj.hasOwnProperty(key)) {;
				let item = obj[key],
					itemType = _type(item);
				if (item !== null && typeof item === "object") { // 不为空,且不是基本类型或函数
					if (/(RegExp|Date)/.test(itemType)) { //  只要包含RegExp,Date中的一个
						newObj[key] = new item.constructor(item);
						continue;
					}
					// 只有对象才需要深层次克隆处理
					newObj[key] = _deepClone(item);
					continue;
				}
				newObj[key] = item;
			}
			}
			return newObj;
		}
 

回复

我来回复
  • 暂无回复内容