這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
概念介紹
深拷貝：在堆記憶體中重新開辟一個存盤空間，完全克隆一個一模一樣的物件 淺拷貝：不在堆記憶體中重新開辟空間，只復制堆疊記憶體中的參考地址，本質上兩個物件（陣列）依然指向同一塊存盤空間
第一種：遞回方式（推薦，專案中最安全最常用）
使用遞回的方式進行物件（陣列）的深拷貝
奉上已封裝的深拷貝函式??
//函式拷貝
const copyObj = (obj = {}) => {
//變數先置空
let newobj = null;
//判斷是否需要繼續進行遞回
if (typeof (obj) == 'object' && obj !== null) {
newobj = obj instanceof Array ? [] : {};
//進行下一層遞回克隆
for (var i in obj) {
newobj[i] = copyObj(obj[i])
}
//如果不是物件直接賦值
} else newobj = obj;
return newobj;
}
上方函式的使用方式??
//模擬物件
let obj = {
numberParams:1,
functionParams:() => {
console.log('昨天基金全是綠的，只有我的眼睛是紅的');
},
objParams:{
a:1,
b:2
}
}
const newObj = copyObj(obj); //這樣就完成了一個物件的遞回拷貝
obj.numberParams = 100; //更改第一個物件的指
console.log(newObj.numberParams); //輸出依然是1 不會跟隨obj去改變
第二種：JSON.stringify() ；(這個不推薦使用，有坑)
這個方法有坑，詳細講解請看我另一篇文章 “使用JSON.stringify進行深拷貝的坑” 以下是代碼示例
let obj = {
a:1,
b:"基金虧太多，終有一天，你站上了天臺，我臥上了軌道，來生我們有說有笑，"
}
//先轉為json格式字符，再轉回來
let newObj = JSON.parse(JSON.stringify(obj));
obj.a = 50;
console.log(newObj.a); //輸出 1
普通的物件也可以進行深拷貝，但是！！！ 當物件內容項為number,string.boolean的時候，是沒有什么問題的，但是，如果物件內容項為undefined,null,Date,RegExp,function，error的時候，使用JSON.stringify()進行拷貝就會出問題了， 詳細講解請查看我的另一篇文章“使用JSON.stringify()進行深拷貝的坑”
第三種：使用第三方庫lodash中的cloneDeep()方法
是否推薦使用，看情況吧，如果我們的專案中只需要一個深拷貝的功能，這種情況下為了一個功能引入整個第三方庫就顯得很不值得了，不如寫一個遞回函式對于專案來說性能更好，
lodash.cloneDeep()代碼示例??
import lodash from 'lodash';
let obj = {
a: {
c: 2,
d: [1, 3, 5],
e:'阿巴阿巴'
},
b: 4
}
const newObj = lodash.cloneDeep(obj);
obj.b = 20;
console.log(newObj.b); //輸出 4； 不會改變
實際上，cloneDeep()方法底層使用的本來就是遞回方法，只是在外層又封裝了一層而已，
所以，如果不是原先專案中有使用 lodash 這個庫的話，大可不必為了這一個功能而去引入它，
文章上方有提供進行深拷貝的函式，推薦使用，大家可自取，
第四種:JQuery的extend()方法進行深拷貝（推薦在JQ中使用）
這個方法僅適用于JQuery構建的專案， JQuery自身攜帶的extend()方法可以進行深拷貝，不用自己寫遞回也不用引入第三方庫還沒什么坑，
在JQuery專案中的使用方式??
let obj = {
a: {
c: 2,
d: [1, 3, 5],
e:'阿巴阿巴'
},
b: 4
}
let newObj= $.extend(true, {}, obj1); //拷貝完成
obj.b = 20;
console.log(newObj.b); //輸出 4
總結
進行深拷貝的方法
- 遞回函式 （推薦使用，專案中使用的更多，更小，更安全）
- JSON.stringify() 和JSON.parse() ; (不推薦使用,如果遇到Function,Date等型別的變數容易出現一些意料之外的問題)
- 第三方庫lodash的cloneDeep()方法 （就情況而定，如果專案中原先就有lodash這個第三方庫，可以使用，否則還是推薦使用遞回函式，不然成本太高，）
- JQuery的extend()函式 (推薦在JQuery專案中使用，其他專案依然推薦是用遞回函式)
本文轉載于:
https://juejin.cn/post/7109843641677398053
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550816.html
標籤：其他
上一篇：vue全家桶進階之路50：Vue3 環境變數+跨域設定實體
下一篇：返回列表