Verstehen von Destrukturierung, Rest-Parametern und Spread-Syntax in JavaScript

Mit der Objekt-Destrukturierung können Sie neue Variablen mit einer Objekteigenschaft als Wert erstellen.

Betrachten Sie dieses Beispiel eines Objekts, das eine Notiz mit einer id, einem title und einem date darstellt:

const note = {
  id: 1,
  title: 'My first note',
  date: '01/01/1970',
}

Bisher mussten Sie zur Erstellung einer neuen Variable für jede Eigenschaft jede Variable mit einer Vielzahl von Wiederholungen einzeln zuweisen:

// Create variables from the Object properties
const id = note.id
const title = note.title
const date = note.date

Mit der Objekt-Destrukturierung kann das alles in einer Zeile erfolgen. Durch Umgeben der Variablen mit geschweiften Klammern {} erstellt JavaScript aus jeder Eigenschaft neue Variablen mit dem gleichen Namen:

// Destructure properties into variables
const { id, title, date } = note

Protokollieren Sie nun die neuen Variablen mit console.log():

console.log(id)
console.log(title)
console.log(date)

Sie erhalten die ursprünglichen Eigenschaftswerte als Ausgabe:

Output
1
My first note
01/01/1970

Die Standardzuweisung für die Objekt-Destrukturierung erstellt neue Variablen mit dem gleichen Namen wie die Objekteigenschaft. Wenn Sie nicht möchten, dass der Name der neuen Variable und der Eigenschaftsname gleich sind, können Sie die neue Variable auch umbenennen. Verwenden Sie dazu einen Doppelpunkt (:), um einen neuen Namen festzulegen, wie im Folgenden mit noteId zu sehen ist:

// Assign a custom name to a destructured value
const { id: noteId, title, date } = note

Protokollieren Sie die neue Variable noteId in der Konsole:

console.log(noteId)

Sie erhalten die folgende Ausgabe:

Output
1

Sie können auch geschachtelte Objektwerte destrukturieren. Aktualisieren Sie beispielsweise das note-Objekt, um ein geschachteltes author-Objekt zu erhalten:

const note = {
  id: 1,
  title: 'My first note',
  date: '01/01/1970',
  author: {
    firstName: 'Sherlock',
    lastName: 'Holmes',
  },
}

Sie können nun note destrukturieren und dann zur Erstellung von Variablen aus den author-Eigenschaften erneut destrukturieren:

// Destructure nested properties
const {
  id,
  title,
  date,
  author: { firstName, lastName },
} = note

Als Nächstes protokollieren Sie die neuen Variablen firstName und lastName unter Verwendung von Template-Buchstabensymbolen:

console.log(`${firstName} ${lastName}`)

Dadurch erhalten Sie folgenden Output:

Output
Sherlock Holmes

Beachten Sie, dass Sie in diesem Beispiel zwar Zugriff auf den Inhalt des author-Objekts haben, das author-Objekt selbst jedoch nicht zugänglich ist. Um auf ein Objekt und seine geschachtelten Werte zuzugreifen, müssten Sie sie getrennt deklarieren:

// Access object and nested values
const {
  author,
  author: { firstName, lastName },
} = note

console.log(author)

Dieser Code gibt das author-Objekt aus:

Output
{firstName: "Sherlock", lastName: "Holmes"}

Die Destrukturierung eines Objekts ist nicht nur nützlich, um die Menge des zu schreibenden Codes zu reduzieren, sondern ermöglicht es Ihnen auch, gezielt auf die Eigenschaften zuzugreifen, die Ihnen wichtig sind.

Zu guter Letzt kann Destrukturierung verwendet werden, um auf die Objekteigenschaften primitiver Werte zuzugreifen. Beispielsweise ist String ein globales Objekt für Zeichenfolgen und hat eine length-Eigenschaft:

const { length } = 'A string'

Dadurch wird die inhärente Längeneigenschaft einer Zeichenfolge gefunden und der length-Variablen gleichgesetzt. Protokollieren Sie length, um zu sehen, ob dies funktioniert:

console.log(length)

Sie erhalten folgende Ausgabe:

Output
8

Die Zeichenfolge A string wurde hier implizit in ein Objekt konvertiert, um die length-Eigenschaft abzurufen.

