vue~对象的浅拷贝
  2xk0JyO908yA 2023年11月01日 67 0
Vue

浅拷贝

当我们想要复制一段数据的时候吗,我们就会用到拷贝;拷贝数据又分为了浅拷贝和深拷贝,浅拷贝指复制对象或数组的顶层结构,如果对象或数组中有引用类型的属性值,复制的是引用(地址)而非值;而深拷贝则是递归复制完整的对象或数组,包括嵌套的子对象或子数组,生成一个全新的对象,新对象和原对象的引用地址不同。

javascript中的实现

JavaScript 中可以使用不同方法实现对象的浅拷贝。浅拷贝只复制对象的第一层属性,不会复制嵌套对象内部的属性。以下是几种常见的浅拷贝方法:

1. 扩展运算符(Spread Operator):

使用扩展运算符 ... 可以创建一个对象的浅拷贝:

const originalObj = { name: 'John', age: 30 };
const newObj = { ...originalObj };

newObj.name = 'Jane';

console.log(originalObj.name); // 输出 'John',原始对象不受影响
console.log(newObj.name);      // 输出 'Jane',新对象被修改

2. Object.assign() 方法:

Object.assign() 方法可以将一个或多个对象的属性复制到目标对象中,也可以用来创建对象的浅拷贝:

const originalObj = { name: 'John', age: 30 };
const newObj = Object.assign({}, originalObj);

newObj.name = 'Jane';

console.log(originalObj.name); // 输出 'John',原始对象不受影响
console.log(newObj.name);      // 输出 'Jane',新对象被修改

这些方法都可以用来创建对象的浅拷贝,但请注意,如果对象中包含嵌套对象,这些嵌套对象仍然是引用关系,所以修改嵌套对象会影响到原始对象。如果需要深拷贝,即递归复制对象及其嵌套对象的属性,需要使用其他方法,如 Lodash 的 _.cloneDeep() 方法。

vue.js中使用扩展运算符实现浅拷贝

let searchForm = {...this.searchForm};
  • this.searchForm 是一个对象,通过 {...this.searchForm} 这个表达式,创建了一个新对象,新对象包含了与 this.searchForm 相同的属性和属性值。

这个操作实际上是在创建 searchForm 对象的副本,而不是将原始对象直接赋值给 searchForm。这意味着如果你后续修改 searchForm,不会影响到原始的 this.searchForm 对象,因为它们是两个不同的对象。

这种操作通常用于对象或数组的复制,以便在不影响原始数据的情况下进行修改。这是一种浅拷贝,因为它只复制了对象的第一层属性,如果对象中包含了嵌套对象,嵌套对象仍然是引用,修改嵌套对象会影响到原始对象。

以下是一个示例:

let originalObj = { name: 'John', age: 30 };
let newObj = { ...originalObj };

newObj.name = 'Jane';

console.log(originalObj.name); // 输出 'John',原始对象不受影响
console.log(newObj.name);      // 输出 'Jane',新对象被修改

这是Vue.js中常见的一种数据处理方式,通常用于确保在处理数据时不会直接修改原始数据,以便在需要时进行撤销或回滚操作。

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  gYl4rku9YpWY   2024年05月17日   55   0   0 Vue
  JZjRRktyDDvK   2024年05月02日   74   0   0 Vue
  VlNAKfyhjjp9   2024年04月30日   62   0   0 Vue
  JNTrZmaOQEcq   2024年04月30日   47   0   0 Vue
  onf2Mh1AWJAW   2024年05月17日   55   0   0 Vue
  3A8RnFxQCDqM   2024年05月17日   46   0   0 Vue
2xk0JyO908yA