当前位置: 首页 > news >正文

十分钟教你弄懂深浅拷贝

浅拷贝:

 <script>
       //浅拷贝只是拷贝一层,更深层次对象级别的只拷贝引用
       //深拷贝拷贝多层,每一级别的数据都会被拷贝

       var obj = {
           id:1,
           name:'andy',
           msg:{
               age:18
           }
       };
       var o = {};
       for(var k in obj){
           //k是属性名,obj[k]是属性值
           o[k]=obj[k];
       }
       console.log(o);

       //改变o对象里msg的age属性值,发现obj对象里的msg的age也随着一起改变了
       o.msg.age = 20;
       console.log("---------------");
       console.log(obj);

</script>

在这里插入图片描述
在这里插入图片描述
浅拷贝的语法糖:

Object.assign(o,obj); //把obj对象拷给o

深拷贝:

<script>
       var obj={
           id:1,
           name:'andy',
           msg:{
               age:18
           }
       };
       var o = {};
       //封装深拷贝函数
       function deepCopy(newobj,oldobj){
           for(var k in oldobj){
               //判断属性值属于哪种数据类型
               //1、获取属性值 oldobj[k]
               var item = oldobj[k];
               //2、判断这个值是否是数组
               if(item instanceof Array){
                   newobj[k]=[];
                   deepCopy(newobj[k],item);
               //3、判断这个值是否是对象
               }else if(item instanceof Object){
                    newobj[k]={};
                    deepCopy(newobj[k],item);
               }else{
                //4、如果是简单数据类型,则直接赋值
                newobj[k] = item;
               }
           }
       }

       deepCopy(o,obj);
       o.msg.age = 20;
       console.log(o);
       console.log("------------");
       console.log(obj);
</script>

在这里插入图片描述

在这里插入图片描述
注意:深拷贝的代码部分一定要先判断属性是不是数组类型,然后再判断是不是对象属性,因为用instanceof这个方法进行判断的话,数组也是对象(因为js里万物皆对象),所以就区分不出数组和对象了,故一定要先判断是不是数组再判断是不是对象。

相关文章:

  • 一篇文章教你弄懂到底什么是BFC
  • <template>标签的用法
  • JS获取JSON字符串的几种方式
  • JS关于定义函数的区别(为啥推荐第二种方式)
  • 关于对JS立即执行函数(function(){...})()的深度理解
  • 10分钟Canvas从入门到实践
  • e.target与e.currentTarget的区别
  • 解决:微信小程序饼状图组件层级过高覆盖在日历选择器上
  • JS中数组splice方法使用需要注意的点
  • JS中for,for...in,for...of和forEach的用法和区别
  • JSON.parse和JSON.stringify的用法
  • 一文搞懂JS中变量作用域的那些事
  • JS给函数添加属性
  • 开发中常见的一些Bug
  • 一分钟搞懂JS函数提升与变量提升的优先级
  • JavaScript 如何正确处理 Unicode 编码问题!
  • avalon2.2的VM生成过程
  • C++入门教程(10):for 语句
  • hadoop入门学习教程--DKHadoop完整安装步骤
  • Java,console输出实时的转向GUI textbox
  • JDK 6和JDK 7中的substring()方法
  • maya建模与骨骼动画快速实现人工鱼
  • PAT A1092
  • select2 取值 遍历 设置默认值
  • Stream流与Lambda表达式(三) 静态工厂类Collectors
  • 阿里云容器服务区块链解决方案全新升级 支持Hyperledger Fabric v1.1
  • 初识MongoDB分片
  • 经典排序算法及其 Java 实现
  • 老板让我十分钟上手nx-admin
  • 使用阿里云发布分布式网站,开发时候应该注意什么?
  • ​2021半年盘点,不想你错过的重磅新书
  • (c语言)strcpy函数用法
  • (delphi11最新学习资料) Object Pascal 学习笔记---第8章第5节(封闭类和Final方法)
  • (超简单)构建高可用网络应用:使用Nginx进行负载均衡与健康检查
  • (理论篇)httpmoudle和httphandler一览
  • (亲测)设​置​m​y​e​c​l​i​p​s​e​打​开​默​认​工​作​空​间...
  • (转)大道至简,职场上做人做事做管理
  • ***linux下安装xampp,XAMPP目录结构(阿里云安装xampp)
  • .bat批处理(三):变量声明、设置、拼接、截取
  • .bat批处理(一):@echo off
  • .NET MVC、 WebAPI、 WebService【ws】、NVVM、WCF、Remoting
  • .NET Windows:删除文件夹后立即判断,有可能依然存在
  • .net 中viewstate的原理和使用
  • .Net环境下的缓存技术介绍
  • .NET与 java通用的3DES加密解密方法
  • /dev/sda2 is mounted; will not make a filesystem here!
  • /dev/VolGroup00/LogVol00:unexpected inconsistency;run fsck manually
  • @EnableWebMvc介绍和使用详细demo
  • @javax.ws.rs Webservice注解
  • @Transactional注解下,循环取序列的值,但得到的值都相同的问题
  • [ 云计算 | AWS ] AI 编程助手新势力 Amazon CodeWhisperer:优势功能及实用技巧
  • []FET-430SIM508 研究日志 11.3.31
  • [04] Android逐帧动画(一)
  • [145] 二叉树的后序遍历 js
  • [2544]最短路 (两种算法)(HDU)