深浅拷贝方法总结、练习-一一网

深拷贝与浅拷贝简介：

深拷贝: 深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。

浅拷贝: 浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

浅拷贝常见方法：数组的slice()、concat()、Array.from()、Object.assign()、…(拓展运算符)、递归方式实现

方法一：slice()

        let testArr1 = [1, 2, { name: 'echo' }, [11, 22]];
	let shallowClone1 = testArr1.slice();
	shallowClone1[0] = 666;
	shallowClone1[2].name = 'boy';
	shallowClone1[3][0] = 111
	console.log(shallowClone1); //[ 666, 2, { name: 'boy' }, [111, 22] ]
	console.log(testArr1); //[ 1, 2, { name: 'boy' }, [111, 22] ]
	// 通过结果看出若数组一层的基础数据类型进行浅拷贝，是直接独立出来的空间。引用数据类型则不是。
复制代码

方法二： concat()

		let testArr2 = [1, 2, 3];
		let shallowClone2 = testArr2.concat()
		shallowClone2[0] = 11;
		console.log(testArr2); // [1, 2, 3]
		console.log(shallowClone2); // [11, 2, 3]
复制代码

3.方法三： Array.from()

		let testArr3 = [2, 4, 6];
		let shallowClone6 = Array.from(testArr3, item  => item)
		console.log('这里是array.from的结果') 
                //Array.from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
		console.log(shallowClone6) //[2, 4, 6]
复制代码

方式四 Object.assign()

		//项目中常用
		let testObj1 = { name: 'echo', age: 6, c: { sex: 1} }
		let shallowClone3 = Object.assign({}, testObj1, {age: 9});
		console.log(testObj1) // {name: "echo", age: 6, c: { sex: 1 }}
		console.log(shallowClone3) // {name: "echo", age: 9, c: { sex: 1 }}
		//对对象的引用
		shallowClone3.c.sex = 0
		console.log(testObj1) // {name: "echo", age: 6, c: { sex: 0 }}
		console.log(shallowClone3) // {name: "echo", age: 6, c: { sex: 0 }}
		//从结果中可以看出 浅拷贝的方式对引用类型进行修改会影响源数据
复制代码

方式五 … (拓展运算符)

		let testObj2 = { name: 'echo2', age: 6, obj: { like: 'code'}}
		let shallowClone4 = {...testObj2}
		shallowClone4.age = 9
		console.log(testObj2) //{name: "echo2", age: 6}
		console.log(shallowClone4) //{name: "echo2", age: 9}
		//对象的引用
		shallowClone4.obj.like = 'JavaScript'
		console.log(testObj2) // {name: "echo2", age: 6, obj: { like: 'JavaScript'}}
		console.log(shallowClone4) // {name: "echo2", age: 6, obj: { like: 'JavaScript'}}
复制代码

方式六：递归实现

   	function shallowClone(obj) {
   	  if (typeof obj === 'object' && obj !== null) {
   	    const cloneTarget = Array.isArray(obj) ? []: {};
   	    for (let key in obj) {
   	      if (obj.hasOwnProperty(key)) {
   	          cloneTarget[key] = obj[key];
   	      }
   	    }
   	    return cloneTarget;
   	  } else {
   	    return obj;
   	  }
   	}
复制代码

为解决浅拷贝对引用数据类型操作改变了源数据，采用深拷贝来解决问题

深拷贝常见实现方式： JSON.parse(JSON.srtingfy())、递归实现

方式一： JSON.parse(JSON.srtingfy())

		// 通过JSON.srtingfy()将数据转为json格式，通过JSON.parse()解析josn数据
		// 弊端： 
			// 1. 无法对Date、RegExp、Error对象进行深拷贝
			// 2. 无法对函数
			// 3. 无法解决循环引用
			// 4. 如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null
		let testObj3 = { name: 'lufei', age: 6, obj: { like: 'code' }};
		let deepClone1 = JSON.parse(JSON.stringify(testObj3))
		deepClone1.obj.like = 'girl'
		console.log(testObj3) // {name: "lufei", age: 6, obj: { like: 'code'}}
		console.log(deepClone1) // {name: "lufei", age: 6, obj: { like: 'girl'}}
复制代码

方式二：递归实现

		function deepClone(obj) {
		    if(typeof obj !== 'object') { return }
		    let objTwo =  Array.isArray(obj) ?  [] : {}
		    for(let key in obj){
		        if(obj.hasOwnProperty(key)){
		            objTwo[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key]
		        }
		    }
		    return objTwo
		}
		let ooo = {name: 1,age:222, obj: { haha: '哈哈'}}
		deepClone(ooo)
		
		console.log('原始值和引用值 Array.from')
		//类数组
		let obj = {
			0:'1',
			1:'2',
			length: 2,
		}
		let objArr = Array.from(obj, (item, index) => {
			return 'No.' + item
		})
		console.log(objArr)
		
		let arr = [1,2]
		arr = Array.from(arr)
		console.log(arr === Array.from(arr))
		
		function Fun() {
			this.name = 'echo'
		}
		let oi = new Fun()
		console.log(oi)
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端