ES6中Object.assign()与深拷贝浅拷贝

ES6中Object.assign()与深拷贝浅拷贝

源码点击

1. 浅拷贝

1.1 什么是浅拷贝？

• 拷贝出来的目标对象的指针和源对象的指针指向的内存空间是同一块同一块空间
• 让几个对象共用一个内存

1.2 Object.assign()实现浅拷贝

参数

• 参数一：目标对象，拷贝后返回的对象
• 其他参数：源对象，需要拷贝到目标对象的对象

const target = {a:1}
const object1 = {b:2}
const object2 = {c:3}
console.log(Object.assign(target,object1,object2))
/* {a: 1, b: 2, c: 3} */
object1.b = 4
object2.c = 5
Object.assign(target,object1,object2)
console.log(target)
/* {a: 1, b: 4, c: 5} */

1.2.1 对于Object.assign()的其他说明

1. 合并的时候相同的属性名会被替换

const target = {a:1}
const object = {a:'我要干掉你',b:2}
Object.assign(target,object)
console.log(target)
/* {a: "我要干掉你", b: 2} */

2. 非对象会处理成对象之后，再做其他操作
   • 不能传递null和undefined,因为他们不能转换成基本包装类型

/* 基本类型的处理 */
const target = Object.assign(3)/* 转化成进本包装类型 */
console.log(target)/* Number {3} */
console.log(typeof 3 ,typeof target)/* number object */

3. 对于数组，先转化为普通对象再处理

/* 对于数组的处理 */
console.log(Object.assign([2,3],[7]))/*  [7, 3] */
/* 
1.先转化成对象 {0:2,1:3} {0:7}
2. 同属性名进行替换
 */

1.2.1 变量引用的方式

let obj = {d:4}
let objCopy = obj
console.log(objCopy)

2. 深拷贝

2.1 什么是深拷贝？

• 克隆出一个对象，数据相同
• 但是引用地址不同

2.2 如何实现深拷贝？

2.2.1 使用JSON方法

JSON.parse(JSON.stringify(obj))

//JSON.parse(JSON.stringify(obj))
const target = {sun:"wukong"}
const copyObj = JSON.parse(JSON.stringify(target))
console.log(copyObj)/* {sun: "wukong"} */
target.sun = "xingzhe"
console.log(copyObj)/* {sun: "wukong"} */

2.2.2 使用 浅拷贝+ 递归 实现

使用递归的作用是解决，对象的属性仍旧是对象(嵌套的对象)

{a:{b:{c:{d:'d'}}}}

定义函数

/* 使用浅拷贝 + 递归 */
function copyDeep(obj) {
	//对于数据类型进行辨别
	//1.非对象返回本身
	if (!isObject(obj)) return obj
	//2.初始化数组或者对象
	var target = Array.isArray(obj) ? [] : {}
	//对于对象的处理
	for (let key in obj) {
		if (obj.hasOwnProperty(key)) {
			/* 如果属性是一个对象 */
			if (isObject(obj[key])) {
				target[key] = obj[key]
			} else {
				target[key] = obj[key]
			}
		}
	}
	return target
}

function isObject(obj) {
	/* 注意 null 这个特殊的类型 */
	return typeof obj === 'object' && obj !== null
}

使用

const target1 = {a:{b:{c:{d:'d'}}}}
const copyObj1 = copyDeep(target1)
console.log(copyObj1)//{a:{b:{c:{d:'d'}}}}