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]フィールドが1つ増えました.なぜなら、付与には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の配列についての操作を書く機会があります.