位置: IT常识 - 正文

VUE浅拷贝和深拷贝(js浅拷贝和深拷贝的方法)

编辑:rootadmin
VUE浅拷贝和深拷贝 文章目录前言一、数据类型1.1.基本数据类型1.2.引用数据类型1.3.区别二、浅拷贝2.1.定义2.2.浅拷贝特点三、深拷贝3.1.定义3.2.深拷贝特点四、拷贝实现方案4.1.Object.assign()4.2.concat()4.3.slice()4.4.JSON.parse(JSON.stringify())4.5.cloneDeep()五、结论前言

推荐整理分享VUE浅拷贝和深拷贝(js浅拷贝和深拷贝的方法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue深拷贝浅拷贝,vue深拷贝和浅拷贝的区别,vue深拷贝和浅拷贝的区别,vue 深浅拷贝,javascript浅拷贝和深拷贝,javascript浅拷贝和深拷贝,vue 深浅拷贝,vue 深浅拷贝,内容如对您有帮助,希望把文章链接给更多的朋友!

在理解浅拷贝和深拷贝浅前,必须先理解基本数据类型和引用数据类型的区别。

一、数据类型1.1.基本数据类型

字符串(Sring)、布尔值(Boolean)和数字(Number)

1.2.引用数据类型

数组(Array)和对象(Object)

1.3.区别

  基本数据类型是存储在栈内存中。而引用类型存放的值是指向数据的引用,而不是数据本身,真实数据是存放在堆内存里,具体见如下:

二、浅拷贝2.1.定义

  浅拷贝是按位拷贝对象,它会创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值;如果属性是内存地址(引用类型),拷贝的就是内存地址 ,因此如果其中一个对象改变了这个地址,就会影响到另一个对象。即默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝),即只复制对象空间而不复制资源。

2.2.浅拷贝特点

  对于基本数据类型的成员对象,因为基础数据类型是值传递的,所以是直接将属性值赋值给新的对象。基础类型的拷贝,其中一个对象修改该值,不会影响另外一个。

var a = 10var b = ab = 20console.log("a",a) //10console.log("b",b) //20

  对于引用类型,比如数组或者类对象,因为引用类型是引用传递,所以浅拷贝只是把内存地址赋值给了成员变量,它们指向了同一内存空间。改变其中一个,会对另外一个也产生影响

var obj = { a:"AAA"}var obj2 = objobj2.a = "BBB"console.log("obj",obj) //{name: "BBB"}console.log("obj2",obj2) //{name: "BBB"}VUE浅拷贝和深拷贝(js浅拷贝和深拷贝的方法)

三、深拷贝3.1.定义

  深拷贝,在拷贝引用类型成员变量时,为引用类型的数据成员另辟了一个独立的内存空间,实现真正内容上的拷贝。

3.2.深拷贝特点

  对于基本数据类型的成员对象,因为基础数据类型是值传递的,所以是直接将属性值赋值给新的对象。基础类型的拷贝,其中一个对象修改该值,不会影响另外一个(和浅拷贝一样)。   对于引用类型,比如数组或者类对象,深拷贝会新建一个对象空间,然后拷贝里面的内容,所以它们指向了不同的内存空间。改变其中一个,不会对另外一个也产生影响。

var obj = { a:"AAA"}var obj2 = {} // 创建新的对象obj2 = objobj2.a = "BBB"console.log("obj",obj) //{name: "AAA"}console.log("obj2",obj2) //{name: "BBB"}

四、拷贝实现方案4.1.Object.assign()

  单级结构时深拷贝,多级结构浅拷贝,Object.assign()对象是用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,将返回目标对象。 a)单级结构(一级拷贝是深拷贝):

var obj = { a: 10,}var obj2 = Object.assign({}, obj);obj2.a = 20console.log("obj",obj); //{a: 10}console.log("obj2",obj2) //{a: 20}

b)多级结构(一级拷贝是浅拷贝,修改二级对象还是会影响原对象):

var obj = { a: 10, b: { c:"AAA", d:666 }}var obj2 = Object.assign({}, obj);obj2.b.c = "BBB"console.log("obj",obj); //{a: 10,b: {c:"BBB",d:666}}console.log("obj2",obj2); //{a: 10,b: {c:"BBB",d:666}}4.2.concat()

单级结构时深拷贝,多级结构浅拷贝 a)单级结构(一级拷贝是深拷贝):

let arr = [1, 2];let arr2 = arr.concat();arr2[1] = 3;console.log("arr",arr) //[1, 2]console.log("arr2",arr2) //[1, 3]

b)多级结构(一级拷贝是浅拷贝):

