Object Deep Copy All In One

Object Deep Copy All In One

js data types

基本值数据类型：(栈)

7种基本数据类型 Undefined、Null、Boolean、Number 和 String，Symbol, BigInt;
变量是直接按值存放的;
存放在栈内存中的简单数据段，可以直接访问;

引用数据类型：(堆)

Array, Object, Function, Date, Math, RegExp, ...

TypedArray: Uint8Array, Int8Array, ...
DataView, ArrayBuffer, ...

Map, Set, WeakMap, WeakSet, Intl, ...
Reflect, Proxy, ...

存放在堆内存中的对象，变量保存的是一个指针，这个指针指向另一个位置;
当需要访问引用类型（如对象，数组等）的值时，首先从栈中获得该对象的指针地址，
然后再从堆内存中取得所需的数据;

JavaScript 存储对象都是存的内存地址;

所以浅拷贝会导致 obj1 和obj2 指向同一块内存地址;
改变了其中一方的内容，都是在原来的内存上做修改会导致拷贝对象和源对象都发生改变;

而深拷贝是开辟一块新的内存地址，将原对象的各个属性逐个复制进去, 对拷贝对象和源对象各自的操作互不影响;

const origin = {
  num: 1,
  arr: [2012, 2023],
  func: (v) => console.log(v),
  obj: {msg: 'bug'},
  date: new Date(`2012-01-01`),
  u: undefined,
  nil: null,
  nan: NaN,
  bool: true,
  str: 'string',
  s: Symbol(`s`),
  bi: BigInt(10**32),
  set: new Set([1, 2, 3]),
  map: new Map([['a', 11], ['b', 22], ['c', 33]]),
  // reg: /^0+/g,
  reg: new RegExp(/^0+/g),
};

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects

demos

const obj = {obj2: {obj3: {id: 3}}}

const objShallowCopy = {...obj};

// ❌ 引用 bug
objShallowCopy.obj2.obj3.id = 4;

obj.obj2.obj3.id;
// 4 

Lodash _.cloneDeep

https://lodash.com/docs/4.17.15#cloneDeep

https://lodash.com/docs/4.17.15#cloneDeepWith

refs

https://stackoverflow.com/questions/21851974/lodash-clone-and-clonedeep-behaviors

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---