Mit der Array-Destrukturierung können Sie neue Variablen mit einem Array-Element als Wert erstellen. Betrachten Sie dieses Beispiel eines Arrays mit den verschiedenen Teilen eines Datums:

const date = ['1970', '12', '01']

Arrays in JavaScript behalten garantiert ihre Reihenfolge bei, sodass in diesem Fall der erste Index immer ein Jahr ist, der zweite ein Monat, und so weiter. Mit diesem Wissen können Sie Variablen aus den Elementen im Array erstellen:

// Create variables from the Array items
const year = date[0]
const month = date[1]
const day = date[2]

Doch dies manuell auszuführen kann viel Platz in Ihrem Code beanspruchen. Mit der Array-Destrukturierung können Sie die Werte aus dem Array der Reihe nach entpacken und sie so ihren eigenen Variablen zuweisen:

// Destructure Array values into variables
const [year, month, day] = date

Protokollieren Sie nun die neuen Variablen:

console.log(year)
console.log(month)
console.log(day)

Sie erhalten folgende Ausgabe:

Output
1970
12
01

Werte können übersprungen werden, indem die Destrukturierungssyntax zwischen Kommas leer gelassen wird:

// Skip the second item in the array
const [year, , day] = date

console.log(year)
console.log(day)

Das Ausführen ergibt den Wert von year und day:

Output
1970
01

Auch geschachtelte Arrays können destrukturiert werden. Erstellen Sie zuerst ein geschachteltes Array:

// Create a nested array
const nestedArray = [1, 2, [3, 4], 5]

Destrukturieren Sie dann dieses Array und protokollieren Sie die neuen Variablen:

// Destructure nested items
const [one, two, [three, four], five] = nestedArray

console.log(one, two, three, four, five)

Sie erhalten die folgende Ausgabe:

Output
1 2 3 4 5

Die Destrukturierungssyntax kann zur Destrukturierung der Parameter in einer Funktion angewendet werden. Um das zu testen, destrukturieren Sie die keys und values aus Object.entries().

Zuerst deklarieren Sie das note-Objekt:

const note = {
  id: 1,
  title: 'My first note',
  date: '01/01/1970',
}

Bei diesem Objekt könnten Sie die Schlüssel-Wert-Paare auflisten, indem Sie Argumente bei der Übergabe an die forEach()-Methode destrukturieren:

// Using forEach
Object.entries(note).forEach(([key, value]) => {
  console.log(`${key}: ${value}`)
})

Sie können dasselbe mit einer for-Schleife erreichen:

// Using a for loop
for (let [key, value] of Object.entries(note)) {
  console.log(`${key}: ${value}`)
}

In beiden Fällen erhalten Sie Folgendes:

Output
id: 1
title: My first note
date: 01/01/1970

Objekt-Destrukturierung und Array-Destrukturierung können in einer einzigen Destrukturierungszuweisung kombiniert werden. Auch Standardparameter können mit Destrukturierung verwendet werden, wie in diesem Beispiel, das das Standarddatum auf new Date () festlegt.

Zuerst deklarieren Sie das note-Objekt:

const note = {
  title: 'My first note',
  author: {
    firstName: 'Sherlock',
    lastName: 'Holmes',
  },
  tags: ['personal', 'writing', 'investigations'],
}

Destrukturieren Sie dann das Objekt, wobei Sie auch eine neue date-Variable mit der Standardeinstellung von new Date() festlegen:

const {
  title,
  date = new Date(),
  author: { firstName },
  tags: [personalTag, writingTag],
} = note

console.log(date)

console.log(date) gibt dann eine ähnliche Ausgabe wie die folgende aus:

Output
Fri May 08 2020 23:53:49 GMT-0500 (Central Daylight Time)

Wie in diesem Abschnitt gezeigt wird, verleiht die Syntax der Destrukturierungszuweisung JavaScript eine große Flexibilität und ermöglicht Ihnen, prägnanteren Code zu schreiben. Im nächsten Abschnitt sehen Sie, wie die Spread-Syntax zur Erweiterung von Datenstrukturen in ihren einzelnen Dateneinträgen genutzt werden kann.

