javaScript深拷貝和淺拷貝簡單梳理
- 2022 年 4 月 26 日
- 筆記
- javascript, 前端
在了解深拷貝和淺拷貝之前，我們先梳理一下：
JavaScript中，分為基本數據類型（原始值）和複雜類型（對象），同時它們各自的數據類型細分下又有好幾種數據類型
基本數據類型
數字Number 字元串String 布爾Boolean Null Undefined Symbols BigInt
基本數據類型在記憶體當中，是存儲在棧Stack
在數據結構當中
- 棧在記憶體上的分配的空間生命周期很短，當變數使用完畢，方法執行完成就被釋放掉，因此在js當中，變數使用完畢之後，基本就被回收了，
- 有一個場景比較例外，閉包的情況下，變數是始終存在記憶體當中不被釋放.
- 棧存儲具有先進後出，後進先出的特點: 1，2，3，4，5，6 => 6,5,4,3,2,1
引用數據類型
日期Dete，對象Object，數組Array,方法Function, 正則regex,帶鍵的集合：Maps, Sets, WeakMaps, WeakSets
引用數據類型與堆記憶體heap的一些關係
- 在JavaScript中，不允許直接訪問堆記憶體中的位置，不能直接操作對象的堆記憶體空間。
- 對象的引用地址是存在棧記憶體中，在我們的日常編碼過程中，操作對象的時候，讀取對象的存在棧記憶體的引用地址而不是在堆中的對象，引用類型的值都是通過引用訪問。
JavaScript中堆記憶體和棧記憶體簡易示意圖例
下面對於對象的操作，都可以參照上圖進行思考
淺拷貝-深拷貝
淺拷貝
只是拷貝了某一層的屬性，或者某一層，沒有全部拷貝到另外的對象上
let userInfo = {
name: "zhangsan",
age: "29",
say: function () {
console.log("hello");
},
child: [
{
name: "zhangsan01",
},
],
};
- 對象解構,只能拷貝第一層對象
// 對象解構...
let info = { ...userInfo };
info.name = "lisi";
info.child.name = "lisi001";
info.say();
console.log("userInfo", userInfo);
console.log("info", info);
userInfo和info中的child.name都改成了---->"lisi001"
- Object.assign() 第一層是深拷貝，二級屬性後就是淺拷貝
let info = {};
Object.assign(info, userInfo);
info.name = "lisi";
info.child.name = "lisi001";
console.log("userInfo", userInfo);
console.log("info", info);
- JSON.parse(JSON.stringify());
對象可以複製，但是當屬性是function時，沒有複製到新的對象上，因此在日常的開發過程中，涉及到數組對象，使用JSON.parse(JSON.stringify());還是沒問題的
let info = JSON.parse(JSON.stringify(userInfo));
info.name = "lisi";
info.child.name = "lisi001";
console.log("userInfo", userInfo);
console.log("info", info);
- for in，第一層可以拷貝，第二層在修改的時候，還是使用的引用地址，前後的對象都發生了更改
let info = {};
for (let key in userInfo) {
info[key] = userInfo[key];
}
info.name = "lisi";
info.child.name = "lisi001";
console.log("userInfo", userInfo);
console.log("info", info);
淺拷貝小結
以上淺拷貝方法，有些拷貝只能拷貝第一層，有些可以拷貝多層，
但是當屬性類型是方法時，還是淺拷貝，
因此我們在開發中，使用淺拷貝，需要注意，同時，出了拷貝function，類似正則，date等數據類型沒有一一列舉，感興趣的同學可以自己寫一些demo，去校驗更為複雜和數據類型更豐富的數據。
深拷貝
所有的屬性都拷貝到新的對象上
- 使用遞歸遍歷每一個屬性，在遞歸遍歷的時候，針對每一種數據類型處理和拷貝
- lodash深拷貝方法，感興趣的同學，可以去閱讀lodash深拷貝的實現源碼
文檔地址：深拷貝cloneDeep //www.lodashjs.com/docs/lodash.cloneDeep
- 更多方法，有待補充
結尾
-
當我們操作複雜數據類型的時候，都是在操作棧記憶體Stack的記憶體地址，指針指向對象在堆記憶體heap的數據。
-
傳入的對象是使用對象字面量{}創建的對象還是由構造函數生成的對象
-
如果對象是由構造函數創建出來的，那麼是否要拷貝原型鏈上的屬性
-
如果要拷貝原型鏈上的屬性，那麼如果原型鏈上存在多個同名的屬性，保留哪個
-
針對的數據類型，屬性的數據類型，各自的缺陷，適用的業務場景，自己造輪子or使用原生方法，工具類
源碼地址
文章個人部落格地址：javaScript中深拷貝和淺拷貝梳理
歡迎關注公眾號：程式猿布歐，不定期更新一些前端入門文章
創作不易，轉載請註明出處和作者。
