位置: 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双向数据绑定原理(手撕代码题目集锦)

  • 剪映的抖音课程浏览记录怎么查看(抖音拍摄及剪映课程介绍)

    剪映的抖音课程浏览记录怎么查看(抖音拍摄及剪映课程介绍)

  • 电脑搜狗输入法怎么打特殊符号(电脑搜狗输入法怎么设置快捷短语)

    电脑搜狗输入法怎么打特殊符号(电脑搜狗输入法怎么设置快捷短语)

  • 抖音赞了再撤回对方知道吗(抖音点赞又撤回,楼主能看到吗)

    抖音赞了再撤回对方知道吗(抖音点赞又撤回,楼主能看到吗)

  • 小红书如何上传高清视频(小红书如何上传音乐)

    小红书如何上传高清视频(小红书如何上传音乐)

  • 苹果钥匙串什么意思(苹果钥匙串是干嘛)

    苹果钥匙串什么意思(苹果钥匙串是干嘛)

  • word选择不相连文字(word中选择不连续文本的快捷键)

    word选择不相连文字(word中选择不连续文本的快捷键)

  • 荣耀30安兔兔跑分多少(荣耀30s安兔兔)

    荣耀30安兔兔跑分多少(荣耀30s安兔兔)

  • 抖音能设置禁止合拍吗(抖音能设置禁止关注吗)

    抖音能设置禁止合拍吗(抖音能设置禁止关注吗)

  • 荣耀9x升降摄像头容易坏吗(荣耀9x升降摄像头卡住了)

    荣耀9x升降摄像头容易坏吗(荣耀9x升降摄像头卡住了)

  • 正在验证已更新的iphone软件需要多久(正在验证已更新的ipad软件)

    正在验证已更新的iphone软件需要多久(正在验证已更新的ipad软件)

  • 抖音搜不到用户名是怎么回事(抖音搜不到用户是不是拉黑了)

    抖音搜不到用户名是怎么回事(抖音搜不到用户是不是拉黑了)

  • 抖音怎么查看自己的钱包(抖音怎么查看自己的日常)

    抖音怎么查看自己的钱包(抖音怎么查看自己的日常)

  • airpods2防水嘛(airpods2代防水吗)

    airpods2防水嘛(airpods2代防水吗)

  • 智行火车票学生票为什么还是原价(智行火车票学生认证不了)

    智行火车票学生票为什么还是原价(智行火车票学生认证不了)

  • m1804c3ce是什么型号的手机(m1804c3cc是什么型号)

    m1804c3ce是什么型号的手机(m1804c3cc是什么型号)

  • 为什么wifi满格却上不了网(为什么wifi满格信号网速很慢)

    为什么wifi满格却上不了网(为什么wifi满格信号网速很慢)

  • word文本编辑模式有(word文本编辑器在哪里)

    word文本编辑模式有(word文本编辑器在哪里)

  • 手机qq邮件怎么申请(手机qq邮件怎么看)

    手机qq邮件怎么申请(手机qq邮件怎么看)

  • air3是ipad几代(苹果平板air3是第几代)

    air3是ipad几代(苹果平板air3是第几代)

  • 候补订单一定能兑现吗(候补订单一定能抢到票吗)

    候补订单一定能兑现吗(候补订单一定能抢到票吗)

  • excel图例靠上(excel图例在顶部显示)

    excel图例靠上(excel图例在顶部显示)

  • 抖音官方消息怎么删除(抖音官方消息怎么屏蔽)

    抖音官方消息怎么删除(抖音官方消息怎么屏蔽)

  • 安卓手机视频误删怎么恢复(安卓视频被删怎么找回)

    安卓手机视频误删怎么恢复(安卓视频被删怎么找回)

  • 华为jsnal00a什么型号(华为jsnal00什么型号多少钱)

    华为jsnal00a什么型号(华为jsnal00什么型号多少钱)

  • 阿里巴巴怎么投诉卖家在哪里(阿里巴巴怎么投诉卖家 淘宝投诉流程)

    阿里巴巴怎么投诉卖家在哪里(阿里巴巴怎么投诉卖家 淘宝投诉流程)

  • 服装app开发有哪些价值(服装开发软件)

    服装app开发有哪些价值(服装开发软件)

  • 文件夹属性中没有共享选项卡(文件夹属性没有安全)

    文件夹属性中没有共享选项卡(文件夹属性没有安全)

  • 亏损企业需要计提递延所得税资产吗
  • 一般纳税人销售使用过的固定资产
  • 结转未交增值税会计科目怎么写
  • 内部退养个人所得税政策
  • 教育行业税收优势分析
  • 发票商品类别有哪几种
  • 技术开发收入免征所得税吗
  • 政府单位临聘人员辞退
  • 应付票据和应付账款有什么区别
  • 二手车销售统一专票图片
  • 客运承运人是什么意思
  • 酒店内部招待费怎么记账
  • 对公账户进账是否缴税
  • 公司向股东借款计入什么科目
  • 母公司给子公司担保需要决议吗
  • 技术服务从哪年开始实施
  • 融资租赁的租金包括
  • 建筑工程项目部由哪几个部门组成
  • 二季度支出小于一季度什么意思
  • 合并财务报表的特点
  • 失控发票进项税转出申报怎么填
  • 为什么手机连不上热点
  • 苹果14promax电池掉电很快
  • 出租方的维修义务
  • win7音频服务未运行怎么办
  • 财务人员如何审核合同
  • 委托代销视同买断会计分录怎么写?
  • 融资租赁业务的特点
  • php set_time_limit
  • php图形用户界面
  • mysql分区分表原理
  • 售后回租融资租赁案例
  • 会计核算的职能主要是从什么方面综合反映
  • php比较大小
  • opencv几何变换
  • python如何运行
  • python多线程多核
  • 原始凭证可以外带吗
  • 民间非营利组织有哪些
  • 核定征收方式包括哪几种
  • 让税务局代开的发票直接交纳的税金如何做会计分录?
  • 异地预缴税金
  • 房产税的政策依据
  • 支付员工经济补偿金会计处理方式
  • 企业最应避免的外部环境和内部条件组合是
  • 公司销售给客户的感谢信
  • 售后回租的实际利率怎么计算
  • 结转主营业务成本是什么意思
  • 诉讼费用负担原则是什么
  • 分支机构属于小型微利企业吗?
  • 银行承兑汇票怎么操作
  • 发票抬头是个人税号怎么填
  • 开窗函数窗口范围
  • win xp 添加网络打印机
  • win10升级后无法进入系统一直重启
  • linux安装php7.3
  • pull current
  • mac如何搜索应用
  • .mcp是什么文件
  • win8如何切换用户登录
  • win8怎么彻底删除安装的软件
  • windows怎么右键
  • windows7的开机启动项在哪里
  • 电脑系统win8
  • window10里的ie浏览器
  • 模拟监控app
  • autorun病毒怎么清理
  • framelayout布局
  • 安卓机怎么直播
  • android内存使用情况
  • JavaScript实现99乘法表及隔行变色实例代码
  • linux怎么ssh远程
  • shell脚本实际运用
  • 用简单的方法做好玩的手工视频教程
  • javascript用的多吗
  • javascript 作用
  • android数据存储与访问方式
  • python 代码缩进
  • 减免所得税额怎么计算出来的
  • 销售旧货如何开票
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设