今天做项目的时候,在对对象赋值时,发现字段名不对,变成了object。
于是做了以下测试:
下面是对象拷贝的几种方式:...扩展运算符,Object.assign(),JSON转化。
const data = {a:1,b:2,c:undefined}
const app = {data:{a:2,b:4},state:{x:true}}
app[data] = data
const backup1 = {...app}
const backup2 = Object.assign({},app)
const backup3 = JSON.parse(JSON.stringify(app))
console.log(app)
console.log(backup1)
console.log(backup2)
console.log(backup3)
输出结果如下:
> Object { data: Object { a: 2, b: 4 }, state: Object { x: true }, [object Object]: Object { a: 1, b: 2, c: undefined } }
> Object { data: Object { a: 2, b: 4 }, state: Object { x: true }, [object Object]: Object { a: 1, b: 2, c: undefined } }
> Object { data: Object { a: 2, b: 4 }, state: Object { x: true }, [object Object]: Object { a: 1, b: 2, c: undefined } }
> Object { data: Object { a: 2, b: 4 }, state: Object { x: true }, [object Object]: Object { a: 1, b: 2 } }
发现了吗,data字段没有变,而是结尾多了一个[object Object]字段。
原因在于赋值时用了app[data] = data,而其中的data在上文定义成一个全局变量了,所以是object。
若想正常赋值,得加上引号,即app['data']=data
也可以通过app.data = data进行赋值。
最后,我们把赋值代码修改正确后,我们在再中间加上一句backup1['data']['a'] = 9
,及修改对象的值,来看看谁是浅拷贝,谁是深拷贝。
结果如下:
> Object { data: Object { a: 9, b: 2, c: undefined }, state: Object { x: true } }
> Object { data: Object { a: 9, b: 2, c: undefined }, state: Object { x: true } }
> Object { data: Object { a: 9, b: 2, c: undefined }, state: Object { x: true } }
> Object { data: Object { a: 1, b: 2 }, state: Object { x: true } }
总结:
浅拷贝:扩展运算符、Object.assign
深拷贝:JSON,以及for循环遍历对值拷贝
JSON会忽略掉undefined字段
赋值问题:data['a']或data.a进行赋值。
下次有机会再写一篇js关于数组的操作。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。