乐趣区

关于javascript:JS对象拷贝的几种方式以及赋值引号问题

明天做我的项目的时候,在对对象赋值时,发现字段名不对,变成了 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’ = 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 对于数组的操作。

退出移动版