仔细看看,会有收获。js深浅拷贝

Posted 小小码农,可笑可笑

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了仔细看看,会有收获。js深浅拷贝相关的知识,希望对你有一定的参考价值。

好好理解深浅拷贝和赋值(针对引用类型)

赋值:两个对象指向同一内存地址。结果,无论是修改基本类型还是引用类型,两个对象的值都会改变。

浅拷贝:两个对象指向不同的内存地址,但是他们中的引用类型数据指向同一内存地址。结果,修改引用类型,两个对象的值都会改变;修改基本类型,互不影响。

深拷贝:两个对象指向不同的内存地址,他们中的引用类型也指向不同的内存地址。结果,均互不影响。

直接通过Object.assign()实现浅拷贝

浅拷贝:

const target =  
    a: 1, 
    b: 2 ,
    c:[1,2],
    d:function() 
      console.log(this.d)
    
;
let newObj = Object.assign(,target);
newObj.a = 3
newObj.c[1] = 3
console.log('newObj',newObj)
console.log('target',target)

手写深浅拷贝:

浅拷贝:

let target =  a: 1, b: 2 ,c:[1,2],d:function() 
  console.log(this.d)
;
//let cc = Object.assign(,target);
let cc = shallowClone(target);
cc.c[1] = 4
console.log('cc',cc)
console.log('target',target)
function shallowClone(obj) 
  let newObj = new Object()
  for (const key in obj) 
    if (Object.hasOwnProperty.call(obj, key)) 
      newObj[key] = obj[key];
    
  
  return newObj

深拷贝:

let target =  a: 1, b: 2 ,c:[1,2],d:function() 
  console.log(this.d)
;
let cc = deepClone(target);
cc.c[1] = 4
console.log('cc',cc)
console.log('target',target)
function deepClone(obj) 
  let type = Object.prototype.toString.call(obj)
  console.log(type)
  if(type.indexOf('Object') === -1)
    return obj
  else
    let newObj = new Object()
    for (const key in obj) 
      if (Object.hasOwnProperty.call(obj, key)) 
        newObj[key] = deepClone(obj[key]);
      
    
    return newObj
  

 

以上是关于仔细看看,会有收获。js深浅拷贝的主要内容,如果未能解决你的问题,请参考以下文章

仔细看看,会有收获。js深浅拷贝

仔细看看,会有收获。js深浅拷贝

js对象的深浅拷贝

深入浅出FE对象的深浅拷贝

java提高(15)---java深浅拷贝

js深浅拷贝