One place for hosting & domains

      Verstehen

      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

      Anmerkung: Das Destrukturieren eines Objekts ändert das ursprüngliche Objekt nicht. Sie könnten immer noch die ursprüngliche note mit all ihren Einträgen aufrufen.

      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

      Anmerkung: Ohne Spread kann dies durch Verwendung von apply() erreicht werden:

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

      Dies ergibt:

      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:

      Output

      1Arguments(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.



      Source link

      Verstehen der Standardparameter 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

      In ECMAScript 2015 wurden Standardfunktionsparameter in die JavaScript-Sprache eingeführt. Diese ermöglichen Entwicklern, eine Funktion mit Standardwerten zu initialisieren, wenn dem Funktionsaufruf die Argumente nicht geliefert werden. Wenn Sie Funktionsparameter auf diese Weise initialisieren, werden Ihre Funktionen leichter lesbar und weniger fehleranfällig, und Sie erhalten ein Standardverhalten für Ihre Funktionen. Dies hilft Ihnen, Fehler zu vermeiden, die aus der Übergabe von undefined Argumenten und der Destrukturierung nicht vorhandener Objekte resultieren.

      In diesem Artikel werden Sie den Unterschied zwischen Parametern und Argumenten überprüfen, lernen, wie man Standardparameter in Funktionen verwendet, alternative Möglichkeiten zur Unterstützung von Standardparametern sehen und erfahren, welche Arten von Werten und Ausdrücken als Standardparameter verwendet werden können. Sie werden auch Beispiele durcharbeiten, die zeigen, wie Standardparameter in JavaScript funktionieren.

      Argumente und Parameter

      Bevor die Standardfunktionsparameter erklärt werden, ist es wichtig zu wissen, worauf Parameter standardmäßig eingestellt werden können. Aus diesem Grund werden wir zunächst den Unterschied zwischen Argumenten und Parametern in einer Funktion untersuchen. Wenn Sie mehr über diese Unterscheidung erfahren möchten, lesen Sie unseren früheren Artikel in der JavaScript-Reihe, Definieren von Funktionen in JavaScript.

      Im folgenden Codeblock erstellen Sie eine Funktion, die die Kubikzahl einer gegebenen Zahl, definiert als x, zurückgibt:

      // Define a function to cube a number
      function cube(x) {
        return x * x * x
      }
      

      Die Variable x in diesem Beispiel ist ein Parameter – eine benannte Variable, die an eine Funktion übergeben wird. Ein Parameter muss immer in einer Variable enthalten sein und darf niemals einen direkten Wert haben.

      Werfen Sie nun einen Blick auf diesen nächsten Codeblock, der die soeben erstellte Funktion cube anruft:

      // Invoke cube function
      cube(10)
      

      Dadurch erhalten Sie folgenden Output:

      Output

      1000

      In diesem Fall ist 10 ein Argument – ein Wert, der einer Funktion beim Aufrufen übergeben wird. Häufig wird der Wert auch in einer Variable enthalten sein, wie in diesem nächsten Beispiel:

      // Assign a number to a variable
      const number = 10
      
      // Invoke cube function
      cube(number)
      

      Dies führt zum gleichen Ergebnis:

      Output

      1000

      Wenn Sie ein Argument nicht an eine Funktion übergeben, die ein solches erwartet, wird die Funktion implizit als Wert undefined verwendet:

      // Invoke the cube function without passing an argument
      cube()
      

      Dies gibt zurück:

      Output

      NaN

      In diesem Fall versucht cube() den Wert von undefined * undefined * undefined zu berechnen, was zu NaN oder „Not a Number“, also „Keine Zahl“, führt. Weitere Informationen hierzu finden Sie in dem Abschnitt Verstehen von Datenarten in JavaScript.

      Dieses automatische Verhalten kann manchmal ein Problem darstellen. In einigen Fällen möchten Sie vielleicht, dass der Parameter einen Wert hat, auch wenn kein Argument an die Funktion übergeben wurde. Hier kommt die Standardparameter-Funktion ins Spiel, ein Thema, das Sie im nächsten Abschnitt behandeln werden.

      Syntax der Standardparameter

      Durch die Hinzufügung von Standardparametern in ES2015 können Sie nun jedem Parameter einen Standardwert zuweisen, den die Funktion beim Aufruf ohne Argument anstelle von undefined verwendet. Dieser Abschnitt zeigt Ihnen zunächst, wie Sie dies manuell tun, und führt Sie dann durch die Einstellung von Standardparametern.

      Ohne Standardparameter müssten Sie explizit auf undefined Werte prüfen, um Standardwerte zu setzen, wie in diesem Beispiel gezeigt:

      // Check for undefined manually
      function cube(x) {
        if (typeof x === 'undefined') {
          x = 5
        }
      
        return x * x * x
      }
      
      cube()
      

      Dabei wird mit Hilfe einer bedingten Anweisung geprüft, ob der Wert automatisch als undefined bereitgestellt wurde; dann wird der Wert von x auf 5 gesetzt. Dies führt zu der folgenden Ausgabe:

      Output

      125

      Im Gegensatz dazu wird durch die Verwendung von Standardparametern dasselbe Ziel mit wesentlich weniger Code erreicht. Sie können dem Parameter in cube einen Standardwert zuweisen, indem Sie ihm den Gleichheitszuweisungsoperator (=), wie hier hervorgehoben, zuweisen:

      // Define a cube function with a default value
      function cube(x = 5) {
        return x * x * x
      }
      

      Wenn die Funktion cube nun ohne Argument aufgerufen wird, weist sie 5 zu x zu und gibt anstelle von NaN die Berechnung zurück:

      // Invoke cube function without an argument
      cube()
      

      Output

      125

      Bei der Übergabe eines Arguments funktioniert sie weiterhin wie beabsichtigt, indem sie den Standardwert ignoriert:

      // Invoke cube function with an argument
      cube(2)
      

      Output

      8

      Ein wichtiger zu beachtender Vorbehalt ist jedoch, dass der Standardparameterwert auch eine explizite undefined Übergabe als Argument an eine Funktion überschreibt, wie hier gezeigt:

      // Invoke cube function with undefined
      cube(undefined)
      

      Dies ergibt die Berechnung mit x gleich 5:

      Output

      125

      In diesem Fall wurden die Standardparameterwerte berechnet und ein expliziter Wert undefined hat sie nicht überschrieben.

      Nachdem Sie nun eine Vorstellung von der grundlegenden Syntax von Standardparametern haben, zeigt der nächste Abschnitt, wie Standardparameter mit verschiedenen Datentypen funktionieren.

      Datentypen für Standardparameter

      Jeder primitive Wert oder jedes Objekt kann als Standardparameterwert verwendet werden. In diesem Abschnitt sehen Sie, wie diese Flexibilität die Möglichkeiten zur Verwendung von Standardparametern erhöht.

      Zuerst setzen Sie Parameter, indem Sie eine Zahl, Zeichenfolge, booleschen Wert, ein Objekt, ein Array und einen Nullwert als Standardwert verwenden. In diesem Beispiel wird die Syntax der Pfeilfunktion verwendet:

      // Create functions with a default value for each data type
      const defaultNumber = (number = 42) => console.log(number)
      const defaultString = (string = 'Shark') => console.log(string)
      const defaultBoolean = (boolean = true) => console.log(boolean)
      const defaultObject = (object = { id: 7 }) => console.log(object)
      const defaultArray = (array = [1, 2, 3]) => console.log(array)
      const defaultNull = (nullValue = null) => console.log(nullValue)
      

      Wenn diese Funktionen ohne Parameter aufgerufen werden, verwenden sie alle die Standardwerte:

      // Invoke each function
      defaultNumber()
      defaultString()
      defaultBoolean()
      defaultObject()
      defaultArray()
      defaultNull()
      

      Output

      42 "Shark" true {id: 7} (3) [1, 2, 3] null

      Beachten Sie, dass jedes in einem Standardparameter erzeugte Objekt bei jedem Aufruf der Funktion erzeugt wird. Einer der häufigsten Anwendungsfälle für Standardparameter ist die Verwendung dieses Verhaltens, um Werte aus einem Objekt zu erhalten. Wenn Sie versuchen, einen Wert aus einem nicht existierenden Objekt zu destrukturieren oder auf einen Wert zuzugreifen, wird ein Fehler ausgelöst. Wenn der Standardparameter jedoch ein leeres Objekt ist, gibt er Ihnen einfach undefined Werte aus, anstatt einen Fehler zu verursachen:

      // Define a settings function with a default object
      function settings(options = {}) {
        const { theme, debug } = options
      
        // Do something with settings
      }
      

      Dadurch wird der Fehler vermieden, der durch die Destrukturierung nicht existierender Objekte verursacht wird.

      Nachdem Sie nun gesehen haben, wie Standardparameter mit verschiedenen Datentypen arbeiten, erklärt der nächste Abschnitt, wie mehrere Standardparameter zusammenarbeiten können.

      Verwenden mehrerer Standardparameter

      Sie können in einer Funktion beliebig viele Standardparameter verwenden.  In diesem Abschnitt erfahren Sie, wie Sie dies tun und wie Sie damit das DOM in einem realen Beispiel manipulieren können.

      Zuerst deklarieren Sie eine Funktion sum() mit mehreren Standardparametern:

      // Define a function to add two values
      function sum(a = 1, b = 2) {
        return a + b
      }
      
      sum()
      

      Dies führt zu der folgenden Standardberechnung:

      Output

      3

      Zusätzlich kann der in einem Parameter verwendete Wert in jedem nachfolgenden Standardparameter von links nach rechts verwendet werden. Beispielsweise erstellt diese Funktion createUser ein Benutzerobjekt userObj als dritten Parameter, und die Funktion selbst gibt nur userObj mit den ersten beiden Parametern zurück:

      // Define a function to create a user object using parameters
      function createUser(name, rank, userObj = { name, rank }) {
        return userObj
      }
      
      // Create user
      const user = createUser('Jean-Luc Picard', 'Captain')
      

      Wenn Sie user hier aufrufen, erhalten Sie Folgendes:

      Output

      {name: "Jean-Luc Picard", rank: "Captain"}

      Es wird normalerweise empfohlen, alle Standardparameter an das Ende einer Parameterliste zu setzen, sodass Sie optionale Werte einfach weglassen können. Wenn Sie einen Standardparameter zuerst verwenden, müssen Sie undefined explizit übergeben, um den Standardwert zu verwenden.

      Hier ist ein Beispiel mit dem Standardparameter am Anfang der Liste:

      // Define a function with a default parameter at the start of the list
      function defaultFirst(a = 1, b) {
        return a + b
      }
      

      Wenn Sie diese Funktion aufrufen, müssten Sie defaultFirst() mit zwei Argumenten aufrufen:

      defaultFirst(undefined, 2)
      

      Dies würde Folgendes ergeben:

      Output

      3

      Hier ist ein Beispiel mit dem Standardparameter am Ende der Liste:

      // Define a function with a default parameter at the end of the list
      function defaultLast(a, b = 1) {
        return a + b
      }
      
      defaultLast(2)
      

      Dies würde den gleichen Wert ergeben:

      Output

      3

      Beide Funktionen haben das gleiche Ergebnis, aber diejenige mit dem Standardwert am Ende ermöglicht einen wesentlich saubereren Funktionsaufruf.

      Für ein Beispiel aus der realen Welt ist hier eine Funktion, die ein DOM-Element erstellt und ein Text-Label und Klassen, falls vorhanden, hinzufügt.

      // Define function to create an element
      function createNewElement(tag, text, classNames = []) {
        const el = document.createElement(tag)
        el.textContent = text
      
        classNames.forEach(className => {
          el.classList.add(className)
        })
      
        return el
      }
      

      Sie können die Funktion mit einigen Klassen in einem Array aufrufen:

      const greeting = createNewElement('p', 'Hello!', ['greeting', 'active'])
      

      Der Aufruf von greeting ergibt den folgenden Wert:

      Output

      <p class="greeting active">Hello!</p>

      Wenn Sie jedoch das Array classNames aus dem Funktionsaufruf herauslassen, funktioniert die Funktion immer noch.

      const greeting2 = createNewElement('p', 'Hello!')
      

      greeting2 hat nun den folgenden Wert:

      Output

      <p>Hello!</p>

      In diesem Beispiel kann forEach() auf ein leeres Array ohne Ausgabe angewendet werden. Wenn dieses leere Array nicht im Standardparameter festgelegt wäre, würden Sie den folgenden Fehler erhalten:

      Output

      VM2673:5 Uncaught TypeError: Cannot read property 'forEach' of undefined at createNewElement (<anonymous>:5:14) at <anonymous>:12:18

      Nachdem Sie nun gesehen haben, wie mehrere Standardparameter zusammenwirken können, können Sie mit dem nächsten Abschnitt fortfahren, um zu sehen, wie Funktionsaufrufe als Standardparameter funktionieren.

      Funktionsaufrufe als Standardparameter

      Zusätzlich zu den Primitiven und Objekten kann das Ergebnis des Aufrufs einer Funktion als Standardparameter verwendet werden.

      In diesem Codeblock erstellen Sie eine Funktion, die eine Zufallszahl zurückgibt und verwenden dann das Ergebnis als Standardparameterwert in einer Funktion cube:

      // Define a function to return a random number from 1 to 10
      function getRandomNumber() {
        return Math.floor(Math.random() * 10)
      }
      
      // Use the random number function as a default parameter for the cube function
      function cube(x = getRandomNumber()) {
        return x * x * x
      }
      

      Wenn Sie nun die Funktion cube ohne Parameter aufrufen, hat jeder Aufruf der Funktion potenziell unterschiedliche Ergebnisse:

      // Invoke cube function twice for two potentially different results
      cube()
      cube()
      

      Die Ausgabe dieser Funktionsaufrufe wird variieren:

      Output

      512 64

      Sie können sogar integrierte Methoden verwenden, wie beispielsweise die des Objekts Math, und den in einem Funktionsaufruf zurückgegebenen Wert als Parameter in einer anderen Funktion verwenden.

      Im folgenden Beispiel wird x eine Zufallszahl zugewiesen, die als Parameter in der von Ihnen erstellten Funktion cube verwendet wird. Der Parameter y berechnet dann die Würfelwurzel der Zahl und überprüft, ob x und y gleich sind:

      // Assign a random number to x
      // Assign the cube root of the result of the cube function and x to y
      function doesXEqualY(x = getRandomNumber(), y = Math.cbrt(cube(x))) {
        return x === y
      }
      
      doesXEqualY()
      

      Dadurch ergibt sich Folgendes:

      Output

      true

      Ein Standardparameter kann sogar, wie in diesem Beispiel, eine Funktionsdefinition sein, die einen Parameter als innere Funktion definiert und den Funktionsaufruf von parameter zurückgibt:

      // Define a function with a default parameter that is an anonymous function
      function outer(
        parameter = function inner() {
          return 100
        }
      ) {
        return parameter()
      }
      
      // Invoke outer function
      outer()
      

      Output

      100

      Die Funktion inner wird bei jedem Aufruf der Funktion outer von Grund auf neu erzeugt.

      Zusammenfassung

      In diesem Artikel haben Sie gelernt, was Standardfunktionsparameter sind und wie sie verwendet werden.  Jetzt können Sie Standardparameter verwenden, um Ihre Funktionen sauber und leicht lesbar zu halten. Sie können Parametern auch im Voraus leere Objekte und Arrays zuweisen, um sowohl die Komplexität als auch die Codezeilen zu reduzieren, wenn es um Situationen wie das Abrufen von Werten aus einem Objekt oder das Durchschleifen eines Arrays geht.

      Wenn Sie mehr über JavaScript erfahren möchten, besuchen Sie die Homepage für unsere Reihe Codieren in JavaScript oder durchsuchen Sie unsere Reihe Codieren in Node.js für Artikel über Back-End-Entwicklung.



      Source link