js 对象拷贝

1.浅拷贝

   1.直接赋值

let obj1 = {

        name: 'yrg',

        age: 22,

        hobby: ['basketball','game']

      }

      let obj2 = obj1

      obj1.name = 'xx'

      console.log(obj1,obj2)

2.Object.assign只复制一层对象的属性,如果对象中的属性值是对象,浅拷贝并不会复制对象属性中的属性

 let obj3 = {

        name: 'yrg',

        age: 22,

        person: {

          name: 'Henry',

          age: '21'

        },

        hobby: ['basketball','game']

      }

      let obj4 = Object.assign({},obj3 )

      obj3 .age = '99'; //不会改变obj4 的age

      obj4 .person.age = '25'; //也会改变obj3 的person.age

      console.log(obj3 ,obj34)

3.浅拷贝3-三点(...)

let obj5 = {

        name: 'yrg',

        age: 22,

        person: {

          name: 'Henry',

          age: '21',

        },

        hobby: ['basketball', 'game'],

      }

      obj5.age = '99'; //也会改变obj1的age

      let obj6 = { ...obj5 }

      obj6.person.age = '25'; //也会改变obj1的person.age

      console.log(obj5,obj6)

2.深拷贝

1.JSON.parse(JSON.stringify(obj1))

let obj1 = {

        name: 'yrg',

        age: 22,

        person: {

          name: 'Henry',

          age: 21,

        },

        hobby: ['basketball', 'game'],

      }

      let obj2 = JSON.parse(JSON.stringify(obj1))

      obj1.person.age = 99

      obj2.person.age = 199

      console.log(obj1,obj2)

2.迭代递归法for...in

let obj1 = {

        name: 'yrg',

        age: 22,

        person: {

          name: 'Henry',

          age: 21,

        },

        hobby: ['basketball', 'game'],

      }

      function deepObject(obj) {

        let cloneObj = {}

        for (let key in obj) {

          let objChild = Object.prototype.toString.call(obj[key])

          cloneObj[key] =

            objChild === '[object Array]' || objChild === '[object Object]'

              ? deepObject(obj[key])

              : obj[key]

        }

        return cloneObj

      }

      let obj2 = deepObject(obj1)

      obj2.person.age = 999

      console.log(obj1, obj2)

3.利用MessageChannel

function deepClone(obj) {

  return new Promise((resolve) => {

    const { port1, port2 } = new MessageChannel()

    port1.postMessage(obj)

    port2.onmessage = (msg) => {

      resolve(msg.data)

    }

  })

}

 

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值