JavaScript entfernt unnötige Eigenschaften eines Objekts

Ziel der Thinking-Reihe ist es, in 10 Minuten eine praktische Programmieridee zu vermitteln.

In der Geschäftsentwicklung stoßen wir häufig auf die folgenden Situationen: Basierend auf den vom Backend zurückgegebenen Schnittstellendaten speichert das Frontend diese im Objektobjekt. Während des Frontend-Entwicklungsprozesses ist es aus praktischen Gründen erforderlich, dem Objekt entsprechende Attribute hinzuzufügen. Diese Attribute sind für das Backend jedoch bedeutungslos und wir hoffen, sie beim Speichern und Senden löschen zu können.

Echter Geschäftscode: Das entsprechende *Value Wertfeld muss vor dem Speichern gelöscht werden

async saveData (Typ, Daten) {
  // Zusätzliche Felder beim Senden von delete data.isCommonValue löschen
  data.isRemoteValue löschen
  warte darauf.$request({
    ...API.EDIT_SERVICE,
    Methode: Typ === 'Hinzufügen' ? 'Posten' : 'Setzen',
    Daten
  })
}

Das Obige ist eine übliche Schreibweise, in manchen Fällen ist sie jedoch nicht die beste und kann Nebenwirkungen mit sich bringen. Folgendes sei beispielhaft erläutert:

Beispiel

Um die obige Situation besser zu demonstrieren, schreiben wir das Beispiel neu (nur zum Zweck der Veranschaulichung der Implementierung).

lass Person = {
  ID: '001',
  Name: 'ligang', 
  E-Mail: „[email protected]“
}

Bitte: Beim Absenden an das Backend muss das E-Mail-Feld gelöscht werden.

Methode 1: Löschen

Entspricht der oben angegebenen Methode zur Geschäftscode-Verarbeitung

person.email löschen
console.log(Person) // {ID: '001', Name: 'ligang'}

Dabei werden auch die entsprechenden Attribute in den Originaldaten gelöscht.

Reflect.deleteProperty() können Sie Eigenschaften löschen. Das Verhalten ist identisch zum Löschen oben.

Reflect.deleteProperty(Person, 'E-Mail')

Methode 2: Dekonstruktion

Bilden Sie neue Objekte und vermeiden Sie Nebenwirkungen, bei denen auf das Originalobjekt verwiesen wird.

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

Der Bezug zu den Originaldaten wird dadurch unterbrochen. Diese Methode ist einfach und leicht zu verstehen, wenn nur wenige Attribute beibehalten werden. Sie wird komplizierter, wenn zu viele Attribute beibehalten werden.

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

Der Bezug zu den Originaldaten wird dadurch unterbrochen. Diese Methode ist einfach und leicht zu verstehen, wenn eine große Anzahl von Attributen beibehalten werden soll. Sie ist jedoch komplizierter, wenn zu wenige Attribute beibehalten werden sollen.

Auffüllen

Vue erlaubt nicht das dynamische Hinzufügen reaktionsfähiger Eigenschaften auf Stammebene zu einer bereits erstellten Instanz. Die folgenden Methoden sind ungültig!

dies.$set(dies, 'E-Mail', '')
dies.$set(diese.$data, 'E-Mail', '')

Zusammenfassen

Im tatsächlichen Gebrauch wird dringend empfohlen, Methode 2 zu verwenden, um die Originaldaten nicht zu beeinträchtigen. Insbesondere im MVVM-Framework reagieren die Originaldaten häufig. delete/deleteProperty bedeutet, dass die "Reaktionsbeziehung" unterbrochen wird, und nach dem Löschvorgang treten Probleme mit der Datenantwort auf.

Daten () {
  zurückkehren {
    Person:
      Name: 'ligang',
      E-Mail: „[email protected]“
    }
  }
},
Methoden: {
	löscheProp () {
  	diese.Person.E-Mail löschen
    // dies.$löschen(diese.Person, 'E-Mail')
	},
  addProp () {
  	diese.Person.E-Mail = "xxx"
    dies.$set(diese.Person, 'Adresse', 'xxx')
  }
}

1. Führen Sie den delete aus. Die JS-Objektattribute werden entfernt, aber die Seite reagiert nicht rechtzeitig. Sie können this.$delete() in vue verwenden, um sicherzustellen, dass das Löschen die Aktualisierungsansicht auslösen kann

2. Führen Sie den add durch, um die E-Mail- und Adressattribute erneut hinzuzufügen

1. this.person.email = 'xxx' reagiert nicht

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

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!