vue~对象的浅拷贝

这篇具有很好参考价值的文章主要介绍了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中常见的一种数据处理方式,通常用于确保在处理数据时不会直接修改原始数据,以便在需要时进行撤销或回滚操作。文章来源地址https://www.toymoban.com/news/detail-705839.html

到了这里,关于vue~对象的浅拷贝的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Java中的浅拷贝与深拷贝

    在Java中,对象的拷贝有两种方式:浅拷贝和深拷贝。它们分别代表了不同的拷贝方式,拷贝出的新对象与原始对象之间存在一定的差异。本文将详细介绍浅拷贝和深拷贝的概念、特点和实现方式,并且通过实例进行解析。  一、浅拷贝  浅拷贝是指在对一个对象进行拷贝时,

    2024年02月14日
    浏览(37)
  • Python:列表的浅拷贝与深拷贝

    相关阅读 Python专栏 https://blog.csdn.net/weixin_45791458/category_12403403.html?spm=1001.2014.3001.5482         在python语言中,因为其面向对象的特性,在进行列表拷贝时可能会出现一些意想不到的结果,涉及到列表的浅拷贝和深拷贝相关问题,本文将对其进行总结。         首先我们来

    2024年02月09日
    浏览(36)
  • 详解js中的浅拷贝与深拷贝

    1.1 栈(stack)和堆(heap) 栈(stack):由操作系统自动分配释放 ,存放函数的参数值,局部变量的值等。其操作方式类似于数据结构中的栈; 堆(heap):一般由程序员分配释放, 若程序员不释放,程序结束时可能由OS回收,分配方式倒是类似于链表 1.2 基本数据类型和引用数据类

    2024年02月08日
    浏览(87)
  • 详解python列表等对象的赋值和复制(浅拷贝copy()及深拷贝deepcopy()的使用区别与示例)

    python虽然没有指针的概念,但是对象、引用、地址这些内容还是存在的,尤其是像列表对象、某类型对象的引用上,搞清楚对象变量的复制和赋值很有必要,不然容易出现“莫名其妙”的错误。 python中给一个变量 a 赋值列表实际上是创建了一个列表对象,并将该列表的地址赋

    2024年02月04日
    浏览(47)
  • JavaScript之深度克隆、多种实现方式、列举各种方式的优缺点、对象自有属性、拷贝、复制

    在 JavaScript 中,对象和数组是引用类型,当将一个对象或数组赋值给另一个变量时,它们实际上是共享同一块内存空间。这意味着对一个对象或数组的修改会影响到所有引用它的变量。 为了创建一个独立的副本,可以使用深克隆。 JSON.stringify() 方法将 JavaScript 对象转换为一个

    2024年02月02日
    浏览(43)
  • C++之构造函数、析构函数、拷贝构造函数终极指南:玩转对象的诞生、生命周期与复制

    W...Y的主页 代码片段分享  前言: 在上篇内容里,我们初识了C++中的类与对象,了解了类的定义、类的实例化、 类的作用域等等,今天我们将继续深入了解类与对象的相关内容,学习构造函数、析构函数与拷贝构造函数,话不多说我们发车!!! 目录 类的6个默认成员函数

    2024年02月06日
    浏览(45)
  • python---js逆向-----为了理想爬到想要的数据,我们怎能放过它

    这是我的gitee仓库:https://gitee.com/qin-laoda/python-exercises 有兴趣的小可爱们可以点进去看看, _________________________________ 下面我们来按照爬虫思路找一下我们要爬的网页,并获取数据 下面我以https://ggzyfw.fujian.gov.cn/business/list/来爬取想要的数据 首先我们进去找到该网页,打开开发者工

    2024年02月08日
    浏览(42)
  • 零拷贝技术:减少数据复制和上下文切换,提高网络传输效率(下)

    在前一章节中,我们了解了DMA技术在文件传输中的重要性,并简要介绍了零拷贝技术。为了提高文件传输的性能,我们需要减少用户态与内核态之间的上下文切换次数以及内存拷贝次数。本章将深入探讨零拷贝技术的优化方法,让我们一起走进零拷贝的优化之路! 当我们意识

    2024年02月08日
    浏览(57)
  • 零拷贝技术:减少数据复制和上下文切换,提高网络传输效率(上)

    当涉及到网络传输中的零拷贝技术时,它在提高性能和效率方面扮演着重要的角色。在之前我们已经讨论了磁盘设备管理中的零拷贝技术,其中涉及到了DMA技术。现在,让我们来深入探讨一下网络传输中零拷贝技术的实现方式以及它的重要性。 在没有DMA(直接内存访问)技术

    2024年02月08日
    浏览(42)
  • Vue在页面输出JSON对象,测试接口可复制使用

    效果图: 数据处理前:  数据处理后: 代码实现:  HTML: js:

    2024年02月13日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包