JavaScript removes unnecessary properties of an object

The Thinking series aims to convey a practical programming idea in 10 minutes.

In business development, we often encounter the following situations: based on the interface data returned by the backend, the frontend saves it in the object Object. During the frontend development process, for the convenience of some scenarios, it is necessary to add corresponding attributes to the object, but these attributes are meaningless to the backend and we hope to delete them when saving and submitting.

Real business code: The corresponding *Value field needs to be deleted before saving

async saveData (type, data) {
  // Delete extra fields when submitting delete data.isCommonValue
  delete data.isRemoteValue
  await this.$request({
    ...API.EDIT_SERVICE,
    method: type === 'add' ? 'post' : 'put',
    data
  })
}

The above is a common way of writing, but it is not the best way in some scenarios and may bring some side effects. The following is explained by way of example:

Example

In order to better demonstrate the above situation, we rewrite the example (only for the purpose of illustrating the implementation).

let person = {
  id: '001',
  name: 'ligang', 
  email: '[email protected]'
}

Request: When submitting to the backend, the email field needs to be deleted.

Method 1: delete

Same as the business code processing method given above

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

The relevant attributes in the original data will also be deleted.

Reflect.deleteProperty() allows you to delete properties, with the same behavior as delete above.

Reflect.deleteProperty(person, 'email')

Method 2: Deconstruction

Form new objects, avoiding side effects where the original object is referenced.

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

The reference to the original data will be cut off. This method is simple and easy to understand when there are few retained attributes; it is more complicated when there are too many retained attributes.

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

The reference to the original data will be cut off. This method is simple and easy to understand when retaining a large number of attributes; it is more complicated when retaining too few attributes.

Replenish

Vue does not allow dynamically adding root-level responsive properties to an already created instance. The following methods are invalid!

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

Summarize

In actual use, it is strongly recommended to use method 2 so as not to affect the original data. Especially in the mvvm framework, the original data is often responsive. delete/deleteProperty means cutting off the "responsive relationship", and there will be problems with the data response after the delete operation.

data () {
  return {
    person:
      name: 'ligang',
      email: '[email protected]'
    }
  }
},
methods: {
	deleteProp () {
  	delete this.person.email
    // this.$delete(this.person, 'email')
	},
  addProp () {
  	this.person.email = 'xxx'
    this.$set(this.person, 'address', 'xxx')
  }
}

1. Execute the delete operation, the js object attributes are removed, but the page does not respond in time. You can use this.$delete() in vue to ensure that the deletion can trigger the update view

2. Perform the add operation to re-add the email and address attributes

1. this.person.email = 'xxx' is not responsive

2. this.$set(this.person, 'address', 'xxx') is responsive

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!