【前端自学(5)】直接赋值 浅拷贝 深拷贝


1 直接赋值 浅拷贝 深拷贝

  • 直接上实例
//定义一个比较复杂的对象
let o = {
  id: 1,
  name: 'john',
  msg: {
    age: 18,
    msgarr: [10, 30],
  },
  complex: [
    {
      complexa: 30,
      complexarr: [1, 2, { oa: 2, ob: 3, oc: [4, 6] }],
    },
    {
      complexb: 10,
      complexc: 5,
    },
    1,
  ]
}

//直接赋值 a和o指向同一个地址
let a = o

//浅拷贝 浅拷贝只会赋值对象的非对象属性
let b = {}
Object.assign(b, o) //等同于let b = {...o}

//深拷贝 会从堆内存中开辟一个新的区域存放新对象,新对象跟原对象不再共享内存 用的递归思想
function deepCopy (newobj, oldobj) {
  for (let i in oldobj) {
    let item = oldobj[i]
    if (item instanceof Array) {
      newobj[i] = []
      deepCopy(newobj[i], item)
    }
    else if (item instanceof Object) { //引用类型分两种 数组和对象
      newobj[i] = {}
      deepCopy(newobj[i], item)
    } else {
      newobj[i] = item
    }
  }
}
//深拷贝
let c = {}
deepCopy(c, o)

//测试
o.id = 2
console.log(a.id) //2
console.log(b.id) //1
console.log(c.id) //1

o.msg.age = 20
console.log(a.msg.age) //20
console.log(b.msg.age) //20
console.log(c.msg.age) //18

o.complex[2] = 1000
console.log(a.complex[2]) //1000
console.log(b.complex[2]) //1000
console.log(c.complex[2]) //1

o.complex[0].complexarr[2].oc[1] = 100
console.log(a.complex[0].complexarr[2].oc[1]) //100
console.log(b.complex[0].complexarr[2].oc[1]) //100
console.log(c.complex[0].complexarr[2].oc[1]) //6

console.log(c)
/*{
  id: 1,
  name: 'john',
  msg: { age: 18, msgarr: [ 10, 30 ] },   
  complex: [
    { complexa: 30, complexarr: [Array] },
    { complexb: 10, complexc: 5 },        
    1
  ]
}*/

2 总结

建议仔细区分这三个词,以及区分引用类型和基本类型。


版权声明:本文为Time_Freeze原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。