关于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对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致 ...
随机推荐
- vulstack红队评估(一)
一.环境搭建: 1.根据作者公开的靶机信息整理: 虚拟机初始所有统一密码:hongrisec@2019 因为登陆前要修改密码,改为了panda666... 2.虚拟网卡网络配置: ①Win7双 ...
- Andrew Ng - 深度学习工程师 - Part 1. 神经网络和深度学习(Week 2. 神经网络基础)
=================第2周 神经网络基础=============== ===2.1 二分分类=== ===2.2 logistic 回归=== It turns out, whe ...
- APP移动端测试
重点: app测试的内容 add 命令 monkey命令 次重点:模拟器的安装 雷电 夜神 android 自带的模拟器 真机测试 简单了解云测Testing 腾讯云() 了解:市场有点移动端的操 ...
- junit搭建自动化测试框架(一)
这里主要使用Junit搭建一个分层的自动化测试框架.这就是一个有业务逻辑的单元测试的思想.灵活性很大,对测试人员的代码能力要求较高. 以登录QQ邮箱为例,数据源使用了集合接口Map.借鉴了MVC的思想 ...
- akka-typed(8) - CQRS读写分离模式
前面介绍了事件源(EventSource)和集群(cluster),现在到了讨论CQRS的时候了.CQRS即读写分离模式,由独立的写方程序和读方程序组成,具体原理在以前的博客里介绍过了.akka-ty ...
- 搭建hadoop伪集群
基础设置:jdk.ssh. 1.操作系统.环境.网络.必须软件 2.关闭防火墙 3.设置hosts映射 4.时间同步 5.安装jdk 6.设置ssh免秘钥部署配置:初始化运行:命令行使用:
- Linux系统如何使用Fuser命令
本文不再更新,可能存在内容过时的情况,实时更新请访问原地址:Linux系统如何使用Fuser命令: 什么是Fuser命令? fuser命令是一个非常聪明的unix实用程序,用于查找正在使用某个文件.目 ...
- 关于数据文件的文件头2-P2
文章目录 1 疑问点 2 实验验证 2.1 实验环境 2.2 创建统一区大小管理表空间 2.2.1 统一区大小40k 2.2.2 统一区大小56k 2.2.3 统一区大小64k 2.2.4 统一区大小 ...
- 每日一题 - 剑指 Offer 39. 数组中出现次数超过一半的数字
题目信息 时间: 2019-06-29 题目链接:Leetcode tag: 数组 哈希表 难易程度:简单 题目描述: 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字. 假设数组是非空的 ...
- 【Python】any() 或者 or
前言 在我之前的文章中有any()和all()的对比:any()和all()对比其中介绍了any()函数的基本特性---可迭代对象中有任意一个不为False的时候,返回True,如果可迭代对象为空的话 ...