记录一下最近在学的深浅拷贝

cpupro 发布于2019-08-23 10:52 / 2083人阅读

摘要：两者享有相同的引用。深拷贝这个问题通常可以通过来解决。深浅拷贝也可以使用的方法，注意使用合并返回值

前言

最近写代码经常用到深浅拷贝，从一开始的闷头使用渐渐想要深究其理，这篇文章记录一下我的认为，有所不足，恭请指正

我们可以先看看一个常遇到的一个小问题

let a = {
    age:1
}
let b = a
a.age = 2
console.log(b.age)   //2

从上面的例子中我们看到了，如果给一个变量赋值一个对象，那么两者的值会是同一个引用，其中一方变化，另一方也会有相应的改变。
通常我们开发中不希望出现这样的问题，我们可以使用浅拷贝来解决这个问题。

浅拷贝

首先可以通过 Object.assign 来解决这个问题。

let a = {
    age:1
}
let b = Object.assign({} , a)
a.age = 2
console.log(b.age)   //1

当然大多数情况我们比较喜欢通过展开运算符（...）来解决

let a = {
        age:1
    }
    let b ={...a} 
    a.age = 2
    console.log(b.age)   //1

通常浅拷贝就解决了大部分问题，但是如果遇到以下情况就需要用到深拷贝了

 let a = {
            age:1，
            jobs:{
            first："FE"
            }
        }
        let b ={...a} 
        a.jobs.first = "native"
        console.log(b.jobs.first)   //native

浅拷贝只解决了第一层的问题，如果接下去的值还是有对象的话，那么就又回到刚刚的开始问题了。两者享有相同的引用。要解决这个问题，我们就要引入深拷贝。

深拷贝

这个问题通常可以通过 JSON.parse(JSON.stringify(object)) 来解决。

 let a = {
                age:1，
                jobs:{
                first："FE"
                }
            }
            let b =JSON.parse(JSON.stringify(a))
            a.jobs.first = "native"
            console.log(b.jobs.first)   //FE

但是该方法也是有局限性的：

会忽略underfind

不能序列化函数

不能解决循环引起的对象

我们再看一下下面这个情况

 let obj ={
 
    a:undefined,
    b:function(){},
    name:"yck"
    
   }

   let newObj = JSON.parse(JSON.stringify(obj))
   console.log(newObj) //{name : "yck"}

你会发现在上述情况中，该方法忽略掉函数和undefind
但是在通常情况下，复杂数据都是可序列化的，所以这个函数可以解决大部分问题，并且该函数是内置函数中处理深拷贝性能最快的。当然如果你的数据中含有以上三种情况下。可以使用 lodash 的深拷贝函数
如果你所需要拷贝的对含有内置类型并且不包括函数，可以使用 MessageChannel

  function structuralClone(obj){
      return new Promise(resolve => {
          const {port1,port2} = new MessageChannel();
          port2.onmessage = ev =>resolve(ev.data);
          port1.postMessage(obj)
      })
  }
  var obj = {a:1,b:{
      c:b
  }}
  //注意这个方法是异步的
  //可以处理undefined和循环引用对象
  const clone = await structuralClone(obj);

深拷贝与浅拷贝的区别

深拷贝和浅拷贝最根本的区别在于是否是真正获取了一个对象的复制实体，而不是引用。

浅拷贝—-只是拷贝了基本类型的数据，而引用类型数据，拷贝后也是会发生引用，我们把这种拷贝叫做“（浅复制）浅拷贝”，换句话说，浅拷贝仅仅是指向被拷贝的内存地址，如果原地址中对象被改变了，那么浅拷贝出来的对象也会相应改变。

深拷贝—-在计算机中开辟了一块新的内存地址用于存放复制的对象。

浅拷贝实例
//此递归方法不包含数组对象

var obj = { a:1, arr: [2,3] };
var shallowObj = shallowCopy(obj);

