Shulou(Shulou.com)06/03 Report--

This article mainly introduces JavaScript how to delete unnecessary attributes in the object, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

In business development, we often encounter: the front end returns the interface data based on the backend, and the front end is saved to the object Object. In the front end development process, for the convenience of some scenarios, corresponding attributes need to be added to the object, but these attributes have no meaning for the back end. You want to delete them when saving and submitting.

Real business code: delete the corresponding * Value field before saving

Async saveData (type, data) {/ / delete redundant fields 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 to write in some scenarios, and it may bring some side effects. The following is illustrated by examples:

Example

To better demonstrate the above, let's rewrite the example (just to illustrate the implementation).

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

Request: when submitting to the backend, you need to delete the email field.

Method 1: delete deletion

In the same way as the business code given above

Delete person.emailconsole.log (person) / / {id: '001mm, name:' ligang'}

The relevant attributes in the original data are also deleted.

Reflect.deleteProperty () allows you to delete attributes, which is consistent with the delete behavior described above.

Reflect.deleteProperty (person, 'email') mode 2: deconstruction

Form a new object to avoid side effects where the original object is referenced.

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

The reference will be severed from the original data. For a small number of reserved attributes, this method is simple and easy to understand; scenes with too many reserved attributes will be more complex.

Let {email,... newPerson} = personconsole.log (newPerson) / / {id: '001mm, name:' ligang'}

The reference will be severed from the original data. For a large number of reserved attributes, this method is simple and easy to understand; scenes with too few reserved attributes will be more complex.

Summary

In practical use, it is strongly recommended that the second way to operate, do not affect the original data. Especially in the mvvm framework, the original data is often responsive, delete/deleteProperty means to cut off the "response relationship", and the data response after the delete operation will be problematic.

Data () {return {person: {name: 'ligang', email:' xfolx.com'}, methods: {deleteProp () {delete this.person.email / / this.$delete (this.person, 'email')}, addProp () {this.person.email =' xxx' this.$set (this.person, 'address',' xxx')}}

1. When you perform the delete operation, the js object attribute is removed, but the page does not respond in time. You can use this.$delete () in vue to ensure that deletion triggers the update of the view.

two。 Perform add operation and re-add email and address attributes

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

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

Supplement

For instances that have been created, Vue does not allow the dynamic addition of root-level responsive property. None of the following methods are valid!

This.$set (this, 'email',') this.$set (this.$data, 'email',') Thank you for reading this article carefully. I hope the article "JavaScript how to remove unnecessary attributes in objects" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.