VUE开发 - 深拷贝与浅拷贝探讨

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE开发 - 深拷贝与浅拷贝探讨相关的知识,希望对你有一定的参考价值。

参考技术A 普通的 变量赋值一般都是浅拷贝,类似于java指针的概念

对b来说就是浅拷贝。

还有一个问题估计前端小伙伴经常遇到

当你在方法中去需要接收这个 list 去处理一些业务,但是又不想影响到原数据。

上面就是浅拷贝。

想要避免这种问题影响到主体的处理,利用深拷贝,直接

这样,你怎么处理item都不会影响到原数据结构。浅拷贝就是你,深拷贝就是另一个你,和你没任何关系,除了一模一样外。

js深拷贝与浅拷贝

老规矩先出一道题目,大家猜猜打印的结果是什么,然后我们一起探讨背后的原因。

var a=[1,2,3]
var b=a;
var c=[6,7,8]
b=c
b[0]=9
a=c
console.log(a)
console.log(b)
console.log(c)

先分析题目,我们会看到b首先对a进行了一次复制,接下来,b又复制了c,
最后b又改变其中的值。最后打印出a,b,c看看它们的结果有没有什么关联。
第一步:了解栈(stack)堆(heap)的概念,看看我们的a,b,c存在哪里。
stack为自动分配的内存空间,它由系统自动释放;而heap则是动态分配的内存,大小不定也不会自动释放。

第二步:存放在堆内存中的对象,变量实际保存的是一个指针,这个指针指向另一个位置。每个空间大小不一样,要根据情况开进行特定的分配。
当b=a时,b这个时候和a指向的是同样的地址,即此刻b=[1,2,3]

第三步:当堆中出现c的值,并且b=c,这个时候就是b复制c的值,b和c指向同一个地址。此时b的值为[6,7,8]

第四步:当b的值改变,b[0]=9,此时堆中的值为[9,7,8],此时c的值也为[9,7,8]

第五步:a复制c,此时a和b和c指向同一个地址。我们也会发现一个问题,那就是原来a中的值似乎还是存在堆中,
系统无法对它回收,但是我们却不知道通过什么方式找到它,但是它又占用了堆中的内存,这个就是内存泄露。

上面的就是一个典型的浅拷贝实现过程,拷贝对象里面的属性改变会影响原对象。那什么是深拷贝呢?深拷贝就是
拷贝对象里面的属性改变不会影响原对象的属性。
那如何实现一个深拷贝呢?

var array=[1,2,3]
function copy(array){
  let newArray=[]
  for(let item of array){
    newArray.push(item)
  }
  return newArray
}
var copyArray=copy(array)
copyArray[0]=100
console.log(array)
console.log(copyArray)

第一步:

第二步:newArray会复制array中的值,不过此时newArray中的值和array的值不在同一个堆中

第三步:newArray中的值改变了,但是array中的值不会改变。

同理我们可以实现对象的深拷贝

var newObject={}
var obj={
  name:\'a\',
  b:\'student\'
}
function copy(obj){
  for(let item in obj){
    newObject[item]=obj[item]
  }
  return newObject
}
var copyObj=copy(obj)
copyObj.name=\'b\'
console.log(obj);//{name:\'a\',b:\'student\'}
console.log(copyObj)//{name:\'b\',b:\'student\'}

如果实现一个针对数组和对象的深拷贝是如何实现的呢?

function deepClone(s,t){
  var t={}||[]
  for(var i in s){
    if(typeof s[i]===\'object\'){
      t[i]=(s[i].constructor===Array)?[]:{}
      deepClone(s[i],t[i])
    }else{
      t[i]=s[i]
    }
  }
  return t
}
a.name={a:\'aa\'}
var b={}
b=deepClone(a,b)
b.name={a:\'bb\'}
console.log(a.name)
console.log(b.name)

如果不是单独针对数组或对象,而是能够通过数组对象和其他复杂的JSON形式的对象,我们怎么实现深拷贝呢?

var array=[
  {name:1},
  {name:2},
  {name:3}
]
var copyArray=JSON.parse(JSON.stringify(array))
copyArray[0].name=100
console.log(\'aa\',array)
console.log(\'bb\',copyArray)

以上是关于VUE开发 - 深拷贝与浅拷贝探讨的主要内容,如果未能解决你的问题,请参考以下文章

ES6深拷贝与浅拷贝

深拷贝与浅拷贝的实现(一)

iOS开发——深拷贝与浅拷贝详解

js深拷贝与浅拷贝

iOS开发 深拷贝与浅拷贝

IOS开发中深拷贝与浅拷贝