function shallowCopy(src) {
  var newobj = {};
  for (var prop in src) {
    if (src.hasOwnProperty(prop)) {
      newobj[prop] = src[prop];
    }
  }
  return newobj;

因为浅复制只会将对象的各个属性进行依次复制，并不会进行递归复制，而 JavaScript 存储对象都是存地址的，所以浅复制会导致 obj.arr 和 shallowObj.arr 指向同一块内存地址，大概的示意图如下。

导致的结果就是：

shallowObj.arr[1] = 5;
console.log(obj.arr[1]);   //  5

深拷贝实例
而深复制则不同，它不仅将原对象的各个属性逐个复制出去，而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上。这就不会存在上面 obj 和 shallowObj 的 arr 属性指向同一个对象的问题。

var obj = { 
    a:1, 
    arr: [1,2]，
    nation : "中国",
    birthplaces:["北京","上海","广州"]
};
var obj2 = {name:"杨"};
obj2 = deepCopy(obj,obj2);
console.log(obj2);
//深复制，要想达到深复制就需要用递归
function deepCopy(o,c){
   var c = c || {}；
   for(var i in o){
   if(typeof o[i] === "object"){
          //要考虑深复制问题了
          if(o[i].constructor === Array){
            //这是数组
            c[i] =[]；
          }else{
            //这是对象
            c[i] = {}；
          }
          deepCopy(o[i],c[i])；
        }else{
          c[i] = o[i]；
        }
     }
     return c
 }

结果如下面的示意图所示：

这样obj和obj2分别拥有不同的内存地址，两边值的改变互不影响。

深浅拷贝也可以使用JQuery的extend方法，注意使用合并返回值

let newObj = $.extend(true,{},partcontent);

GPU云服务器云服务器深浅拷贝 php最近浏览记录服务器文件拷贝记录服务器拷贝文件记录

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96765.html

javascript之深浅拷贝

摘要：为何写最近在研究深浅拷贝，找了很多资料，感觉不是很满意，所以自己就整理了一份。深拷贝如果给放到新的内存中，将的各个属性都复制到新内存里，就是深拷贝。安全的值是指能够呈现为有效格式的值。参考文档冴羽的专题之深浅拷贝深拷贝与浅拷贝的实现为何写：最近在研究深浅拷贝，找了很多资料，感觉不是很满意，所以自己就整理了一份。废话不多说，我们来一起复习一下吧，也希望留下您宝贵意见。何为深浅拷贝？...

LMou 2019-08-26 11:34 评论0 收藏0
JavaScript之浅、深拷贝

摘要：前言里面浅拷贝和深拷贝是非常关键的知识点，今天就来通过本文清楚的了解深浅拷贝以及该如何实现这两种拷贝方式。对象的拷贝又分为浅拷贝和深拷贝。印证了上述所说的对于所有的基本类型，简单的赋值已经是实现了深拷贝。前言 JavaScript里面浅拷贝和深拷贝是非常关键的知识点，今天就来通过本文清楚的了解深浅拷贝以及该如何实现这两种拷贝方式。深浅拷贝的区别拷贝：其实就是一个对象复制给另外...

leanxi 2019-08-26 10:37 评论0 收藏0
JS专题之深浅拷贝

摘要：在之前的文章专题之数据类型和类型检测中我有讲过，中的数据类型分为两种，基本数据类型和引用数据类型，基本数据类型是保存在栈的数据结构中的是按值访问，所以不存在深浅拷贝问题。前言在开发过程中，偶尔会遇到这种场景，拿到一个数据后，你打算对它进行处理，但是你又希望拷贝一份副本出来，方便数据对比和以后恢复数据。那么这就涉及到了 JS 中对数据的深浅拷贝问题，所谓深浅拷贝，浅拷贝的意思就是，...

ASCH 2019-08-23 15:07 评论0 收藏0
深浅拷贝

摘要：好像栗子不是那么好吃，那我们来看看下面的解释吧深浅拷贝深拷贝和浅拷贝只针对像这样的引用类型数据。深拷贝则是开启一个新的栈，两个对象对应两个不同的引用地址，修改一个对象的属性，不会改变另一个对象的属性。拷贝顾名思义就是复制，但是它并不简单哦，拷贝分为深浅拷贝，那么啥是深拷贝啥是浅拷贝呢，让我们来举个栗子，浅拷贝就是当你拷贝别人的U盘里东西时，却没有新建文件存放在自己的电脑里，直接在里面...

yck 2019-08-21 17:42 评论0 收藏0
Python面试经验总结，面试一时爽，一直面试一直爽！

摘要：面试的心得体会简历制作我做了两份简历，用两个手机账号，两个简历名字，分别在各个招聘网站投了双份简历，一个是数据分析的简历一个是全栈开发的简历，我真正接触快年，不管是学习还是工作学到的东西，这两年大概掌握了前端爬虫数据分析机器学习技术， showImg(https://upload-images.jianshu.io/upload_images/13090773-b96aac7e974c...

gxyz 2019-07-31 10:28 评论0 收藏0