javaScript深拷貝和淺拷貝的簡單介紹

更新時間：2022年05月06日 11:21:15 作者：程序猿布歐

深淺拷貝知識在我們的日常開發(fā)中還算是用的比較多,下面這篇文章主要給大家介紹了關(guān)于javaScript深拷貝和淺拷貝的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

基本數(shù)據(jù)類型

數(shù)字Number 字符串String 布爾Boolean Null Undefined Symbols BigInt

基本數(shù)據(jù)類型在內(nèi)存當中，是存儲在棧Stack

在數(shù)據(jù)結(jié)構(gòu)當中

棧在內(nèi)存上的分配的空間生命周期很短，當變量使用完畢，方法執(zhí)行完成就被釋放掉，因此在js當中，變量使用完畢之后，基本就被回收了，
有一個場景比較例外，閉包的情況下，變量是始終存在內(nèi)存當中不被釋放.
棧存儲具有先進后出，后進先出的特點: 1，2，3，4，5，6 => 6,5,4,3,2,1

引用數(shù)據(jù)類型

日期Dete，對象Object，數(shù)組Array,方法Function, 正則regex,帶鍵的集合：Maps, Sets, WeakMaps, WeakSets

引用數(shù)據(jù)類型與堆內(nèi)存heap的一些關(guān)系

在JavaScript中，不允許直接訪問堆內(nèi)存中的位置，不能直接操作對象的堆內(nèi)存空間。
對象的引用地址是存在棧內(nèi)存中，在我們的日常編碼過程中，操作對象的時候，讀取對象的存在棧內(nèi)存的引用地址而不是在堆中的對象，引用類型的值都是通過引用訪問。

JavaScript中堆內(nèi)存和棧內(nèi)存簡易示意圖例

下面對于對象的操作，都可以參照上圖進行思考

淺拷貝-深拷貝

淺拷貝

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

let userInfo = {
  name: "zhangsan",
  age: "29",
  say: function () {
    console.log("hello");
  },
  child: [
    {
      name: "zhangsan01",
    },
  ],
};

對象解構(gòu),只能拷貝第一層對象

// 對象解構(gòu)...
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());

對象可以復(fù)制，但是當屬性是function時，沒有復(fù)制到新的對象上，因此在日常的開發(fā)過程中，涉及到數(shù)組對象，使用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，第一層可以拷貝，第二層在修改的時候，還是使用的引用地址，前后的對象都發(fā)生了更改

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);