Mehrere magische Verwendungen des JS ES6 Spread-Operators

1. Attribute hinzufügen

Wenn Sie ein Objekt kopieren, fügen Sie ihm neue Eigenschaften hinzu.

Das Beispiel kopiert das Benutzerobjekt nach userWithPass und fügt die Kennworteigenschaft hinzu.

const Benutzer = { ID: 110, Name: 'Kayson Li'}
const userWithPass = { ...Benutzer, Passwort: 'Passwort!' }

Benutzer //=> { ID: 110, Name: 'Kayson Li'}
userWithPass //=> { id: 110, name: 'Kayson Li', password: 'Passwort!' }

2. Mehrere Objekte zusammenführen

Mehrere Objekte können durch ... zu einem neuen Objekt zusammengefasst werden. Teil1 und Teil2 in Benutzer1 zusammenführen:

const part1 = { id: 110, name: 'Kayson Li' }
const part2 = { id: 110, password: 'Passwort!' }

const user1 = { ...Teil1, ...Teil2 }
//=> { id: 110, name: 'Kayson Li', password: 'Passwort!' }

3. Objekteigenschaften entfernen

Sie können die Destrukturierung in Verbindung mit dem Restoperator verwenden, um Eigenschaften aus einem Objekt zu entfernen. In diesem Beispiel wird das Passwort dekonstruiert und andere Attribute werden im Restobjekt beibehalten und zurückgegeben.

const noPassword = ({ Passwort, ...rest }) => rest
const Benutzer = {
  ID: 110,
  Name: 'Kayson Li',
  Passwort: "Passwort!"
}

noPassword(Benutzer) //=> { id: 110, name: 'Kayson Li' }

4. Attribute dynamisch entfernen

Schauen wir uns ein Beispiel an. Die Funktion removeProperty akzeptiert den Parameter prop. Mithilfe der Funktion für dynamische Eigenschaftsnamen kann prop dynamisch aus dem kopierten Objekt entfernt werden.

const Benutzer1 = {
  ID: 110,
  Name: 'Kayson Li',
  Passwort: "Passwort!"
}
const removeProperty = prop => ({ [prop]: _, ...rest }) => rest
// ---- ------
// \ /
// Dynamische Dekonstruktion const removePassword = removeProperty('password')
const removeId = entfernenProperty('id')

entfernePasswort(Benutzer1) //=> { ID: 110, Name: 'Kayson Li' }
removeId(user1) //=> { name: 'Kayson Li', password: 'Passwort!' }

5. Passen Sie die Reihenfolge der Attribute an

Manchmal liegen die Eigenschaften eines Objekts nicht in der gewünschten Reihenfolge vor. Mit einigen Tricks lassen sich Attribute in den Vordergrund oder in den Hintergrund rücken.

Um die ID nach vorne zu verschieben, können Sie id: undefined vor das erweiterte Objekt setzen:

const Benutzer3 = {
  Passwort: "Passwort!",
  Name: 'Bruce',
  ID: 300
}

const organisieren = Objekt => ({ id: undefiniert, ...Objekt })
// -------------
// /
// Verschiebe die ID an die erste Attributposition organize(user3)
//=> { id: 300, password: 'Passwort!', name: 'Bruce' }

Um das Passwort an die letzte Position zu verschieben, dekonstruieren Sie zuerst das Passwort aus dem Objekt und platzieren Sie das Passwort dann nach dem erweiterten Objekt:

const Benutzer3 = {
  Passwort: "Passwort!",
  Name: 'Bruce',
  ID: 300
}

const organize = ({ Passwort, ...Objekt }) =>
  ({ ...Objekt, Passwort })
//--------
// /
// Passwort ans Ende verschieben organize(user3)
//=> { Name: 'Bruce', ID: 300, Passwort: 'Passwort!' }

6. Standardwerte für Eigenschaften festlegen

Wenn einem Objekt ein bestimmtes Attribut fehlt, müssen wir dieses Attribut manchmal dem Objekt hinzufügen und einen Standardwert festlegen.

Beispielsweise hat user2 kein Anführungszeichen-Attribut. Der Zweck der Funktion setDefaults besteht darin, sicherzustellen, dass alle Objekte Anführungszeichen haben und einen Standardwert [] haben.

Führen Sie setDefaults(user2) aus und das zurückgegebene Objekt enthält Anführungszeichen: [].

Führen Sie setDefaults(user4) aus. Da user4 bereits Anführungszeichen hat, bleibt es unverändert.

const Benutzer2 = {
  ID: 200,
  Name: „Jack Ma“
}

const Benutzer4 = {
  ID: 400,
  Name: 'Lu Xun',
  Zitate: ["Das habe ich nie gesagt..."]
}

const setDefaults = ({ Anführungszeichen = [], ...Objekt}) =>
  ({ ...Objekt, Anführungszeichen })

setDefaults(Benutzer2)
//=> { ID: 200, Name: 'Jack Ma', Zitate: [] }

setDefaults(Benutzer4)
//=> {
//=> ID: 400,
//=> Name: 'Lu Xun',
//=> Zitate: ["Das habe ich nie gesagt..."]
//=> }

Wenn Sie möchten, dass dieses Attribut vorne steht, können Sie es folgendermaßen schreiben:

const setDefaults = ({ ...Objekt}) => ({ Anführungszeichen: [], ...Objekt })

7: Umbenennen von Attributen

Indem wir die vorherigen Techniken kombinieren, können wir eine Funktion zum Umbenennen von Attributen schreiben.

Angenommen, einige Objekte haben ID-Attribute in Großbuchstaben und wir möchten diese in Kleinbuchstaben ändern. Was sollen wir tun? Dekonstruieren Sie zunächst den ID-Wert aus dem Objekt, fügen Sie diesen Wert dann in das neue Objekt ein und ändern Sie ihn in eine ID in Kleinbuchstaben:

const umbenannt = ({ ID, ...Objekt }) => ({ id: ID, ...Objekt })

const Benutzer = {
  ID: 500,
  Name: „Zhang Quandan“
}

umbenannt (Benutzer) //=> { ID: 500, Name: 'Benutzername' }

8. Es gibt noch mehr erstaunliche Operationen

Sie können basierend auf Bedingungen entscheiden, ob ein bestimmtes Attribut hinzugefügt werden soll, was beim Erstellen von Anforderungsparametern sehr nützlich ist. Beispielsweise fügen wir dieses Attribut nur hinzu, wenn das Passwort einen Wert hat:

const Benutzer = { ID: 110, Name: 'Kayson Li' }
const password = 'Passwort!'
const Benutzer mit Passwort = {
  ...Benutzer,
  ID: 100,
  ...(Passwort && { Passwort })
}

Benutzer mit Passwort //=> { ID: 110, Name: 'Kayson Li', Passwort: 'Passwort!' }

Oben sind die Details mehrerer wunderbarer Verwendungsmöglichkeiten des JS ES6-Spread-Operators aufgeführt. Weitere Informationen zum JS ES6-Spread-Operator finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!