js 數據的各種拷貝方法比較,最實用的深拷貝方法

由於目前的所有的拷貝方式都有問題,所以需要自己寫方法
各種方法比較

concat :

一級數組和對象可以做到深拷貝,多級不可以
concat 複製單層數據

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()

如果不是爲了拼接多個數據爲一個的話,這個方法和直接賦值是一樣的效果
Object.assign()只能對數據進行淺拷貝

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))

這個拷貝的方法,如果原來對象裏面沒有方法需要拷貝,可以使用
JSON.parse(JSON.stringify(obj))進行數據拷貝

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方法來自某視頻教程,如有侵犯,請聯繫作者

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章