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

程式猿布歐 發表於 2022-04-26

在瞭解深拷貝和淺拷貝之前,我們先梳理一下:

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中深拷貝和淺拷貝梳理

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

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