js深度拷贝的方法 | 小浩之随笔

发布日期: 2020-09-04

阅读次数:

引入：原始值与引用值的复制

当我们复制原始数据时，如数值、字符串，举例来说，下面的b相当于开辟了新的空间来放置变量b，并储存了a的值，所以改变b的值不会影响a的值。

let a=1
let b=a
console.log(a) //1
console.log(b) //1

b=2
console.log(a) //1
console.log(b) //2

而当我们复制引用数据时，如数组、对象，如下：

let person={name:'hu'}
let student=person
console.log(person) //{name:'hu'}
console.log(student) //{name:'hu'}
console.log(person==student)//true

//改变数据
student.name='hao'
console.log(student) //{name:'hao'}
console.log(person) //{name:'hao'}
console.log(person==student)//true

为什么person也跟着变了呢？
这是因为person指向的是{name:'hu'}对象，student只是单纯的复制了一个指向，也就是同样地指向了{name:'hu'}对象，可以理解为{name:'hu'}对象是它们两者共享的区域。所以当student改变name的时候，并不是改变本身，而改变了{name:'hu'}这个共享区域的name，而此时person 的指向没有变化，所以person的name也随之变化了。

这往往不是我们希望得到的结果。那如何复制了引用类型后，不会改变原来的值呢？那就要深度拷贝

总结：深度拷贝的方法

对象

方法一：Object.assign({},origin)

let person={name:'hu'}
let student=Object.assign({},person)

只对一级属性的对象有效

方法二：洗钱大法JSON.parse(JSON.stringify(origin))

let person={name:'hu'}
let student=JSON.parse(JSON.stringify(person))

方法三：解构复制拷贝

let person={name:'hu',age:20,sex:"男"}
let student={...person}
student.work = "程序员"
console.log(person,student)
//{name: 'hu', age: 20, sex: '男'}
//{name: 'hu', age: 20, sex: '男', work: '程序员'}

只对一级属性的对象有效

数组

方法一：[].concat(origin)

let animals=['老虎','狮子']
let zoo=[].concat(animals)

对于一维数组是深拷贝，对一维以上的数组是引用

方法二：origin.slice()

let animals=['老虎','狮子']
let zoo=animals.slice()

对于一维数组是深拷贝，对一维以上的数组是引用

方法三：数组解构复制拷贝

let arr=[1,2,3]
let arr2=[...arr]
arr2.push(4)
console.log(arr,arr2) // [1, 2, 3] , [1, 2, 3, 4]

对于一维数组是深拷贝，对一维以上的数组是引用

递归深拷贝函数

function deepClone(source){
	// 判断原目标是数组还是对象，进行初始化赋值
	const targetObj = source.constructor === Array ? [] :{};
	// 循环原目标
	for(let key in source){
	    // 判断当前值是否存在
		if(source.hasOwnProperty(key)){
			 // 判断是否当前要拷贝的是否是对象
			 if(source[key] && typeof source[key] === 'object'){
				targetObj[key] = source[key].constructor === Array ? [] :{};
				// 是对象，再次调用deepClone递归
				targetObj[key] = deepClone(source[key]);
			 }else{
				// 数组，直接赋值就好
				targetObj[key] = source[key];
			 }
		}
	}
	return targetObj;
}

const obj = {
	name:'hu',
	age:'18',
	books:['活着','撒野'],
	friends:{
		name:'hao',
		age:'18',
		books:['xxx','xxx']
	},
	fn1:()=>{console.log('我是函数')}
}

const newObj = deepClone(obj);
console.log(newObj)

赏