js 数据的各种拷贝方法比较,最实用的深拷贝方法

由于目前的所有的拷贝方式都有问题,所以需要自己写方法
各种方法比较

concat :

一级数组和对象可以做到深拷贝,多级不可以
js 数据的各种拷贝方法比较,最实用的深拷贝方法_第1张图片

let arr=[1,2,3,4]
let arr2=arr.concat()
console.log(arr2)
arr2[1]="haley"
console.log("================= concat =============")
console.log("原数据:",arr,";新数据:",arr2)

Object.assign()

如果不是为了拼接多个数据为一个的话,这个方法和直接赋值是一样的效果
js 数据的各种拷贝方法比较,最实用的深拷贝方法_第2张图片

let arr=[1,2,3,4]
let arr2=Object.assign(arr)
console.log(arr2)
arr2[1]="haley"
console.log("================= Object.assign(arr) =============")
console.log("原数据:",arr,";新数据:",arr2)

JSON.parse(JSON.stringify(obj))

这个拷贝的方法,如果原来对象里面没有方法需要拷贝,可以使用
js 数据的各种拷贝方法比较,最实用的深拷贝方法_第3张图片

let obj={name:"haley",age:30,list:[{a:'123'}],func:function(){console.log(this.name)}}
let obj2=JSON.parse(JSON.stringify(obj))
console.log(obj2)
obj2.list[0].a="haley"
console.log("================= JSON.parse(JSON.stringify(obj)) =============")
console.log("原数据:",obj,";新数据:",obj2)

手写深拷贝方法

解决以上所有的问题

// 数据测试
let arr=[1,23,4234,{name:"li"}]
let arr2=clone(arr)
console.log(arr2)
arr2[3].name="fdasfdasfad"
console.log(arr,arr2)

// 数据类型判断
function checkedType(target){
	return Object.prototype.toString.call(target).slice(8,-1)
}
// 数据拷贝
function clone(target){
	let result,targetType=checkedType(target);
	if(targetType==="Object"){
		result={}
	}else if(targetType==="Array"){
		result=[]
	}else{
		return result;
	}
	for(let i in target){
		let val=target[i]
		if(checkedType(val)==="Object"||checkedType(val)==="Array"){
			result[i]=clone(val)
		}else{
			result[i]=val
		}
	}
	return result;
}

以上clone方法来自某视频教程,如有侵犯,请联系作者

你可能感兴趣的:(js工具函数,json,js,深拷贝,拷贝,javascript)