let arr = [1, 2, { a: 'AAA'}];let arr2 = arr.concat();arr2[2].a = 'BBB';console.log("arr",arr) //[1, 2, {a: 'BBB'}]console.log("arr2",arr2) //[1, 2, {a: 'BBB'}]4.3.slice()

单级结构时深拷贝,多级结构浅拷贝 a)单级结构(一级拷贝是深拷贝):

let arr = [1, 2, 3];let arr2 = arr.slice();arr2[1] = 4;console.log("arr",arr) //[1, 2, 3]console.log("arr2",arr2) //[1, 4, 3]

b)多级结构(一级拷贝是浅拷贝):

let arr = [1, 2, {a:'AAA'}];let arr2 = arr.slice();arr2[2].a = 'BBB';console.log("arr",arr) //[1, 2, {a: 'BBB'}]console.log("arr2",arr2) //[1, 2, {a: 'BBB'}]4.4.JSON.parse(JSON.stringify())

  用JSON.stringify将对象转成JSON字符串,再用JSON.parse()把字符串解析成对象,一去一来,新的对象产生了,而且对象会开辟新的栈,实现深拷贝。   单级多级均为深拷贝,但需要注意无法拷贝RegExp对象、function和symbol

let arr = [1, 2, {a:'AAA'}];let arr2 = JSON.parse(JSON.stringify(arr))arr2[2].a = 'BBB';console.log("arr",arr) //[1, 2, {a: 'AAA'}]console.log("arr2",arr2) //[1, 2, {a: 'BBB'}]4.5.cloneDeep()

单级多级均为深拷贝,使用lodash工具中cloneDeep方法实现深拷贝,需要通过npm引入lodash库 npm i -save lodash //全局安装

