vue深拷貝的三種實(shí)現(xiàn)方式示例詳解
更新時(shí)間：2023年11月13日 14:15:45 作者：nav-item
vue深拷貝的三種實(shí)現(xiàn)方式：1、通過(guò)遞歸方式實(shí)現(xiàn)深拷貝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法實(shí)現(xiàn)深拷貝,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
vue深拷貝的三種實(shí)現(xiàn)方式
1、通過(guò)遞歸方式實(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))
滿足一般使用場(chǎng)景，但無(wú)法實(shí)現(xiàn)對(duì)象中方法(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)
只有一級(jí)屬性為深拷貝，二級(jí)屬性后就是淺拷貝
let obj = {
id: 1,
name: '張三',
age: 10,
}
let newObj = Object.assign({}, obj)2、擴(kuò)展運(yùn)算符
只有一級(jí)屬性為深拷貝，二級(jí)屬性后就是淺拷貝
var obj = {
a: 1,
b: 2
}
var obj1 = {…obj}3、數(shù)組使用數(shù)組方法進(jìn)行深拷貝（concat、slice）
只有一級(jí)屬性為深拷貝，二級(jí)屬性后就是淺拷貝，如[1,2,3,[1,2,3]]
var arr1 = [1, 2, 3, 4] var arr2 = arr1.concat() var arr3 = arr1.slice(1)
到此這篇關(guān)于vue深拷貝的三種實(shí)現(xiàn)方式的文章就介紹到這了,更多相關(guān)vue深拷貝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-devtools是一款基于chrome游覽器的插件，用于調(diào)試vue應(yīng)用，這可以極大地提高我們的調(diào)試效率，這篇文章主要介紹了vue-devtools的安裝與使用教程,需要的朋友可以參考下2023-03-03
Vue項(xiàng)目打包優(yōu)化實(shí)踐指南(推薦!)
如果引入的庫(kù)眾多,那么vendor.js文件體積將會(huì)相當(dāng)?shù)拇?影響首開的體驗(yàn),這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包優(yōu)化實(shí)踐的相關(guān)資料,需要的朋友可以參考下2022-06-06
如何用vue2+element-ui實(shí)現(xiàn)多行行內(nèi)表格編輯
最近開發(fā)項(xiàng)目,關(guān)于表格的數(shù)據(jù)操作比較多,這個(gè)地方個(gè)人覺得比較難搞,特此記錄一下,這篇文章主要給大家介紹了關(guān)于如何用vue2+element-ui實(shí)現(xiàn)多行行內(nèi)表格編輯的相關(guān)資料,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了解決vue addRoutes不生效問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue+element UI中如何給指定日期添加標(biāo)記
這篇文章主要介紹了vue+element UI中如何給指定日期添加標(biāo)記問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vue如何導(dǎo)出文件流獲取附件名稱并下載(在response.headers里解析filename導(dǎo)出)
這篇文章主要介紹了vue如何導(dǎo)出文件流獲取附件名稱并下載(在response.headers里解析filename導(dǎo)出),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue響應(yīng)式原理及雙向數(shù)據(jù)綁定示例分析
這篇文章主要為大家介紹了Vue響應(yīng)式原理及雙向數(shù)據(jù)綁定的示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
下面小編就為大家分享一篇vue2.0 循環(huán)遍歷加載不同圖片的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了詳解Vue中的Props與Data細(xì)微差別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue-next/runtime-core 源碼閱讀指南詳解
這篇文章主要介紹了vue-next/runtime-core 源碼閱讀指南詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10