javaScript深拷貝和淺拷貝簡單梳理

程式猿布歐發表於2022-04-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中堆記憶體和棧記憶體簡易示意圖例

image

下面對於物件的操作，都可以參照上圖進行思考

淺拷貝-深拷貝

淺拷貝

只是拷貝了某一層的屬性，或者某一層，沒有全部拷貝到另外的物件上

let userInfo = {
  name: "zhangsan",
  age: "29",
  say: function () {
    console.log("hello");
  },
  child: [
    {
      name: "zhangsan01",
    },
  ],
};
  1. 物件解構,只能拷貝第一層物件
// 物件解構...
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"
  1. Object.assign() 第一層是深拷貝，二級屬性後就是淺拷貝
let info = {};
Object.assign(info, userInfo);
info.name = "lisi";
info.child.name = "lisi001";
console.log("userInfo", userInfo);
console.log("info", info);
  1. 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);
  1. 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，去校驗更為複雜和資料型別更豐富的資料。

深拷貝

所有的屬性都拷貝到新的物件上

  1. 使用遞迴遍歷每一個屬性，在遞迴遍歷的時候，針對每一種資料型別處理和拷貝
  2. lodash深拷貝方法，感興趣的同學，可以去閱讀lodash深拷貝的實現原始碼

文件地址：深拷貝cloneDeep https://www.lodashjs.com/docs/lodash.cloneDeep

  1. 更多方法，有待補充

結尾

  • 當我們操作複雜資料型別的時候，都是在操作棧記憶體Stack的記憶體地址，指標指向物件在堆記憶體heap的資料。

  • 傳入的物件是使用物件字面量{}建立的物件還是由建構函式生成的物件

  • 如果物件是由建構函式建立出來的，那麼是否要拷貝原型鏈上的屬性

  • 如果要拷貝原型鏈上的屬性，那麼如果原型鏈上存在多個同名的屬性，保留哪個

  • 針對的資料型別，屬性的資料型別，各自的缺陷，適用的業務場景，自己造輪子or使用原生方法，工具類

原始碼地址

文章個人部落格地址：javaScript中深拷貝和淺拷貝梳理

歡迎關注公眾號：程式猿布歐，不定期更新一些前端入門文章

創作不易，轉載請註明出處和作者。

相關文章