商城网站 运营短链接在线生成器

JS中对象的浅拷贝，深拷贝和引用

浅拷贝和深拷贝的区别主要在于它们如何处理引用类型的数据（如数组和对象），而引用简而言之就是换了个变量名。

浅拷贝

• 引用：浅拷贝只复制对象的第一层属性，对于嵌套的对象或数组，它只复制引用而不是创建新的空间。这样，浅拷贝后的新对象和原对象中的嵌套对象仍然指向同一个内存地址。

• 方式：可以使用扩展运算符 ... 或 Object.assign() 进行浅拷贝。

• 示例：

  const original = { a: 1, b: { c: 2 } };
  const shallowCopy = { ...original };
  shallowCopy.b.c = 3;
  console.log(original.b.c); // 输出 3
  

深拷贝

• 创建新的空间：深拷贝会递归地复制对象的每一层属性，对于嵌套的对象或数组，它会创建新的空间存储数据，因此新对象和原对象完全独立。

• 方式：可以使用 JSON.parse(JSON.stringify())、第三方库如 Lodash 的 _.cloneDeep() 方法，或者手动实现递归拷贝。

  • 使用JSON.parse(JSON.stringify(option))的方式会丢失function方法，导致tooltip中的formatter消失，
  • 引入lodash中的深拷贝来进行复制：
    • import _ from ‘lodash’;
    • let tmpOption = _.cloneDeep(option)

• 示例：

  const original = { a: 1, b: { c: 2 } };
  const deepCopy = JSON.parse(JSON.stringify(original));
  deepCopy.b.c = 3;
  console.log(original.b.c); // 输出 2
  

深浅拷贝区别总结

• 浅拷贝：只复制一层属性，对于嵌套结构只复制引用。适合处理简单对象，不适用于需要完全独立的数据副本。
• 深拷贝：递归复制所有层次的属性，完全独立于原对象。适合处理复杂对象和深层嵌套的结构。

引用和浅拷贝

let param1 = this.customInsertInformation;
param1.insertDialogVisible = false;

这里，param1 只是一个对 this.customInsertInformation 的引用。当你修改 param1.insertDialogVisible 的值时，实际上是在修改 this.customInsertInformation 对象的 insertDialogVisible 属性。

这就不同于浅拷贝（使用扩展运算符...），后者会创建一个新的对象，不会影响原始对象的属性。如果你希望在不影响原对象的情况下创建一个新的对象，使用浅拷贝或深拷贝的方法会更合适。

例如：

let param1 = { ...this.customInsertInformation };
param1.insertDialogVisible = false;
// this.customInsertInformation 不会改变