Spread kann allgemeine Aufgaben mit Arrays vereinfachen. Nehmen wir zum Beispiel an, Sie haben zwei Arrays und möchten diese kombinieren:

// Create an Array
const tools = ['hammer', 'screwdriver']
const otherTools = ['wrench', 'saw']

Ursprünglich würden Sie concat() verwenden, um die beiden Arrays zu verketten:

// Concatenate tools and otherTools together
const allTools = tools.concat(otherTools)

Sie können nun auch Spread verwenden, um die Arrays in ein neues Array zu entpacken:

// Unpack the tools Array into the allTools Array
const allTools = [...tools, ...otherTools]

console.log(allTools)

Diese Ausführung würde Folgendes ergeben:

Output
["hammer", "screwdriver", "wrench", "saw"]

Das kann bei Unveränderlichkeit besonders hilfreich sein. Sie könnten beispielsweise mit einer App arbeiten, die users in einem Array von Objekten gespeichert hat:

// Array of users
const users = [
  { id: 1, name: 'Ben' },
  { id: 2, name: 'Leslie' },
]

Sie könnten push verwenden, um das bestehende Array zu ändern und einen neuen Benutzer hinzuzufügen, was die veränderbare Option wäre:

// A new user to be added
const newUser = { id: 3, name: 'Ron' }

users.push(newUser)

Das ändert jedoch das user-Array, das wir möglicherweise erhalten möchten.

Mit Spread können Sie ein neues Array aus dem bestehenden erstellen und am Ende ein neues Element hinzufügen:

const updatedUsers = [...users, newUser]

console.log(users)
console.log(updatedUsers)

Das neue Array, updatedUsers, hat den neuen Benutzer, aber das ursprüngliche users-Array bleibt unverändert:

Output
[{id: 1, name: "Ben"}
 {id: 2, name: "Leslie"}]

[{id: 1, name: "Ben"}
 {id: 2, name: "Leslie"}
 {id: 3, name: "Ron"}]

Das Erstellen von Datenkopien anstelle der Änderung vorhandener Daten kann helfen, unerwartete Änderungen zu verhindern. Wenn Sie in JavaScript ein Objekt oder Array erstellen und einer anderen Variable zuweisen, erstellen Sie nicht tatsächlich ein neues Objekt – Sie übergeben eine Referenz.

Nehmen Sie dieses Beispiel, in dem ein Array erstellt und einer anderen Variable zugewiesen wird:

// Create an Array
const originalArray = ['one', 'two', 'three']

// Assign Array to another variable
const secondArray = originalArray

Das Entfernen des letzten Elements des zweiten Arrays ändert das erste:

// Remove the last item of the second Array
secondArray.pop()

console.log(originalArray)

Dadurch erhalten Sie folgende Ausgabe:

Output
["one", "two"]

Mit Spread können Sie eine flache Kopie eines Arrays oder Objekts erstellen. Das bedeutet, dass alle Eigenschaften der oberen Ebene geklont, geschachtelte Objekte jedoch weiterhin per Referenz übergeben werden. Bei einfachen Arrays oder Objekten kann eine flache Kopie völlig ausreichen.

Wenn Sie den gleichen Beispielcode schreiben, aber das Array mit Spread kopieren, wird das originale Array nicht mehr geändert:

// Create an Array
const originalArray = ['one', 'two', 'three']

// Use spread to make a shallow copy
const secondArray = [...originalArray]

// Remove the last item of the second Array
secondArray.pop()

console.log(originalArray)

Das Folgende wird in der Konsole protokolliert:

Output
["one", "two", "three"]

Spread kann auch zur Konvertierung eines set oder jeder anderen iterable in ein Array verwendet werden.

Erstellen Sie ein neues Set und fügen Sie diesem einige Einträge hinzu:

// Create a set
const set = new Set()

set.add('octopus')
set.add('starfish')
set.add('whale')

Verwenden Sie als Nächstes den Spread-Operator mit set und protokollieren Sie die Ergebnisse:

// Convert Set to Array
const seaCreatures = [...set]

console.log(seaCreatures)

Dadurch ergibt sich Folgendes:

Output
["octopus", "starfish", "whale"]

