vue对象复制（深拷贝，多层对象拷贝方式在后面）

﹏ヽ暗。殇╰゛Y 2023-01-23 09:59 31阅读 0赞

使用：es6中的“对象扩展运算符 ”，如下

// 对象深拷贝
        obejctCopy() {
          // 源对象小李
          const source = { name: '小李', age: 18, gender: '男', school: '清华大学' }
          // 拷贝小李
          const copy1 = { ...source }
          // 拷贝小李，并修改名字为小张
          const copy2 = { ...source, name: '小张' }
          // 修改源对象
          source.age = 19
          // 查看结果
          console.log(source)
          console.log(copy1)
          console.log(copy2)
        }

结果：可见拷贝出来的对象，与源对象无关，深拷贝完成

![20210714111239691.png][]

**更新：**

经网友指出，当对象中还包含对象时，则里层对象还是浅拷贝，验证代码

// 源对象小李
          // const source = { name: '小李', age: 18, gender: '男', school: '清华大学' }
          const source = { name: '小李', age: 18, gender: '男', school: '清华大学', more: { a: "test", b: 2, c: {} } }
          // 拷贝小李
          const copy1 = { ...source }
    
          console.log(source === copy1)               // false
          console.log(source.more === copy1.more)     // true

若要里层拷贝则需要再次使用...，如下

// 源对象小李
          // const source = { name: '小李', age: 18, gender: '男', school: '清华大学' }
          const source = { name: '小李', age: 18, gender: '男', school: '清华大学', more: { a: "test", b: 2, c: {} } }
          // 拷贝小李
          const copy1 = { ...source, more: { ...source.more } }
    
          console.log(source === copy1)               // false
          console.log(source.more === copy1.more)     // false

[20210714111239691.png]: /images/20221004/0439e309dff74a849a1e0b05b5c5c983.png