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

最新推荐文章于 2023-02-15 16:38:50 发布

原创最新推荐文章于 2023-02-15 16:38:50 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

本文详细讲解了直接赋值、浅拷贝和深拷贝的区别，通过实例展示了它们在对象复制时的行为。重点介绍了如何使用Object.assign()实现浅拷贝，以及自定义深拷贝函数来处理复杂对象的递归过程。阅读本文将帮助你理解引用类型和基本类型在复制中的不同作用。

文章目录

1 直接赋值浅拷贝深拷贝
2 总结

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
  ]
}*/