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