最近在前端开发中遇到一些问题,就是数组中的某个对象或某个对象的值改变之后,在不刷新页面的时候需要重新渲染值时,页面显示的还是原来的数据。比如:

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深拷贝和浅拷贝的更多相关文章

  1. js 深拷贝和浅拷贝

    js 深拷贝和浅拷贝 先举一下项目中遇到的两个例子: 例子1: var json = $.parseJSON(data.data);//data.data是接口返回的值var a = json.cha ...

  2. 老生常谈之js深拷贝与浅拷贝

    前言 经常会在一些网站或博客看到"深克隆","浅克隆"这两个名词,其实这个很好理解,今天我们就在这里分析一下js深拷贝和浅拷贝. 浅拷贝 我们先以一个例子来说明 ...

  3. 在vue中子组件修改props引发的对js深拷贝和浅拷贝的思考

    不管是react还是vue,父级组件与子组件的通信都是通过props来实现的,在vue中父组件的props遵循的是单向数据流,用官方的话说就是,父级的props的更新会向下流动到子组件中,反之则不行. ...

  4. JS 深拷贝和浅拷贝概念,以及实现深拷贝的三种方式

    一.理解堆栈,基本数据类型与引用数据类型 1.堆栈 栈(stack):系统自动分配的内存空间,内存会由系统自动释放,用来存放函数的参数值,局部变量的值等,特点是先进后出. 堆(heap):系统动态分配 ...

  5. 面试遇到的坑JS深拷贝和浅拷贝

    首先要搞明白深拷贝和钱拷贝的区别要先搞明白 栈和堆的区别 一.栈 栈存储基础数据类型,如: String.Number.Boolean.Null.Underined,这些简单的基础数据类型能够直接存储 ...

  6. js深拷贝与浅拷贝

    1 基础知识:基本类型与引用类型 JS中可以把变量分成两部分,基本类型和引用类型. 基本类型包括:Undefined.Null.Boolean.Number和String: 引用类型值可能由多个值构成 ...

  7. js深拷贝、浅拷贝

    浅拷贝: 只针对当前对象的属性进行拷贝,若当前对象的属性是引用类型时,这个不考虑,不进行拷贝.若属性是引用类型,拷贝后引用的是地址,如果进行更改,会影响拷贝的原对象属性. 深拷贝:针对当前对象的数据的 ...

  8. js 深拷贝和浅拷贝理解

    作者:进击的袋鼠链接:https://www.zhihu.com/question/23031215/answer/124017500来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...

  9. [转] js深拷贝和浅拷贝

    一.数组的深浅拷贝 在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致 ...

随机推荐

  1. TensorFlow从0到1之回归算法(11)

    回归是数学建模.分类和预测中最古老但功能非常强大的工具之一.回归在工程.物理学.生物学.金融.社会科学等各个领域都有应用,是数据科学家常用的基本工具. 回归通常是机器学习中使用的第一个算法.通过学习因 ...

  2. Selenium上传文件方法大全

    最好的方法:调js 其他方法: Python pywin32库,识别对话框句柄,进而操作 SendKeys库 autoIT,借助外力,我们去调用其生成的au3或exe文件. keybd_event,跟 ...

  3. vulstack红队评估(五)

    一.环境搭建: ①根据作者公开的靶机信息整理 虚拟机密码: Win7: heart 123.com    #本地管理员用户 sun\Administrator dc123.com    #域管用户,改 ...

  4. 上海开发票/v电13543443967

    关于事项:Iㄋ5一★4З44一★ㄋ9.б7开发票的准备资料必须要公司名称个人的话就用个人名字和身份证去税务柜台申请办理!公司的话要提供公司全称就是营业执照上的名称,纳税人税号,如果是开普通增值税发票的 ...

  5. 黑马程序员spring data jpa 2019年第一版本

    第一步首先创建一个maven工程,导入对于的pom依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xs ...

  6. 使用反应式关系数据库连接规范R2DBC操作MySQL数据库

    1. 简介 三月份已经介绍过R2DBC,它是一种异步的.非阻塞的关系式数据库连接规范.尽管一些NoSQL数据库供应商为其数据库提供了反应式数据库客户端,但对于大多数项目而言,迁移到NoSQL并不是一个 ...

  7. 1166 - Unknown error 1166[mysql 错误

    错误码 1166 原因 字段名因为是复制过来的, 末尾存在了一个空格换行

  8. app自动化测试环境配置:adb环境配置、monkey环境配置、appium环境配置大全

    1. 安装jdk 2. 安装配置Andriod sdk 安装Andriod sdk前首先需要安装配置好jdk环境. 然后安装Android sdk 安装完成后需要配置环境变量:ANDROID_HOME ...

  9. .net core docker容器编排部署(linux)

    环境准备 需要一个linux操作系统:我这里用的是ubuntu 18.04,安装步骤就不说了,网上很多教程,当然也可以私信我. 既然需要用到docker,那么就安装个docker,apt instal ...

  10. mybatis源码配置文件解析之五:解析mappers标签流程图

    前面几篇博客分析了mybatis解析mappers标签的过程,主要分为解析package和mapper子标签.补充一张解析的总体过程流程图,画的不好,多多谅解,感谢.