目錄

• 1、通過遞歸方式實(shí)現(xiàn)深拷貝
• 2、JSON.parse(JSON.stringify(obj))
• 3、jQuery的extend方法實(shí)現(xiàn)深拷貝
• 拓展閱讀
• vue深拷貝的其他實(shí)現(xiàn)方式
• 總結(jié)

vue深拷貝的三種實(shí)現(xiàn)方式：1、通過遞歸方式實(shí)現(xiàn)深拷貝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法實(shí)現(xiàn)深拷貝。深拷貝：拷貝的是對象或者數(shù)組內(nèi)部數(shù)據(jù)的實(shí)體，重新開辟了內(nèi)存空間存儲數(shù)據(jù)；淺拷貝：拷貝的是引用類型的指針，副本和原數(shù)組或?qū)ο笾赶蛲粋€內(nèi)存；

1、通過遞歸方式實(shí)現(xiàn)深拷貝

比較全面的深拷貝，缺點(diǎn)是較為繁瑣

function deepClone(obj) {
	var target = {};
	for (var key in obj) {
		if (Object.prototype.hasOwnProperty.call(obj, key)) {
			if (typeof obj[key] === "object") {
				target[key] = deepClone(obj[key]);
			} else {
				target[key] = obj[key];
			}
		}
	}
	return target;
}

2、JSON.parse(JSON.stringify(obj))

滿足一般使用場景，但無法實(shí)現(xiàn)對象中方法(fountion)的深拷貝

let obj = {
	id: 1,
	name: "張三",
	age: 10,
}
let newObj = JSON.parse(JSON.stringify(obj))

3、jQuery的extend方法實(shí)現(xiàn)深拷貝

var array = [1,2,3,4];
var newArray = $.extend(true,[],array); // true為深拷貝，false為淺拷貝

拓展閱讀

vue深拷貝的其他實(shí)現(xiàn)方式

1、Object.assign(obj1, obj2)

只有一級屬性為深拷貝，二級屬性后就是淺拷貝

let obj = {
	id: 1,
	name: "張三",
	age: 10,
}
let newObj = Object.assign({}, obj)

2、擴(kuò)展運(yùn)算符

只有一級屬性為深拷貝，二級屬性后就是淺拷貝

var obj = {
    a: 1,
    b: 2
}
 
var obj1 = {…obj}

3、數(shù)組使用數(shù)組方法進(jìn)行深拷貝（concat、slice）

只有一級屬性為深拷貝，二級屬性后就是淺拷貝，如[1,2,3,[1,2,3]]

var arr1 = [1, 2, 3, 4]
var arr2 = arr1.concat()
var arr3 = arr1.slice(1)

總結(jié)

到此這篇關(guān)于vue深拷貝的3種實(shí)現(xiàn)方式的文章就介紹到這了,更多相關(guān)vue深拷貝實(shí)現(xiàn)方式內(nèi)容請搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！