JavaScript刪除物件的不必要的屬性

2021-10-25 19:00:09

範例

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

let person = {
  id: '001',
  name: 'ligang', 
  email: 'xxx@x.com'
}

訴求：在提交給後端時，需要刪除 email 欄位。

方式一：delete 刪除

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

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

原資料中的相關屬性也會刪除掉。

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

Reflect.deleteProperty(person, 'email')

方式二：解構

形成新的物件，避免在參照原始物件的地方產生副作用。

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

會和原資料切斷參照。對於保留屬性個數少，該方式處理簡單且易懂；保留屬性過多的場景會比較複雜。

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

會和原資料切斷參照。對於保留屬性個數多，該方式處理簡單且易懂；保留屬性過少的場景會比較複雜。

補充

對於已經建立的範例，Vue 不允許動態新增根級別的響應式 property。下述方式都無效！

this.$set(this, 'email', '')
this.$set(this.$data, 'email', '')

總結

實際使用中，強烈建議方式二來操作，不要影響原資料。特別是在mvvm框架中，原資料往往是響應式的，delete/deleteProperty 意味著切斷「響應關係」，delete 操作之後的資料響應就會有問題。

data () {
  return {
    person: {
      name: 'ligang',
      email: 'x@x.com'
    }
  }
},
methods: {
	deleteProp () {
  	delete this.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') 具備響應式

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注it145.com的更多內容！

JavaScript刪除物件的不必要的屬性

目錄

範例

方式一：delete 刪除

方式二：解構

補充

總結

熱門文章