关于JS深拷贝和浅拷贝
最近在前端开发中遇到一些问题,就是数组中的某个对象或某个对象的值改变之后,在不刷新页面的时候需要重新渲染值时,页面显示的还是原来的数据。比如:
data{
A:[{id:1,num:1},{id:2,num:2},{id:3,num:3}]
}
function changeA(){
let B = this.data.B;
B[1].num = 88
this.setData({
A:B
});
console(this.data.A);
}
这时候打印出来时已经改变的值。A:[{id:1,num:4},{id:2,num:4},{id:3,num:4}]。但是页面显示的还是原来的值。这就涉及到浅拷贝和深拷贝问题了。上面修改为:
function changeA(){
let B = [ ];
this.data.B.forEach(item=>{
let ObjectB = item
B.push(ObjectB)
})
B[1].num = 88
this.setData({
A:B
});
}
区别:浅拷贝只复制对象的第一层属性、深拷贝可以对对象的属性进行递归复制;
最后一句引用大神关于JS深拷贝和浅拷贝区别,有兴趣的可以去看下: https://www.jianshu.com/p/cf1e9d7e94fb
关于JS深拷贝和浅拷贝的更多相关文章
- js 深拷贝和浅拷贝
js 深拷贝和浅拷贝 先举一下项目中遇到的两个例子: 例子1: var json = $.parseJSON(data.data);//data.data是接口返回的值var a = json.cha ...
- 老生常谈之js深拷贝与浅拷贝
前言 经常会在一些网站或博客看到"深克隆","浅克隆"这两个名词,其实这个很好理解,今天我们就在这里分析一下js深拷贝和浅拷贝. 浅拷贝 我们先以一个例子来说明 ...
- 在vue中子组件修改props引发的对js深拷贝和浅拷贝的思考
不管是react还是vue,父级组件与子组件的通信都是通过props来实现的,在vue中父组件的props遵循的是单向数据流,用官方的话说就是,父级的props的更新会向下流动到子组件中,反之则不行. ...
- JS 深拷贝和浅拷贝概念,以及实现深拷贝的三种方式
一.理解堆栈,基本数据类型与引用数据类型 1.堆栈 栈(stack):系统自动分配的内存空间,内存会由系统自动释放,用来存放函数的参数值,局部变量的值等,特点是先进后出. 堆(heap):系统动态分配 ...
- 面试遇到的坑JS深拷贝和浅拷贝
首先要搞明白深拷贝和钱拷贝的区别要先搞明白 栈和堆的区别 一.栈 栈存储基础数据类型,如: String.Number.Boolean.Null.Underined,这些简单的基础数据类型能够直接存储 ...
- js深拷贝与浅拷贝
1 基础知识:基本类型与引用类型 JS中可以把变量分成两部分,基本类型和引用类型. 基本类型包括:Undefined.Null.Boolean.Number和String: 引用类型值可能由多个值构成 ...
- js深拷贝、浅拷贝
浅拷贝: 只针对当前对象的属性进行拷贝,若当前对象的属性是引用类型时,这个不考虑,不进行拷贝.若属性是引用类型,拷贝后引用的是地址,如果进行更改,会影响拷贝的原对象属性. 深拷贝:针对当前对象的数据的 ...
- js 深拷贝和浅拷贝理解
作者:进击的袋鼠链接:https://www.zhihu.com/question/23031215/answer/124017500来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...
- [转] js深拷贝和浅拷贝
一.数组的深浅拷贝 在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致 ...
随机推荐
- ZWave对COMAND CLASS的处理流程
文章主题 在开发一个 ZWave Device 的过程中,对 COMAND CLASS(单词太长了,后面就简写为 CC 啦) 的处理是最基本.最重要的工作.这篇文章以最最简单的 CC:COMMNAD ...
- Android学习笔记:实现层级导航
层级导航示例 层级导航案例 1.收下准备两个Activity的布局文件 activity_main.xml <?xml version="1.0" encoding=&quo ...
- java小项目——抽奖系统
来了来了!这不又到考试周了吗!愁人,又得复习,复习,复习!这段时间每天都在复习线代和高数!(说是复习,说实话其实是在预习,啊哈哈哈哈哈),得有一段时间都没有学到新的知识了,代码感觉都生疏了,惆怅.博客 ...
- for, for in, for of, map, forEach 循环的区别:
for, for in, for of, map, forEach 循环的区别: for 遍历数组: //对象遍历数组 var arr = [ {Monday: '星期一', Tuesday: ' ...
- 如何用 React 构建前端架构
早期的前端是由后端开发的,最开始的时候仅仅做展示,点一下链接跳转到另外一个页面去,渲染表单,再用Ajax的方式请求网络和后端交互,数据返回来还需要把数据渲染到DOM上.写这样的代码的确是很简单.在We ...
- 八张图彻底了解JDK8 GC调优秘籍-附PDF下载
目录 简介 分代垃圾回收器的内存结构 JDK8中可用的GC 打印GC信息 内存调整参数 Thread配置 通用GC参数 CMS GC G1参数 总结 简介 JVM的参数有很多很多,根据我的统计JDK8 ...
- 第三章:软件也要拼脸蛋-UI 开发的点点滴滴
常用控件 常用控件有:按钮 Button.文本显示框 TextView.图片显示框 ImageView.文本编辑框 EditText.进度条 ProgressBar.提示框 AlertDialog.进 ...
- skywalking7 源码解析 (3) :agent启动服务分析以及性能影响
skywalking必看的文章,转载自https://blog.csdn.net/u010928589/article/details/106608864/
- 手写spring事务框架-蚂蚁课堂
1.视频参加C:\Users\Administrator\Desktop\蚂蚁3期\[www.zxit8.com] 0017-(每特教育&每特学院&蚂蚁课堂)-3期-源码分析-手写Sp ...
- android 6.0 权限设置详解
从Android 6.0版本开始,在安装应用时,该应用无法取得任何权限. 相反,在使用应用的过程中,若某个功能需要获取某个权限,系统会弹出一个对话框,显式地由用户决定是否将该权限赋予应用. 只有得到了 ...