Das kann auch nützlich sein, um ein Array aus einer Zeichenfolge zu erstellen:

const string = 'hello'

const stringArray = [...string]

console.log(stringArray)

Dadurch wird ein Array mit jedem Zeichen als Element in dem Array ausgegeben:

Output
["h", "e", "l", "l", "o"]

Beim Arbeiten mit Objekten kann Spread zum Kopieren und Aktualisieren von Objekten genutzt werden.

Ursprünglich wurde Object.assign() zum Kopieren eines Objekts genutzt:

// Create an Object and a copied Object with Object.assign()
const originalObject = { enabled: true, darkMode: false }
const secondObject = Object.assign({}, originalObject)

Das secondObject ist nun ein Klon des originalObject.

Dies wird mit der Spread-Syntax vereinfacht – Sie können ein Objekt flach kopieren, indem Sie es in ein neues verteilen:

// Create an object and a copied object with spread
const originalObject = { enabled: true, darkMode: false }
const secondObject = { ...originalObject }

console.log(secondObject)

Dadurch ergibt sich Folgendes:

Output
{enabled: true, darkMode: false}

Genau wie bei Arrays wird auch hier nur eine flache Kopie erstellt, und verschachtelte Objekte werden weiterhin per Referenz übergeben.

Das Hinzufügen oder Ändern von Eigenschaften an einem bestehenden Objekt auf unveränderliche Weise wird mit Spread vereinfacht. In diesem Beispiel wird die Eigenschaft isLoggedIn dem user-Objekt hinzugefügt:

const user = {
  id: 3,
  name: 'Ron',
}

const updatedUser = { ...user, isLoggedIn: true }

console.log(updatedUser)

Dadurch wird Folgendes ausgegeben:

Output
{id: 3, name: "Ron", isLoggedIn: true}

Beim Aktualisieren von Objekten über Spread ist es wichtig, zu beachten, dass auch jedes geschachtelte Objekt verteilt werden muss. Nehmen wir zum Beispiel an, dass sich im user-Objekt ein geschachteltes organization-Objekt befindet:

const user = {
  id: 3,
  name: 'Ron',
  organization: {
    name: 'Parks & Recreation',
    city: 'Pawnee',
  },
}

Wenn Sie versuchen würden , ein neues Element zu organization hinzuzufügen, würde das die bestehenden Felder überschreiben:

const updatedUser = { ...user, organization: { position: 'Director' } }

console.log(updatedUser)

Dadurch würde sich Folgendes ergeben:

Output
id: 3
name: "Ron"
organization: {position: "Director"}

Wenn Veränderlichkeit kein Problem ist, könnte das Feld direkt aktualisiert werden:

user.organization.position = 'Director'

Da wir aber eine unveränderliche Lösung suchen, können wir das innere Objekt verteilen, um die bestehenden Eigenschaften zu erhalten:

const updatedUser = {
  ...user,
  organization: {
    ...user.organization,
    position: 'Director',
  },
}

console.log(updatedUser)

Dadurch ergibt sich Folgendes:

Output
id: 3
name: "Ron"
organization: {name: "Parks & Recreation", city: "Pawnee", position: "Director"}

Spread kann auch mit Argumenten in Funktionsaufrufen genutzt werden.

Als Beispiel sehen Sie hier eine multiply-Funktion, die drei Parameter nimmt und sie multipliziert:

// Create a function to multiply three items
function multiply(a, b, c) {
  return a * b * c
}

Normalerweise würden sie drei Werte individuell als Argumente an den Funktionsaufruf wie folgt übergeben:

multiply(1, 2, 3)

Dies würde Folgendes ergeben:

Output
6

Wenn jedoch alle Werte, die Sie an die Funktion übergeben möchten, bereits in einem Array vorhanden sind, können Sie mit der Spread-Syntax jedes Element in einem Array als Argument verwenden:

const numbers = [1, 2, 3]

multiply(...numbers)

Dies führt zum gleichen Ergebnis:

Output
6

multiply.apply(null, [1, 2, 3])

Output
6

Nachdem Sie nun gesehen haben, wie Spread Ihren Code verkürzen kann, können Sie sich eine andere Verwendung der Syntax ... anstehen: Rest-Parameter.