<script> import _ from 'lodash'; export default { name: 'Test', mounted() { const arr = [1, 2, { a: 'AAA' }]; const arr2 = _.cloneDeep(arr); arr2[2].a = 'BBB'; console.log('arr', arr); // [1, 2, {a: 'AAA'}] console.log('arr2', arr2); // [1, 2, {a: 'BBB'}] }, };</script>五、结论类型第一级为基础数据类型原数据中包含子对象浅拷贝改变不会使原始数据改变改变会使原始数据改变深拷贝改变不会使原始数据改变改变不会使原始数据改变

如有疑问或不足之处,欢迎交流指正,谢谢!!!

本文链接地址:https://www.jiuchutong.com/zhishi/299130.html 转载请保留说明!

上一篇:模型部署入门教程(三):PyTorch 转 ONNX 详解(模型怎么部署)

下一篇:【手撕源码】vue2.x双向数据绑定原理(手撕代码题目集锦)

  • 尾巴有再生功能的动物有什么(尾巴有再生功能的动物有哪些)(尾巴有再生功能的有哪些)

    尾巴有再生功能的动物有什么(尾巴有再生功能的动物有哪些)(尾巴有再生功能的有哪些)

  • 荣耀magic3至臻版怎么设置人脸解锁(荣耀magic3至臻版拍照效果怎么样)

    荣耀magic3至臻版怎么设置人脸解锁(荣耀magic3至臻版拍照效果怎么样)

  • 荣耀畅玩20怎么设置下边三键(荣耀畅玩20怎么拆机)

    荣耀畅玩20怎么设置下边三键(荣耀畅玩20怎么拆机)

  • 小米手环如何充电(小米手环如何充值公交卡)

    小米手环如何充电(小米手环如何充值公交卡)

  • 让siri打开旁白是怎么回事(让siri打开旁白在家关闭网络会怎么样)

    让siri打开旁白是怎么回事(让siri打开旁白在家关闭网络会怎么样)

  • 美版有锁可以升级13系统吗(美版有锁可以升级16系统吗)

    美版有锁可以升级13系统吗(美版有锁可以升级16系统吗)

  • 下载的PPT不能编辑怎么办?(下载下来的ppt为什么不能修改?)

    下载的PPT不能编辑怎么办?(下载下来的ppt为什么不能修改?)

  • 微信说说怎么显示全文(微信说说怎么显示地址)

    微信说说怎么显示全文(微信说说怎么显示地址)

  • 误触光猫wps按键(移动光猫按了wps键就没网了)

    误触光猫wps按键(移动光猫按了wps键就没网了)

  • 快手上如何查举报人(怎样直接在快手上查举报人)

    快手上如何查举报人(怎样直接在快手上查举报人)

  • sim卡注册失败怎么处理(sim卡注册失效)

    sim卡注册失败怎么处理(sim卡注册失效)

  • 苹果手机有id和无id的区别(苹果手机有id和密码怎么激活不了怎么回事)

    苹果手机有id和无id的区别(苹果手机有id和密码怎么激活不了怎么回事)

  • 为什么目录显示不全(为什么目录显示蓝色字体)

    为什么目录显示不全(为什么目录显示蓝色字体)

  • 小米8快速打开门禁卡(小米8快速打开健康码)

    小米8快速打开门禁卡(小米8快速打开健康码)

  • 一加7T怎么设置抬手亮屏(一加7t怎么设置地震预警)

    一加7T怎么设置抬手亮屏(一加7t怎么设置地震预警)

  • 参加双十一的店铺要求(参加双十一的店铺不肯发货怎么办)

    参加双十一的店铺要求(参加双十一的店铺不肯发货怎么办)

  • 滴滴代驾期待订单报酬怎么填(滴滴代驾等待时间收费标准)

    滴滴代驾期待订单报酬怎么填(滴滴代驾等待时间收费标准)

  • 淘宝隐藏评价是啥意思(淘宝隐藏评价是不是就是删除评论)

    淘宝隐藏评价是啥意思(淘宝隐藏评价是不是就是删除评论)

  • iphone distribution怎么信任

    iphone distribution怎么信任

  • opporeno背面什么材质(oppo reno背面的按钮是干嘛的)

    opporeno背面什么材质(oppo reno背面的按钮是干嘛的)

  • 苹果电脑我的电脑在哪里(苹果电脑我的电脑在哪里打开)

    苹果电脑我的电脑在哪里(苹果电脑我的电脑在哪里打开)

  • iphone6s充电一直是1%(iphone6s充电一直显示红电池)

    iphone6s充电一直是1%(iphone6s充电一直显示红电池)

  • 个税应纳税所得额是要上交的钱吗
  • 企业计提增值税 附加税
  • 个人所得税如何办理退税
  • 所得税营业成本包括税金及附加吗
  • 收到扶贫款怎么做会计分录
  • 采购普通发票和专用发票的区别
  • 财务记账之后是否必须审核
  • 发票抬头写错了还能改吗
  • 冲减本年利润
  • 多缴了附加税现金怎么办
  • 无形资产的加计扣除为什么不影响应纳税所得额
  • 小规模纳税人怎么判断
  • 生产型增值税与消费型增值税的区别在于是否允许企业
  • 民办非企业单位是私立还是公立
  • 车辆施救费会计分录
  • 金税盘增值税普通发票红冲操作流程
  • 危险废物处理原则
  • 发放职工福利的会计科目
  • 公司租土地建厂房应该怎么做账呢?
  • 免税行业企业
  • 一次性优惠税率表
  • 以前年度损益调整借贷方向
  • 出口退税计算方法是免退税吗
  • 业务招待费例子
  • 从农民手中收购农产品增值税处理
  • mac废纸篓彻底删除
  • php数组根据值排序
  • 付款保险费
  • 公司比赛奖金计入什么科目
  • macOS Big Sur 11.3 开发者预览版/公测版 Beta 6正式发布
  • php和py
  • 工程项目科目如何设置
  • 计算利润要扣除企业所得税吗
  • 未开票收入申报对企业有什么影响
  • 合同内容和开票内容不一致
  • opencv调用yolov8
  • 传承古老文化
  • yii2框架和fastadmin建商城网站哪个好用
  • 劳务费如何支付
  • 接待客人的本地人叫什么
  • phpcms技术
  • phpcms 用的是什么模板引擎
  • python tqdm是什么
  • 收到现金货款会计分录
  • 单位买的空调计入什么科目
  • 税收制度政策
  • 建筑业的人工费是什么
  • 增值税专用发票电子版
  • 固定资产净值如何处理
  • 公司配股对股价的影响
  • 支付原材料款项会计科目
  • 技术服务费可以开专票吗
  • 股权激励费用如何计提
  • 工程施工科目核算内容
  • 房地产企业房屋私售,银行怎么处理
  • 非营利医疗机构什么意思
  • mysql5.7解压版安装步骤
  • Windows Server 2008域环境下组策略两例应用
  • linux 解析
  • windows10玩lol有延迟怎么办
  • mac如何安装dmg软件
  • centos7安装过程报错
  • 金山卫士电脑版
  • win10正式版激活码
  • winxp能玩啥大型游戏
  • macos终端命令
  • 听歌播放失败什么意思
  • unity进度条有百分比代码
  • jquery的实现原理
  • linux用c语言实现命令功能
  • jq点击图片让图片进行切换
  • 编写shell脚本,实现备份文件:每天18:00归档
  • 适用于分析原因的工具有哪些
  • javascript操作数组的方法
  • 深入python3
  • js 不用var
  • jQuery中通过ajax调用webservice传递数组参数的问题实例详解
  • 电子税务局在手机上能登录吗
  • 退伍军人坐火车要钱吗
  • 西安市灵活就业社保缴费截止时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设