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