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)

    }

  })

}

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