像是目前有兩個變數 訂單清單(數組物件)
跟 目前修改訂單(單個物件)
使用者在一開始點指定修改訂單時,會做 修改訂單 = 訂單清單[選定index]
接著使用者 訂單清單 修改時 訂單清單[選定index] 的資料也會跟著改變
但這不是使用者期望效果,因為預期心裡是點保存確認才去改動 訂單清單[選定index]
請問如何避免兩者的連動修改?
發現可以使用 ES6 Spread syntax 新語法做到物件拷貝,避免上述問題 :
修改訂單 = Object.assign({}, 訂單列表[選定index])
但是對於深度嵌套的對象,這可能會出錯
。
這個問題可以使用lodash函數'clonedeep'進行此操作,它不會複製引用。
修改訂單 = _.cloneDeep(訂單列表[選定index])
或是嫌麻煩不考慮效能,可以使用JSON.parse + JSON.stringify
修改訂單 = JSON.parse(JSON.stringify( 訂單列表[選定index] ));