👩🏼 🙎🏿 💇🏿 7 Tricks mit Rest- und Spread-Operatoren bei der Arbeit mit JS-Objekten 👨🏻‍✈️ 🤟🏾 🈶

Hallo Habr! Ich präsentiere Ihnen die Übersetzung des Artikels „7 Tricks mit ruhenden und verbreiteten JavaScript-Objekten“ von Joel Thoms.

Hallo allerseits, neulich hat mir ein Arbeitskollege einen Link zu einem Artikel auf Englisch geworfen, in dem verschiedene Methoden für die Arbeit mit Ruhe- und Verbreitungsoperatoren aufgeführt sind. Sie war nützlich für mich und ich beschloss, es zu übersetzen. Also fangen wir an.

Bild

Die Operatoren Rest und Spread können nicht nur verwendet werden, um Argumente zu einem Array zu kombinieren und Arrays zu kombinieren.

In diesem Artikel finden Sie die 7 am wenigsten bekannten Tricks zur Verwendung von Rest- und Spread-Operatoren.

1. Eigenschaften hinzufügen

Klonen eines Objekts beim Hinzufügen zum neuen Objekt zum geklonten Objekt.
Im folgenden Beispiel klonen wir das Benutzerobjekt und fügen dem geklonten userWithPass- Objekt die Kennworteigenschaft hinzu .

const user = { id: 100, name: 'Howard Moon'}
const userWithPass = { ...user, password: 'Password!' }

user //=> { id: 100, name: 'Howard Moon' }
userWithPass //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

2. Objekte zusammenführen

Analysieren von Prozessen Teil1 und Teil2 merzhatsya ein Objekt Benutzer1

const part1 = { id: 100, name: 'Howard Moon' }
const part2 = { id: 100, password: 'Password!' }

const user1 = { ...part1, ...part2 }
//=> { id: 100, name: 'Howard Moon', password: 'Password!' }

Mit dieser Syntax können also dieselben Objekte zusammenhängend sein.

const partial = { id: 100, name: 'Howard Moon' }
const user = { ...partial, id: 100, password: 'Password!' }

user //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

3. Entfernen einer Eigenschaft aus einem Objekt

Eigenschaften eines Objekts können mithilfe einer Kombination aus Destrukturierungs- und Restanweisungen entfernt werden. Im folgenden Beispiel zerstören wir das rest- Objekt und entfernen die Kennworteigenschaft daraus .

const noPassword = ({ password, ...rest }) => rest
const user = {
  id: 100,
  name: 'Howard Moon',
  password: 'Password!'
}

noPassword(user) //=> { id: 100, name: 'Howard moon' }

4. Dynamisches Löschen von Eigenschaften

Im Beispiel unten wird die removeProperty Funktion nimmt prop als Argument. Unter Verwendung des im Argument übergebenen Eigenschaftsnamens schließen wir die Eigenschaft dynamisch vom geklonten Objekt aus.

const user1 = {
  id: 100,
  name: 'Howard Moon',
  password: 'Password!'
}
const removeProperty = prop => ({ [prop]: _, ...rest }) => rest
//                     ----       ------
//                          \   /
//                dynamic destructuring

const removePassword = removeProperty('password')
const removeId = removeProperty('id')

removePassword(user1) //=> { id: 100, name: 'Howard Moon' }
removeId(user1) //=> { name: 'Howard Moon', password: 'Password!' }

5. Organisation oder Sortierung von Eigenschaften nach Namen

Manchmal sind die Eigenschaften im Objekt nicht in der Reihenfolge, die wir benötigen. Mit verschiedenen Tricks können wir Eigenschaften beispielsweise an den Anfang der Liste oder in die Mitte verschieben.

const user3 = {
  password: 'Password!',
  name: 'Naboo',
  id: 300
}

const organize = object => ({ id: undefined, ...object })
//                            -------------
//                          /
//  move id to the first property

organize(user3)
//=> { id: 300, password: 'Password!', name: 'Naboo' }

Um das Kennwort am Ende einzufügen , müssen Sie zuerst das Objekt zerstören und das Kennwort entfernen und es dann mit dem Spread-Operator hinzufügen.

6. Standardeigenschaften

Die Standardeigenschaften sind die Eigenschaften, die festgelegt werden, wenn sie sich nicht im geklonten Objekt befinden.

Im folgenden Beispiel fehlt das Anführungszeichenfeld im user2- Objekt . Die Funktion setDefaults setzt, wenn das Anführungszeichen fehlt, standardmäßig den Wert [] . Nach dem Aufruf der setDefaults (user2) Funktion, gibt es eine Eigenschaft mit dem Wert Anführungszeichen [] Beim Aufruf setDefaults (user4), die zurückgibt Funktion eines unmodifizierten Wert , da das user4 Objekt bereits hat Anführungszeichen Eigenschaft

const user2 = {
  id: 200,
  name: 'Vince Noir'
}

const user4 = {
  id: 400,
  name: 'Bollo',
  quotes: ["I've got a bad feeling about this..."]
}

const setDefaults = ({ quotes = [], ...object}) =>
  ({ ...object, quotes })

setDefaults(user2)
//=> { id: 200, name: 'Vince Noir', quotes: [] }

setDefaults(user4)
//=> {
//=>   id: 400,
//=>   name: 'Bollo',
//=>   quotes: ["I've got a bad feeling about this..."]
//=> }

Sie können es auch so schreiben, wenn die Standardwerte zuerst angezeigt werden sollen:

const setDefaults = ({ ...object}) => ({ quotes: [], ...object })

7. Eigenschaften umbenennen

Mit den Tricks von oben können wir auch eine Funktion erstellen, die die Eigenschaften des Objekts in uns umbenennt.

Stellen Sie sich vor, wir haben ein Objekt mit der Eigenschafts-ID in Großbuchstaben geschrieben und müssen es in Kleinbuchstaben umbenennen. Wir beginnen mit dem Entfernen der ID-Eigenschaft aus dem Objekt. Fügen Sie es dann wieder mit der Namens-ID hinzu, während das Objekt geklont wird.

const renamed = ({ ID, ...object }) => ({ id: ID, ...object })

const user = {
  ID: 500,
  name: "Bob Fossil"
}

renamed(user) //=> { id: 500, name: 'Bob Fossil' }

8. Bonus. Hinzufügen einer Eigenschaft basierend auf einer Bedingung

Vielen Dank an @vinialbano für das Zeigen einer solchen Methode. In diesem Beispiel fügen wir das Passwortfeld nur hinzu, wenn password == true !

const user = { id: 100, name: 'Howard Moon' }
const password = 'Password!'
const userWithPassword = {
  ...user,
  id: 100,
  ...(password && { password })
}

userWithPassword //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

Fazit

Ich habe versucht, einige weniger bekannte Methoden zur Verwendung von Rest- und Spread-Operatoren aufzulisten. Wenn Sie andere Methoden kennen, die nicht in dieser Liste aufgeführt sind, schreiben Sie bitte in den Kommentaren darüber. Wenn dieser Artikel für Sie nützlich war, senden Sie ihn bitte an Ihre Freunde und Bekannten weiter.

7 Tricks mit Rest- und Spread-Operatoren bei der Arbeit mit JS-Objekten