vue深拷貝的3種實現(xiàn)方式小結(jié)
vue深拷貝的三種實現(xiàn)方式：1、通過遞歸方式實現(xiàn)深拷貝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法實現(xiàn)深拷貝。深拷貝：拷貝的是對象或者數(shù)組內(nèi)部數(shù)據(jù)的實體，重新開辟了內(nèi)存空間存儲數(shù)據(jù)；淺拷貝：拷貝的是引用類型的指針，副本和原數(shù)組或?qū)ο笾赶蛲粋€內(nèi)存；
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)
總結(jié)
到此這篇關(guān)于vue深拷貝的3種實現(xiàn)方式的文章就介紹到這了,更多相關(guān)vue深拷貝實現(xiàn)方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue向下滾動加載更多數(shù)據(jù)scroll案例詳解
這篇文章主要介紹了Vue向下滾動加載更多數(shù)據(jù)scroll案例詳解,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-08-08
本文介紹了如何在Vue3項目中封裝一個時間信息收集組件,采用雙向綁定響應(yīng)式數(shù)據(jù),通過對Element-Plus的Slider組件二次封裝,實現(xiàn)時間軸功能,解決了小數(shù)計算導(dǎo)致匹配問題和v-model綁定組件無效問題,感興趣的朋友跟隨小編一起看看吧2024-09-09
vue?跳轉(zhuǎn)頁面$router.resolve和$router.push案例詳解
這篇文章主要介紹了vue?跳轉(zhuǎn)頁面$router.resolve和$router.push案例詳解,這樣實現(xiàn)了既跳轉(zhuǎn)了新頁面,又不會讓后端檢測到頁面鏈接不安全之類的,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了關(guān)于Vue單元測試的幾個坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
解決Vue的文本編輯器 vue-quill-editor 小圖標樣式排布錯亂問題
這篇文章主要介紹了解決Vue的文本編輯器 vue-quill-editor 小圖標樣式排布錯亂問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue?Router?是?Vue?的官方路由，它與?Vue.js?核心深度集成，讓用?Vue.js?構(gòu)建單頁應(yīng)用變得輕而易舉，本文將通過簡單的示例為大家介紹一下vue-router的使用，需要的可以參考一下2023-06-06
Vue動態(tài)創(chuàng)建注冊component的實例代碼
這篇文章主要給大家介紹了關(guān)于Vue動態(tài)創(chuàng)建注冊component的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06
今天小編就為大家分享一篇vue--點擊當前增加class,其他刪除class的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
如何解決d3.event在v7版本無效影響zoom拖拽縮放問題
這篇文章主要介紹了如何解決d3.event在v7版本無效影響zoom拖拽縮放問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue如何利用store實現(xiàn)兩個平行組件間的傳值
這篇文章主要介紹了vue如何利用store實現(xiàn)兩個平行組件間的傳值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04