One place for hosting & domains

      Verstehen

      Verstehen relationaler Datenbanken


      Einführung

      Datenbankmanagementsysteme (DBMS) sind Computerprogramme, mit denen Benutzer mit einer Datenbank interagieren können. Ein DBMS ermöglicht es Benutzern, den Zugriff auf eine Datenbank zu steuern, Daten zu schreiben, Abfragen auszuführen und andere Aufgaben im Zusammenhang mit der Datenbankverwaltung durchzuführen.

      Um eine dieser Aufgaben auszuführen, muss das DBMS jedoch eine Art zugrunde liegendes Modell haben, das definiert, wie die Daten organisiert sind. Das relationale Modell ist ein Ansatz zur Organisation von Daten, der in der Datenbanksoftware seit seiner Entwicklung in den späten 60er Jahren breite Verwendung gefunden hat, sodass zum Zeitpunkt der Erstellung dieses Artikels vier der fünf beliebtesten DBMS relational sind.

      Dieser konzeptionelle Artikel skiziert die Geschichte des relationalen Modells, wie relationale Datenbanken Daten organisieren und wie sie heute verwendet werden.

      Geschichte des relationalen Modells

      Datenbanken sind logisch modellierte Cluster von Informationen oder Daten. Jede Sammlung von Daten ist eine Datenbank, unabhängig davon, wie oder wo sie gespeichert ist. Sogar ein Aktenschrank mit Lohn- und Gehaltsabrechnungsinformationen ist eine Datenbank, ebenso wie ein Stapel von Krankenhauspatientenformularen oder die Sammlung von Kundeninformationen eines Unternehmens, die über mehrere Standorte verteilt sind. Bevor die Speicherung und Verwaltung von Daten mit Computern gängige Praxis war, waren physische Datenbanken wie diese die einzigen Datenbanken, die Behörden und Unternehmen zur Speicherung von Informationen zur Verfügung standen.

      Um die Mitte des 20. Jahrhunderts führten Entwicklungen in der Informatik zu Computern mit mehr Verarbeitungsleistung sowie größerer lokaler und externer Speicherkapazität. Diese Fortschritte führten dazu, dass Computerwissenschaftler begannen, das Potenzial für die Speicherung und Verwaltung immer größerer Datenmengen zu erkennen.

      Es gab jedoch keine Theorien darüber, wie Computer Daten auf sinnvolle, logische Weise organisieren können. Es ist eine Sache, unsortierte Daten auf einem Computer zu speichern, aber es ist viel komplizierter, Systeme zu entwerfen, die es erlauben, diese Daten auf konsistente, praktische Weise hinzuzufügen, abzurufen, zu sortieren und anderweitig zu verwalten. Der Bedarf an einem logischen Rahmen zur Speicherung und Organisation von Daten führte zu einer Reihe von Vorschlägen, wie Computer für die Datenverwaltung nutzbar gemacht werden können.

      Ein frühes Datenbankmodell war das hierarchische Modell, bei dem die Daten in einer baumartigen Struktur organisiert sind, ähnlich wie bei modernen Dateisystemen. Das folgende Beispiel zeigt, wie das Layout eines Teils einer hierarchischen Datenbank zur Kategorisierung von Tieren aussehen könnte:

      Beispiel einer hierarchischen Datenbank: Kategorisierung von Tieren

      Das hierarchische Modell wurde in den frühen Datenbankmanagementsystemen verbreitet eingesetzt, erwies sich aber auch als etwas unflexible. Obwohl in diesem Modell einzelne Datensätze mehrere „untergeordnete Datensätze“ haben können, kann jeder Datensatz nur einen „übergeordneten“ Datensatz in der Hierarchie haben. Aus diesem Grund waren diese früheren hierarchischen Datenbanken darauf beschränkt, nur „Eins-zu-Eins“ und „Eins-zu-Viele“-Beziehungen darzustellen. Dieser Mangel an „Viele-zu-Viele“-Beziehungen könnte zu Problemen führen, wenn Sie mit Datenpunkten arbeiten, die Sie mit mehr als einem übergeordneten Datensatz verknüpfen möchten.

      In den späten 1960er Jahren entwickelte Edgar F. Codd, ein Informatiker, der bei IBM arbeitete, das relationale Modell der Datenbankverwaltung. Das relationale Modell von Codd ermöglichte es, einzelne Datensätze mit mehr als einer Tabelle zu verknüpfen, wodurch zusätzlich zu den „Eins-zu-Viele“-Beziehungen auch „Viele-zu-Viele“-Beziehungen zwischen Datenpunkten möglich wurden. Dies bot mehr Flexibilität als andere existierende Modelle, wenn es um die Gestaltung von Datenbankstrukturen ging, und bedeutetet, dass relationale Datenbankmanagementsysteme (RDBMS) ein wesentlich breiteres Spektrum von Geschäftsanforderungen erfüllen können.

      Codd schlug eine Sprache zur Verwaltung relationaler Daten vor, bekannt als Alpha, die die Entwicklung späterer Datenbanksprachen beeinflusste. Zwei Kollegen von Codd bei IBM, Donald Chamberlin und Raymond Boyce, schufen eine solche Sprache, die von Alpha inspiriert ist. Sie nannten ihre Sprache SEQUEL, kurz für Structured English Query Language, aber aufgrund eines bestehenden Warenzeichens kürzten sie den Namen ihrer Sprache auf SQL (formal eher als Structured Query Language bezeichnet).

      Aufgrund von Hardware-Beschränkungen waren die frühen relationalen Datenbanken noch ungemein langsam, und es dauerte einige Zeit, bis die Technologie weit verbreitet war. Aber Mitte der 1980er Jahre war das relationale Modell von Codd bereits in einer Reihe kommerzieller Datenbankmanagementprodukte sowohl von IBM als auch seinen Konkurrenten implementiert worden. Diese Anbieter folgten ebenfalls dem IBM-Vorbild, indem sie ihre eigenen Dialekte von SQL entwickelten und implementierten. Bis 1987 hatten sowohl das American Standards Institute als auch die International Organization for Standardization Standards für SQL ratifiziert und veröffentlicht und damit den Status von SQL als akzeptierte Sprache für die Verwaltung von RDBMS gefestigt.

      Die weite Verwendung des relationalen Modells in mehreren Branchen führte dazu, dass es als Standardmodell für das Datenmanagement anerkannt wurde. Selbst mit dem Aufkommen verschiedener NoSQL-Datenbanken in den letzten Jahren bleiben relationale Datenbanken die dominierenden Werkzeuge zur Speicherung und Organisation von Daten.

      Wie relationale Datenbanken Daten organisieren

      Nachdem Sie nun ein allgemeines Verständnis für die Geschichte des relationalen Modells haben, lassen Sie uns einen genaueren Blick darauf werfen, wie das Modell Daten organisiert.

      Die grundlegendsten Elemente des relationalen Modells sind Beziehungen, die von Benutzern und modernen RDBMS als Tabellen erkannt werden. Eine Beziehung ist ein Satz von Tupeln oder Zeilen in einer Tabelle, wobei jedes Tupel einen Satz von Attributen oder Spalten gemeinsam hat:

      Diagrammbeispiel, wie Beziehungen, Tupel und Attribute miteinander verknüpft sind

      Eine Spalte ist die kleinste Organisationsstruktur einer relationalen Datenbank und stellt die verschiedenen Facetten dar, die die Datensätze in der Tabelle definieren. Daher ihr formellerer Name, Attribute. Sie können sich jedes Tupel als eine einzigartige Instanz jeder Art von Personen, Objekten, Ereignissen oder Assoziationen vorstellen, die die Tabelle enthält. Diese Instanzen können z. B. Mitarbeiter eines Unternehmens, Verkäufe aus einem Online-Geschäft oder Labor-Testergebnisse sein. In einer Tabelle, die beispielsweise Mitarbeiterdaten von Lehrern an einer Schule enthält, können die Tupel Attribute wie name, subjects, start_date usw. haben.

      Bei der Erstellung von Spalten geben Sie einen Datentyp an, der festlegt, welche Art von Einträge in dieser Spalte zulässig sind. RDBMS implementieren oft ihre eigenen eindeutigen Datentypen, die möglicherweise nicht direkt mit ähnlichen Datentypen in anderen Systemen austauschbar sind. Einige gängige Datentypen umfassen Datumsangaben, Zeichenketten, Ganzzahlen und Boolesche.

      Im relationalen Modell enthält jede Tabelle mindestens eine Spalte, die zur eindeutigen Identifizierung jeder Zeile verwendet werden kann, was als Primärschlüssel bezeichnet wird. Dies ist wichtig, da es bedeutet, dass Benutzer nicht wissen müssen, wo ihre Daten physisch auf einem Computer gespeichert sind; stattdessen können ihre DBMS jeden Datensatz verfolgen und ad hoc zurückgeben. Dies wiederum bedeutet, dass die Datensätze keine definierte logische Reihenfolge haben und die Benutzer die Möglichkeit haben, ihre Daten in beliebiger Reihenfolge oder durch beliebige Filter zurückgeben.

      Wenn Sie zwei Tabellen haben, die Sie miteinander verknüpfen möchten, können Sie dies unter anderem mit einem Fremdschlüssel tun. Ein Fremdschlüssel ist im Wesentlichen eine Kopie des Primärschlüssels einer Tabelle (der „übergeordneten“ Tabelle), der in eine Spalte einer anderen Tabelle (der „untergeordneten“ Tabelle) eingefügt wird. Das folgende Beispiel verdeutlicht die Beziehung zwischen zwei Tabellen, von denen die eine zur Aufzeichnung von Informationen über die Mitarbeiter eines Unternehmens und die andere zur Verfolgung der Verkäufe des Unternehmens verwendet wird. In diesem Beispiel wird der Primärschlüssel der Tabelle EMPLOYEES als Fremdschlüssel der Tabelle SALES verwendet:

      Diagrammbeispiel, wie der Primärschlüssel der Tabelle EMPLOYEES als Fremdschlüssel der Tabelle SALES fungiert

      Wenn Sie versuchen, der untergeordneten Tabelle einen Datensatz hinzuzufügen, und der in die Fremdschlüsselspalte eingegebene Wert im Primärschlüssel der übergeordneten Tabelle nicht existiert, ist die Einfügeanweisung ungültig. Dies hilft, die Integrität der Beziehungsebene aufrechtzuerhalten, da die Zeilen in beiden Tabellen immer korrekt zueinander in Beziehung stehen werden.

      Die Strukturelemente des relationalen Modells tragen dazu bei, die Daten auf organisierte Weise zu speichern, aber die Speicherung von Daten ist nur dann sinnvoll, wenn Sie diese auch abrufen können. Um Informationen aus einem RDBMS abzurufen, können Sie eine *Abfrage *oder eine strukturierte Anfrage nach einem Satz von Informationen stellen. Wie zuvor erwähnt, verwenden die meisten relationalen Datenbanken SQL zur Verwaltung und Abfrage von Daten. SQL ermöglicht es Ihnen, Abfrageergebnisse mit einer Vielzahl von Klauseln, Prädikaten und Ausdrücken zu filtern und zu manipulieren, wodurch Sie eine genaue Kontrolle darüber erhalten, welche Daten im Ergebnissatz angezeigt werden.

      Vorteile und Grenzen relationaler Datenbanken

      Lassen Sie uns mit Blick auf die zugrunde liegende Organisationsstruktur relationaler Datenbanken einige ihrer Vor- und Nachteile betrachten.

      Heute weichen sowohl SQL als auch die Datenbanken, die es implementieren, in mehrfacher Hinsicht von Codds relationalem Modell ab. Beispielsweise schreibt das Modell von Codd vor, dass jede Zeile in einer Tabelle eindeutig sein sollte, während die meisten modernen relationalen Datenbanken aus Gründen der Praktikabilität duplizierte Zeilen zulassen. Es gibt einige, die SQL-Datenbanken nicht als echte relationale Datenbanken betrachten, wenn sich nicht an jede von Codds Spezifikationen für das relationale Modell halten. In der Praxis wird jedoch jedes DBMS, das SQL verwendet und sich zumindest teilweise an das relationale Modell hält, als relationales Datenbankmanagementsystem bezeichnet.

      Obwohl relationale Datenbanken schnell an Popularität gewannen, wurden einige Unzulänglichkeiten des relationalen Modells offensichtlich, als Daten immer wertvoller wurden und Unternehmen begannen, mehr davon zu speichern. Zum einen kann es schwierig sein, eine relationale Datenbank horizontal zu skalieren. Horizontale Skalierung oder Herausskalieren ist die Praxis des Hinzufügens weiterer Computer zu einem bestehenden Stack, um die Last zu verteilen und mehr Datenverkehr und eine schnellere Verarbeitung zu ermöglichen. Dies steht oft im Gegensatz zur vertikalen Skalierung, bei der die Hardware eines vorhandenen Servers aufgerüstet wird, in der Regel durch Hinzufügen von mehr RAM oder CPU.

      Der Grund dafür, dass die horizontale Skalierung einer relationalen Datenbank schwierig ist, hängt damit zusammen, dass das relationale Modell auf Konsistenz ausgelegt ist, d, h. Clients, die dieselbe Datenbank abfragen, werden immer dieselben Daten abrufen. Wenn Sie eine relationale Datenbank horizontal über mehrere Computer skalieren, wird es schwierig, die Konsistenz zu gewährleisten, da Clients Daten auf einen Knoten Schreiben können, aber nicht auf die anderen. Es gäbe wahrscheinlich eine Verzögerung zwischen dem anfänglichen Schreiben und dem Zeitpunkt, zu dem die anderen Knoten aktualisiert werden, um die Änderungen widerspiegeln, was zu Inkonsistenzen zwischen ihnen führen würde.

      Eine weitere Einschränkung bei RDBMS besteht darin, dass das relationale Modell für die Verwaltung strukturierter Daten oder von Daten konzipiert wurde, die mit einem vordefinierten Datentyp übereinstimmen oder zumindest auf eine vorher festgelegte Weise organisiert sind, sodass sie leicht sortierbar und durchsuchbar sind. Mit der Verbreitung von Personal Computing und dem Aufkommen des Internets in den frühen 1990er Jahren wurden jedoch unstrukturierte Daten – wie E-Mail-Nachrichten, Fotos, Videos usw. – immer üblicher.

      All dies bedeutet nicht, dass relationale Datenbanken nicht nützlich sind. Ganz im Gegenteil, das relationale Modell ist auch nach über 40 Jahren noch immer der dominierende Rahmen für das Datenmanagement. Ihre Verbreitung und Langlebigkeit bedeuten, das relationale Datenbanken eine ausgereifte Technologie darstellen, was wiederum einer ihrer wichtigsten Vorteile ist. Es gibt viele Anwendungen, die für die Arbeit mit dem relationalen Modell konzipiert wurden, sowie viele Datenbankadministratoren, die in ihrer Laufbahn Experten auf dem Gebiet der relationalen Datenbanken sind. Für diejenigen, die mit relationalen Datenbanken beginnen möchten, gibt es ein breites Angebot an Ressourcen, in gedruckter Form und online.

      Ein weiterer Vorteil relationaler Datenbanken besteht darin, dass fast jedes RDBMS Transaktionen unterstützt. Eine Transaktion besteht aus einer oder mehreren einzelnen SQL-Anweisungen, die nacheinander als eine einzige Arbeitseinheit ausgeführt werden. Transaktionen stellen einen Alles-oder-Nichts-Ansatz dar, was bedeutet, dass jede SQL-Anweisung in der Transaktion gültig sein muss, da ansonsten die gesamte Transaktion fehlschlägt. Dies ist sehr hilfreich, um die Datenintegrität zu gewährleisten, wenn Änderungen an mehreren Zeilen oder Tabellen vorgenommen werden.

      Und schließlich sind relationale Datenbanken äußerst flexibel. Sie wurden zum Aufbau einer Vielzahl unterschiedlicher Anwendungen verwendet und arbeiten auch bei sehr großen Datenmengen weiterhin effizient. SQL ist ebenfalls extrem leistungsfähig, sodass Sie im Handumdrehen Daten hinzufügen und ändern sowie die Struktur von Datenbankschemata und Tabellen ändern können, ohne die vorhandenen Daten zu beeinträchtigen.

      Zusammenfassung

      Dank ihrer Flexibilität und ihres Designs für Datenintegrität sind relationale Datenbanken auch mehr als fünfzig Jahre nach ihrer ersten Konzeption immer noch die wichtigste Art und Weise, wie Daten verwaltet und gespeichert werden. Selbst mit dem Aufkommen verschiedener NoSQL-Datenbanken in den letzten Jahren sind das Verständnis des relationalen Modells und die Arbeit mit RDBMS der Schlüssel für jeden, der Anwendungen entwickeln möchte, die die Datenleistung nutzen.

      Um mehr über einige beliebte Open-Source-RDBMS zu erfahren, empfehlen wir Ihnen, sich unseren Vergleich verschiedener relationaler Open-Source-Datenbanken anzusehen. Wenn Sie mehr über Datenbanken im Allgemeinen erfahren möchten, empfehlen wir Ihnen, einen Blick in unsere vollständige Bibliothek datenbankbezogener Inhalte zu werfen.



      Source link

      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