vue对象复制(深拷贝,多层对象拷贝方式在后面)
使用:es6中的“对象扩展运算符 ”,如下// 对象深拷贝obejctCopy() {// 源对象小李const source = { name: '小李', age: 18, gender: '男', school: '清华大学' }// 拷贝小李const copy1 = { ...source }// 拷贝小李,并修改名字为小张const copy2 = { ...source, name:
·
使用: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)
}
结果:可见拷贝出来的对象,与源对象无关,深拷贝完成
更新:
经网友指出,当对象中还包含对象时,则里层对象还是浅拷贝,验证代码
// 源对象小李
// 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
我的理解:==比较对象的时候还是比较的引用地址是不是同一个。在多层拷贝中,虽然“对more的引用”这个操作被复制了,但是引用指向的“more对象地址”还是同一个,内存中实际上只有一个“more”。因此要再次复制more才可以
更多推荐
已为社区贡献3条内容
所有评论(0)