zoukankan      html  css  js  c++  java
  • js 中的 深拷贝与浅拷贝

    js在平时的项目中,赋值操作是最多的;比如说:

     1  var person1 = {
     2          name:"张三",
     3          age:18,
     4          sex:"male",
     5          height:180,
     6          weight:14012  }
    13  var person2 = person1;
    14  console.log(person2)
    15  person2.name = "李四";
    16  console.log(person1,person2);

    这段代码,console.log 打印出来的结果 person1 和person2的值是一样的。原因就是 person2 person1 都是引用类型;person2的引用地址 和person1的引用地址是一样的;所以改变person2,person1也是跟着person2 一起变化。因为改变的是同一个值。如果不明白的,可以查看https://www.cnblogs.com/lixiuming521125/p/10867062.html

    那么问题来了,怎么让 person2 复制 person1的值,并且 person2改变值,不影响 person1 的值???

    这里,我们可以重新创建person3,person3是个空对象;person3循环获取person1的值。即:

    1 var person3 = {}
    2  for(var key in person1){
    3      person3[key] = person1[key]
    4  }
    5  console.log(person3);
    6  person3.name = "王五";
    7 console.log(person3,person1)

    这里 person3 的name变成了王五,但是呢 person1的name 还是张三;

    这个就是浅拷贝

    但是问题又接着出现了;

    这个时候,我把person1修改了一下;增加了一个son对象;并且了,我封装了浅拷贝,把他做成了函数:

     1 function clone(origion,target){
     2     var tar = target?target:{};
     3     for(key in origion){
     4         if(origion.hasOwnProperty(key)){
     5             tar[key] = origion[key];
     6         }
     7     }
     8 return tar;
     9 }
    10 
    11 Object.prototype.num = 1;
    12  var person1 = {
    13          name:"张三",
    14          age:18,
    15          sex:"male",
    16          height:180,
    17          weight:140,
    18          son:{
    19              first:"lucy",
    20               second:"joy",
    21               third:"Jhonn"
    22          }
    23  }
    24 
    25  var person4 = clone(person1);
        person4.son.six = "ben"
    26 console.log(person4,person1)

    这个时候,person4的son 对象 有了这个 ben,但是 person1 的 son 对象也有。这个就是浅拷贝的一个问题,他只能拷贝 对象 数组的 引用值;

    这个时候,可以通过深拷贝来解决这个问题;

     1 //深拷贝 js原生
     2  function deepClone(origion,target){//origion:原始数据  target:目标数据
     3      var tar = target||{};
     4     for(key in origion){
     5         if(origion.hasOwnProperty(key)){
     6             if(MyTypeOf(origion[key]) == "Array" ){
     7                 tar[key] = [];
     8                 deepClone(origion[key],tar[key]);
     9             }else if(MyTypeOf(origion[key]) == "Object"){
    10                 tar[key] = {};
    11                 deepClone(origion[key],tar[key]);
    12             }
    13             tar[key] = origion[key];
    14             
    15         }
    16     }
    17     return tar;
    18  }
    19 var person5 = deepClone(person1)
    20 person5.son.fifth = "111111";
    21 console.log(person5,person1)

    当然还可以通过 json方式 来实现 深拷贝 JSON.stringify() JSON.parse();

     1  var person1 = {
     2          name:"张三",
     3          age:18,
     4          sex:"male",
     5          height:180,
     6          weight:140,
     7          son:{
     8              first:"lucy",
     9               second:"joy",
    10               third:"Jhonn"
    11          }
    12  };
    13 
    14 var str = JSON.stringify(person1)//把 person1转成字符串
    15 var  json = JSON.parse(str)//把字符串转成 json对象,此时的person1 和 json实现了深拷贝
  • 相关阅读:
    笔记:HttpResponse类
    既生瑜何生亮,为何有了类还要有结构?
    dotnet 文件下载后文件名乱码
    SQL SERVER临时表的使用
    笔记:SQL SERVER 2005中的同步复制技术(转)
    .net 四种错误处理机制
    DotNET 长文章分页方法
    HTML标签过滤方案
    过滤查询条件LIKE里面的关键字符
    理解HTTP消息头
  • 原文地址:https://www.cnblogs.com/lixiuming521125/p/11135464.html
Copyright © 2011-2022 走看看