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

Der Autor hat den COVID-19 Relief Fund dazu ausgewählt, eine Spende im Rahmen des Programms Write for DOnations zu erhalten.

Einführung

Seit der Ausgabe 2015 der ECMAScript-Spezifikation wurden der JavaScript-Sprache viele neue Funktionalitäten für die Arbeit mit Arrays und Objekten zur Verfügung gestellt. Einige der bemerkenswerten, die Sie in diesem Artikel kennenlernen, sind Destrukturierung, Rest-Parameter und Spread-Syntax. Diese Funktionalitäten bieten direkte Zugriffsmöglichkeiten auf die Elemente eines Arrays oder Objekts und können das Arbeiten mit diesen Datenstrukturen schneller und prägnanter machen.

Viele andere Sprachen verfügen nicht über die entsprechende Syntax für Destrukturierung, Rest-Parameter und Spread. Daher können diese Funktionalitäten sowohl für neue JavaScript-Entwickler als auch für Entwickler aus einer anderen Sprache eine Lernkurve aufweisen. In diesem Artikel erfahren Sie, wie Sie Objekte und Arrays destrukturieren, wie Sie den Spread-Operator zum Auspacken von Objekten und Arrays verwenden und wie Sie Rest-Parameter in Funktionsaufrufen nutzen.

Destrukturierung

Die Destrukturierungszuweisung ist eine Syntax, mit der Sie Objekteigenschaften oder Array-Elemente als Variablen zuweisen können. Dadurch können die zur Manipulation von Daten in diesen Strukturen erforderlichen Codezeilen erheblich reduziert werden. Es gibt zwei Arten von Destrukturierung: Objekt-Destrukturierung und Array-Destrukturierung.

Objekt-Destrukturierung

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.

Array-Destrukturierung

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

Die Spread-Syntax (...) ist eine weitere hilfreiche Ergänzung zu JavaScript zum Arbeiten mit Arrays, Objekten und Funktionsaufrufen. Spread ermöglicht das Entpacken oder Erweitern von Objekten und Iterablen (wie beispielsweise Arrays), wodurch flache Kopien von Datenstrukturen erstellt werden können, um die Datenmanipulation zu vereinfachen.

Spread mit Arrays

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"]

Spread mit Objekten

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 mit Funktionsaufrufen

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.

Rest-Parameter

Die letzte Funktionalität, die Sie in diesem Artikel kennenlernen, ist die Rest-Parameter-Syntax. Die Syntax entspricht der von Spread (...), hat aber den gegenteiligen Effekt. Statt ein Array oder Objekt in einzelne Werte zu entpacken, erstellt die Rest-Syntax ein Array mit einer indefiniten Anzahl von Argumenten.

Wenn wir beispielsweise in der Funktion restTest wollten, dass args ein Array aus einer indefiniten Anzahl von Argumenten ist, könnten wir Folgendes haben:

function restTest(...args) {
  console.log(args)
}

restTest(1, 2, 3, 4, 5, 6)

Alle Argumente, die an die Funktion restTest übergeben werden, sind nun im args-Array verfügbar:

Output
[1, 2, 3, 4, 5, 6]

Die Rest-Syntax kann als einziger Parameter oder als letzter Parameter in der Liste genutzt werden. Wenn sie als einziger Parameter genutzt wird, wird sie alle Argumente sammeln. Wenn sie am Ende einer Liste steht, wird sie jedes verbleibende Argument so wie in diesem Beispiel sammeln:

function restTest(one, two, ...args) {
  console.log(one)
  console.log(two)
  console.log(args)
}

restTest(1, 2, 3, 4, 5, 6)

Dadurch werden die ersten beiden Argumente einzeln aufgeführt und dann die restlichen in ein Array gruppiert:

Output
1
2
[3, 4, 5, 6]

In älterem Code könnte die Variable arguments genutzt werden, um alle Argumente zu sammeln, die durch eine Funktion übergeben werden:

function testArguments() {
  console.log(arguments)
}

testArguments('how', 'many', 'arguments')

Dadurch ergäbe sich folgende Ausgabe:

[secondary_label Output]1
Arguments(3) ["how", "many", "arguments"]

Das hat jedoch einige Nachteile. Erstens kann die Variable arguments nicht mit Pfeilfunktionen verwendet werden.

const testArguments = () => {
  console.log(arguments)
}

testArguments('how', 'many', 'arguments')

Das würde einen Fehler ergeben:

Output
Uncaught ReferenceError: arguments is not defined

Außerdem ist arguments kein echtes Array und kann Methoden wie map und filter nicht verwenden, ohne zuerst in ein Array konvertiert zu werden. Es sammelt außerdem alle übergebenen Argumente statt nur die verbleibenden Argumente, wie sie im Beispiel restTest(one, two, ...args)​​ zu sehen sind.

Rest kann auch bei der Destrukturierung von Arrays verwendet werden:

const [firstTool, ...rest] = ['hammer', 'screwdriver', 'wrench']

console.log(firstTool)
console.log(rest)

Dies ergibt:

Output
hammer
["screwdriver", "wrench"]

Rest kann auch bei der Destrukturierung von Objekten genutzt werden:

const { isLoggedIn, ...rest } = { id: 1, name: 'Ben', isLoggedIn: true }

console.log(isLoggedIn)
console.log(rest)

Mit der folgenden Ausgabe:

Output
true
{id: 1, name: "Ben"}

Auf diese Weise bietet die Rest-Syntax effiziente Methoden zur Erfassung einer unbestimmten Anzahl von Elementen.

Zusammenfassung

In diesem Artikel haben Sie Destrukturierung, Spread-Syntax und Rest-Parameter kennengelernt. Kurz gefasst:

• Destrukturierung wird genutzt, um Variablen aus Array-Elementen oder Objekt-Eigenschaften zu erstellen.
• Spread-Syntax wird genutzt, um Iterable wie Arrays, Objekte und Funktionsaufrufe zu entpacken.
• Rest-Parameter-Syntax erstellt ein Array aus einer indefiniten Anzahl von Werten.

Destrukturierung, Rest-Parameter und Spread-Syntax sind nützliche Funktionalitäten in JavaScript, die dazu beitragen, Ihren Code prägnant und sauber zu halten.

Wenn Sie die Destrukturierung in Aktion sehen möchten, werfen Sie einen Blick auf Anpassen von React-Komponenten mit Props, das diese Syntax verwendet, um Daten zu destrukturieren und sie an benutzerdefinierte Frontend-Komponenten zu übergeben. Wenn Sie mehr über JavaScript erfahren möchten, kehren Sie zu unserer Seite mit der Serie Codieren in JavaScript zurück.