JavaScript分两种数据类型。
1.简单数据类型有:number, string, boolean, undefined和null
当声明一个简单数据类型的变量时,在内存中会把数据存在栈里。
2.复杂数据类型。Object

var student = new Person

  

当我创建一个实例的时候,会在内存中开辟一个空间,对象存放在堆里,student是一个内存地址,指向堆中的对象。

深拷贝和浅拷贝就是在存储复杂数据时产生的问题。

浅拷贝就是我只获取到了这个对象的内存地址,可以指向原对象。当我修改时,原对象也会改变。
深拷贝就是重新创建了一个空间,对象放在堆里,我修改原对象不影响我新创建的对象。

实际上在开发过程中,遇到了一个问题,就是有关于深浅拷贝的。

首先介绍一下开发背景。是一个后台管理项目。表格数据后有编辑页面,编辑页面与添加页面服用,利用了vue的父子传值,当我是添加时,父组件给子组件是一个空对象,当我是编辑时,传入当前表格一行的数据以对象的形式传给子组件。
子组件的方法。

 // 打开弹窗
dialogOpen() {
console.log('打开页面',this.expert)
this.$refs.form.resetFields();
if (this.expert.id) {
// 进入修改
this.form = this.expert
} else {
this.form = {};
}
},

  通过expert.id 判断是否是添加页面,如果是,把expert里的内容传给当前表单,如果不是,表单内容清空。

props: {
expert: Object,
value: Boolean
},

  

该组件接收的值

出现的问题就是:当我打开编辑弹窗后,并没有做任何修改关闭页面,列表页的当前列表数据变成空。

出现原因:当我进入编辑页面时,this.form = this.expert 是浅拷贝,复制了对象的地址。当我点击添加时,在父组件中给this.expert ={},此时,this.form就是空的,再点击编辑,form也是空的了。

解决后的代码

 // 打开弹窗
dialogOpen() {
console.log('打开页面',this.expert)
this.$refs.form.resetFields();
if (this.expert.id) {
// 进入修改
this.form = {...this.expert}// 深拷贝
} else {
this.form = {};
}
},

  

JavaScript数据存储和深浅拷贝实际运用的更多相关文章

  1. Python基础知识(六)------小数据池,集合,深浅拷贝

    Python基础知识(六)------小数据池,集合,深浅拷贝 一丶小数据池 什么是小数据池: ​ 小数据池就是python中一种提高效率的方式,固定数据类型使用同一个内存地址 代码块 : ​ 一个文 ...

  2. 6.Python初窥门径(小数据池,集合,深浅拷贝)

    Python(小数据池,集合,深浅拷贝) 一.小数据池 什么是小数据池 小数据池就是python中一种提高效率的方式,固定数据类型,使用同一个内存地址 小数据池 is和==的区别 == 判断等号俩边的 ...

  3. python基础知识四 小数据池,深浅拷贝,集合+菜中菜

    四.小数据池,深浅拷贝,集合+菜中菜 1小数据池 --缓存机制(驻留机制) ​ '==' 判断两边内容是否相等 ​ 'is' 基于内存地址进行判断是否相同 a = 10 b = 10 print(a ...

  4. Python 入门之代码块、小数据池 与 深浅拷贝

    Python 入门之代码块.小数据池 与 深浅拷贝 1.代码块 (1)一个py文件,一个函数,一个模块,终端中的每一行都是代码块 (代码块是防止我们频繁的开空间降低效率设计的,当我们定一个变量需要开辟 ...

  5. python学习Day6 元组、字典、集合set三类数据用法、深浅拷贝

    一.深浅拷贝 1.  值拷贝 ls1 = ls2  不开辟空间,指针跟着走.(直接将ls1中存放的地址拿过来,内存中不会开辟新的空间,所以你怎么变,我也跟着变.)(ls1内部的所有类型的值发生改变,l ...

  6. python变量存储和深浅拷贝

    python的变量及其存储 在高级语言中,变量是对内存及其地址的抽象.对于python而言,python的一切变量都是对象,变量的存储,采用了引用语义的方式,存储的只是一个变量的值所在的内存地址,而不 ...

  7. JavaScript -- 数据存储

    Cookie Web应用程序是使用HTTP协议传输数据的.HTTP协议是无状态的协议. 一旦数据交换完毕,客户端与服务器端的连接就会关闭,再次交换数据需要建立新的连接.这就意味着服务器无法从连接上跟踪 ...

  8. python的小数据池和深浅拷贝

    小数据池 一种数据缓存机制,也称驻留机制 在同一代码块,相同的值不会开辟新的内存 特殊字符除外 小数据池只针对:在控制台时! 数字 :-5到256间的整数会被缓存 布尔值:都会缓存8 字符串 小于等于 ...

  9. day06——小数据池、深浅拷贝、集合

    day06 小数据池 小数据池--缓存机制(驻留机制),只是一种规格,不会实际的开辟一个空间 == 判断两边内容是否相等 ***** # a = 10 # b = 10 # print(a == b) ...

随机推荐

  1. 【学术篇】luogu2778 [AHOI2016初中组]迷宫(代码高能!)

    好久好久我都没有刷题了. 题目の传送门:https://www.luogu.org/problem/show?pid=2778 题目大意:(啥 题目讲得不够清楚?)平面内有n个以整点(就是坐标都是整数 ...

  2. AJAX相关概念及应用

    1.Ajax(Asynchronous JavaScript And XML) 异步的JavaScript和XML XML 可扩展标记语言 Ajax是常用的WEB开发技术,是联系前端和后端的桥梁 应用 ...

  3. CSS所有选择器

    .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname"的元素 1 * * ...

  4. 如何做一个标记为安全的ACTIVEX控件

    1.添加辅助函数控件的基本结构中含有xxApp,xxCtrl,xxPropPage三个类.找到xxApp的头文件,添加三个辅助函数.// Helper functionto create a comp ...

  5. BCB如何编写,调用动态链接库DLL

    一 编写动态链接库DLL DLL简称动态链接库,是Windows中程序的重要组成部分.想象一下,一个程序需要多人共同完成开发,怎么个共同法?这时我们就要考虑把程序分为好几个模块,团队每一个成员开发一个 ...

  6. iOS开发UIView.h简介

    1.UICoordinateSpace不同坐标空间的坐标切换 @protocol UICoordinateSpace <NSObject> //将当前的坐标空间点转换到指定的坐标空间 - ...

  7. SpringBoot学习笔记(八):SpringBoot启动端口+访问路、SpringBoot配置文件yml、SpringBoot多环境区分、SpringBoot打包发布

    SpringBoot启动端口+访问路径 配置文件: server.port=9090 server.context-path=/springboot 现在只能用http://127.0.0.1:909 ...

  8. 转:链表相交有环 经典面试题(三)附答案 算法+数据结构+代码 微软Microsoft、谷歌Google、百度、腾讯

    源地址:http://blog.csdn.net/sj13051180/article/details/6754228 1.判断单链表是否有环,要求空间尽量少(2011年MTK) 如何找出环的连接点在 ...

  9. codeforces 1100E-Andrew and Taxi

    传送门:QAQQAQ 题意:给你一个图,每条边有边权,现在你可以对边进行反转,使图中不存在环,你需要使得反转的边的边权集合中的最大值最小,并输出任意一组解. 思路:二分+拓扑排序 使得最大值最小,自然 ...

  10. 在AlexNet中LRN 局部响应归一化的理

    在AlexNet中LRN 局部响应归一化的理 一.LRN技术介绍: Local Response Normalization(LRN)技术主要是深度学习训练时的一种提高准确度的技术方法.其中caffe ...