JavaScript数据存储和深浅拷贝实际运用
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数据存储和深浅拷贝实际运用的更多相关文章
- Python基础知识(六)------小数据池,集合,深浅拷贝
Python基础知识(六)------小数据池,集合,深浅拷贝 一丶小数据池 什么是小数据池: 小数据池就是python中一种提高效率的方式,固定数据类型使用同一个内存地址 代码块 : 一个文 ...
- 6.Python初窥门径(小数据池,集合,深浅拷贝)
Python(小数据池,集合,深浅拷贝) 一.小数据池 什么是小数据池 小数据池就是python中一种提高效率的方式,固定数据类型,使用同一个内存地址 小数据池 is和==的区别 == 判断等号俩边的 ...
- python基础知识四 小数据池,深浅拷贝,集合+菜中菜
四.小数据池,深浅拷贝,集合+菜中菜 1小数据池 --缓存机制(驻留机制) '==' 判断两边内容是否相等 'is' 基于内存地址进行判断是否相同 a = 10 b = 10 print(a ...
- Python 入门之代码块、小数据池 与 深浅拷贝
Python 入门之代码块.小数据池 与 深浅拷贝 1.代码块 (1)一个py文件,一个函数,一个模块,终端中的每一行都是代码块 (代码块是防止我们频繁的开空间降低效率设计的,当我们定一个变量需要开辟 ...
- python学习Day6 元组、字典、集合set三类数据用法、深浅拷贝
一.深浅拷贝 1. 值拷贝 ls1 = ls2 不开辟空间,指针跟着走.(直接将ls1中存放的地址拿过来,内存中不会开辟新的空间,所以你怎么变,我也跟着变.)(ls1内部的所有类型的值发生改变,l ...
- python变量存储和深浅拷贝
python的变量及其存储 在高级语言中,变量是对内存及其地址的抽象.对于python而言,python的一切变量都是对象,变量的存储,采用了引用语义的方式,存储的只是一个变量的值所在的内存地址,而不 ...
- JavaScript -- 数据存储
Cookie Web应用程序是使用HTTP协议传输数据的.HTTP协议是无状态的协议. 一旦数据交换完毕,客户端与服务器端的连接就会关闭,再次交换数据需要建立新的连接.这就意味着服务器无法从连接上跟踪 ...
- python的小数据池和深浅拷贝
小数据池 一种数据缓存机制,也称驻留机制 在同一代码块,相同的值不会开辟新的内存 特殊字符除外 小数据池只针对:在控制台时! 数字 :-5到256间的整数会被缓存 布尔值:都会缓存8 字符串 小于等于 ...
- day06——小数据池、深浅拷贝、集合
day06 小数据池 小数据池--缓存机制(驻留机制),只是一种规格,不会实际的开辟一个空间 == 判断两边内容是否相等 ***** # a = 10 # b = 10 # print(a == b) ...
随机推荐
- 【学术篇】luogu2778 [AHOI2016初中组]迷宫(代码高能!)
好久好久我都没有刷题了. 题目の传送门:https://www.luogu.org/problem/show?pid=2778 题目大意:(啥 题目讲得不够清楚?)平面内有n个以整点(就是坐标都是整数 ...
- AJAX相关概念及应用
1.Ajax(Asynchronous JavaScript And XML) 异步的JavaScript和XML XML 可扩展标记语言 Ajax是常用的WEB开发技术,是联系前端和后端的桥梁 应用 ...
- CSS所有选择器
.class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname"的元素 1 * * ...
- 如何做一个标记为安全的ACTIVEX控件
1.添加辅助函数控件的基本结构中含有xxApp,xxCtrl,xxPropPage三个类.找到xxApp的头文件,添加三个辅助函数.// Helper functionto create a comp ...
- BCB如何编写,调用动态链接库DLL
一 编写动态链接库DLL DLL简称动态链接库,是Windows中程序的重要组成部分.想象一下,一个程序需要多人共同完成开发,怎么个共同法?这时我们就要考虑把程序分为好几个模块,团队每一个成员开发一个 ...
- iOS开发UIView.h简介
1.UICoordinateSpace不同坐标空间的坐标切换 @protocol UICoordinateSpace <NSObject> //将当前的坐标空间点转换到指定的坐标空间 - ...
- SpringBoot学习笔记(八):SpringBoot启动端口+访问路、SpringBoot配置文件yml、SpringBoot多环境区分、SpringBoot打包发布
SpringBoot启动端口+访问路径 配置文件: server.port=9090 server.context-path=/springboot 现在只能用http://127.0.0.1:909 ...
- 转:链表相交有环 经典面试题(三)附答案 算法+数据结构+代码 微软Microsoft、谷歌Google、百度、腾讯
源地址:http://blog.csdn.net/sj13051180/article/details/6754228 1.判断单链表是否有环,要求空间尽量少(2011年MTK) 如何找出环的连接点在 ...
- codeforces 1100E-Andrew and Taxi
传送门:QAQQAQ 题意:给你一个图,每条边有边权,现在你可以对边进行反转,使图中不存在环,你需要使得反转的边的边权集合中的最大值最小,并输出任意一组解. 思路:二分+拓扑排序 使得最大值最小,自然 ...
- 在AlexNet中LRN 局部响应归一化的理
在AlexNet中LRN 局部响应归一化的理 一.LRN技术介绍: Local Response Normalization(LRN)技术主要是深度学习训练时的一种提高准确度的技术方法.其中caffe ...