js deep copy & deep merge & deep clone All In One

js deep copy & deep merge & deep clone 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

solutions

1. JSON.parse & JSON.stringify

const obj = {
  k: 1,
  arr: [2012, 2023],
  func: (v) => console.log(v),
  o: {msg: 'bug'},
  date: new Date(),
  u: undefined,
  n: null,
  nan: NaN,
  b: true,
};

JSON.parse(JSON.stringify(obj));

2. lodash

https://lodash.com/docs/

https://www.npmjs.com/package/lodash.clonedeep

3. 自己实现

https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript

https://medium.com/javascript-in-plain-english/how-to-deep-copy-objects-and-arrays-in-javascript-7c911359b089

refs

https://github.com/xgqfrms/learning-javascript-with-mdn/issues/6

---

---

©xgqfrms 2012-2021

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

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

---