第JavaScript刪除對象的不必要的屬性業務開發中，我們經常會遇到：基于后端返回接口數據，前端保存到對象Object中，前端開發過程中為了一些場景的便利性，需要在該對象中增加相應的屬性，但這些屬性對于后端沒有意義，保存提交時希望刪除掉。

真實業務代碼：保存前需要刪除對應的*Value字段

asyncsaveData(type,data){

//提交時刪除多余字段

deletedata.isCommonValue

deletedata.isRemoteValue

awaitthis.$request({

...API.EDIT_SERVICE,

method:type==='add''post':'put',

data

上述是大家普遍的寫法，但部分場景下上述寫法并不是最優寫法，且可能會帶來一些副作用。下面通過示例的方式闡述一下：

為了更好的展示上述情況，我們重新編寫示例（僅為說明實現）。

letperson={

id:'001',

name:'ligang',

email:'xxx@'

訴求：在提交給后端時，需要刪除email字段。

方式一：delete刪除

同上述給到的業務代碼處理方式一樣

deleteperson.email

console.log(person)//{id:'001',name:'ligang'}

原數據中的相關屬性也會刪除掉。

Reflect.deleteProperty()允許用于刪除屬性，同上述delete行為一致。

Reflect.deleteProperty(person,'email')

方式二：解構

形成新的對象，避免在引用原始對象的地方產生副作用。

let{id,name}=person

letnewPerson={id,name}

console.log(newPerson)//{id:'001',name:'ligang'}

會和原數據切斷引用。對于保留屬性個數少，該方式處理簡單且易懂；保留屬性過多的場景會比較復雜。

let{email,...newPerson}=person

console.log(newPerson)//{id:'001',name:'ligang'}

會和原數據切斷引用。對于保留屬性個數多，該方式處理簡單且易懂；保留屬性過少的場景會比較復雜。

實際使用中，強烈建議方式二來操作，不要影響原數據。特別是在mvvm框架中，原數據往往是響應式的，delete/deleteProperty意味著切斷“響應關系”，delete操作之后的數據響應就會有問題。

data(){

return{

person:{

name:'ligang',

email:'x@'

methods:{

deleteProp(){

deletethis.person.email

//this.$delete(this.person,'email')

addProp(){

this.person.email='xxx'

this.$set(this.person,'address','xxx')

1.執行delete操作，js對象屬性剔除掉了，但頁面沒有及時響應，可以使用vue中的this.$delete()確保刪除能觸發更新視圖

2.執行add操作，重新添加email及address屬性

1.this.person.email='xxx'并不具備響應式

2.this.$set(this.person,'address','xxx')具備響應式

對于已經創建的實例，Vue不允許動態添加根級別的響應式property。下述方式都無效！

this.$set(