1、通過遞歸方式實現(xià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))
滿足一般使用場景，但無法實現(xiàn)對象中方法(function)的深拷貝
let obj = {
id: 1,
name: '張三',
age: 10,
}
let newObj = JSON.parse(JSON.stringify(obj))
3、jQuery的extend方法實現(xiàn)深拷貝
var array = [1,2,3,4];
var newArray = $.extend(true,[],array); // true為深拷貝，false為淺拷貝
4、Object.assign(obj1, obj2)
只有一級屬性為深拷貝，二級屬性后就是淺拷貝
let obj = {
id: 1,
name: '張三',
age: 10,
}
let newObj = Object.assign({}, obj)
5、擴展運算符
只有一級屬性為深拷貝，二級屬性后就是淺拷貝
var obj = {
a: 1,
b: 2
}
var obj1 = {…obj}
6、數(shù)組使用數(shù)組方法進行深拷貝（concat、slice）
只有一級屬性為深拷貝，二級屬性后就是淺拷貝，如[1,2,3,[1,2,3]]
var arr1 = [1, 2, 3, 4]
var arr2 = arr1.concat()
var arr3 = arr1.slice(1)
7、使用Vue提供的觀察者模式實現(xiàn)數(shù)組深度復(fù)制
//需要復(fù)制的數(shù)組文章來源：http://www.zghlxwxcb.cn/news/detail-704889.html
let arr1 = [{name: "小明", age: 18}, {name: "小芳", age: 20}];
let arr2 = Vue.util.extend([], arr1);
8、使用ES6提供的擴展運算符實現(xiàn)數(shù)組深度復(fù)制文章來源地址http://www.zghlxwxcb.cn/news/detail-704889.html
//需要復(fù)制的數(shù)組
let arr1 = [{name: "小明", age: 18}, {name: "小芳", age: 20}];
//使用ES6的擴展運算符實現(xiàn)數(shù)組深度復(fù)制
let arr2 = [...arr1];
到了這里，關(guān)于vue深拷貝的幾種實現(xiàn)方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
