Lernen Sie Informatik mit JavaScript Teil 4, Funktionen

Einführung

Angenommen, Sie haben eine Datei, die 82 Zeilen lang ist und nur aus einer Reihe von Anweisungen besteht. (Ich hoffe, das stimmt nicht, aber alles ist möglich.) Wie würden Sie verstehen, was das Programm macht? Wie würden Sie es modifizieren oder verwenden? Es wäre schwierig, mit diesem Code etwas zu tun, da er nicht strukturiert ist.  

Um dieses Problem zu lösen, können Sie Funktionen verwenden. Eine Funktion ist eine Gruppe von Anweisungen, die eine bestimmte Aufgabe ausführen. Mithilfe von Funktionen können wir ein Programm in kleinere Programme aufteilen, wodurch unser Code lesbarer, wiederverwendbarer und überprüfbarer wird.

Inhalt

  • Leere Funktionen
  • Rückgabewertfunktion
  • Umfang
  • Parameter
  • Module

Leere Funktionen

Diese Art von Funktion listet die Schritte auf, die das Programm ausführen soll. Angenommen, wir schreiben ein Programm, um einen Benutzer auf einer Website anzumelden. Das Programm kann aus folgenden Aufgaben bestehen:

  • Holen Sie sich den Benutzernamen
  • Holen Sie sich das Passwort
  • Prüfen Sie, ob Benutzername und Passwort vorhanden sind
  • Leiten Sie den Benutzer zu seinem Dashboard um

Jeder dieser Schritte kann in einer Login-Funktion enthalten sein. Dies ist eine Beispielfunktion:

function greet () console.log ("Hallo, Welt");  

Dies ist die allgemeine Form einer Funktion:

function functionName () Anweisung; Aussage; usw. 

Um die Funktion auszuführen (auch als Aufrufen der Funktion oder Aufrufen der Funktion bezeichnet), schreiben Sie eine Anweisung, die sie aufruft.

grüßen(); 

Das () Hier übergeben wir Eingaben an die Funktion. Wenn wir die Funktion definieren, wird die Eingabe als Parameter bezeichnet. Wenn wir die Funktion aufrufen, ist die Eingabe der tatsächliche Wert und wird als Argument bezeichnet. Beispiel:

Funktionsbegrüßung (Name) console.log ("Hallo", + Name);  grüße ("Alberta"); // Hallo Alberta 

Mit JavaScript ES6 können Sie Funktionen mithilfe der Pfeilsyntax definieren. Hier ist unsere Begrüßungsfunktion, die mithilfe der Pfeilsyntax definiert wird:

let grüße = () => console.log ("Hallo, Welt");

Eine Funktion mit einem Parameter:

let greet = name => console.log ("Hallo," + Name);

Eine Funktion mit mehr als einem Parameter:

let greet = (fname, lname) => console.log ("Hallo", + fname + "" + name); 

Eine Funktion mit mehreren Anweisungen:

let greet = (fname, lname) => let name = fname + "" + name; console.log ("Hallo" + Name); 

Da eine Pfeilfunktion eine anonyme Funktion ist, geben wir unserer Funktion einen Namen, indem Sie sie einer Variablen zuweisen. Pfeilfunktionen können nützlich sein, wenn Ihr Funktionskörper nur eine Anweisung enthält.

Rückgabewertfunktion

Diese Art von Funktion gibt einen Wert zurück. Die Funktion muss mit einer return-Anweisung enden. Dieses Beispiel gibt die Summe zweier Zahlen zurück.

Funktion add (x, y) return x + y; 

Dies ist das allgemeine Formular, das eine Wertrückgabefunktion definiert:

function functionName () Anweisung; Aussage; usw. Rückgabewert;  

Der Wert von Ausdruck wird von der Funktion ausgegeben. Diese Art von Funktion ist nützlich, wenn sie in einer Variablen gespeichert wird. 

Lassen Sie variableName = Funktionsname (); 

Umfang

Der Umfang einer Variablen ist der Teil des Programms, auf den auf eine Variable zugegriffen werden kann. Eine Variable kann lokal oder global sein. Der Gültigkeitsbereich einer lokalen Variablen befindet sich innerhalb der Funktion, in der sie erstellt wurde. Kein Code außerhalb der Funktion kann auf die lokalen Variablen zugreifen. 

Auch wenn Sie verwenden Lassen oder const Um eine Variable zu deklarieren, haben sie einen Blockbereich. Ein Block ist eine Menge von Anweisungen, die als Gruppe zusammengehören. Ein Block könnte so einfach sein wie das Einbetten unseres Codes in geschweifte Klammern:

sei a = 2; 

Die Variable ein ist lokal für den Block, in dem er sich befindet. Ein Block kann auch eine Schleife oder eine if-Anweisung sein. Beispiel:  

sei a = 1; wenn (5> 4) sei a = 2;  console.log (a); // 1 

Weil unsere Konsolenanweisung im selben Bereich liegt wie unsere erste Variable ein, Es zeigt diesen Wert an, der 1 ist. Es hat keinen Zugriff auf die Variablen im If-Block. Betrachten Sie nun dieses Beispiel:

sei a = 1; wenn (5> 4) sei a = 2; console.log (a); // 2

Jetzt wird 2 angezeigt, da der Gültigkeitsbereich der Variablen, auf den unsere Konsolenanweisung zugreifen kann, im if-Block liegt. Die Parameter einer Funktion sind ebenfalls lokale Variablen und können nur durch Code innerhalb der Funktion aufgerufen werden. Auf globale Variablen können dagegen alle Anweisungen in einer Programmdatei zugreifen. Beispiel:

sei a = 1; Funktion foo () a = 2;  console.log (a); // 1 foo (); console.log (a); // 2

In diesem Beispiel, ein ist eine globale Variable, auf die wir innerhalb der foo-Funktion zugreifen können. Die erste Konsolenanweisung zeigt 1. Nach dem Aufruf foo, der Wert von ein wird auf 2 gesetzt, wodurch die Anzeige der zweiten Konsolenanweisung 2 erfolgt. 

Globale Variablen sollten sehr wenig verwendet werden, im Idealfall überhaupt nicht. Da auf globale Variablen von jedem Teil eines Programms aus zugegriffen werden kann, besteht das Risiko, dass sie auf unvorhersehbare Weise geändert werden. In einem großen Programm mit Tausenden von Codezeilen wird das Programm dadurch schwieriger zu verstehen, da Sie nicht leicht erkennen können, wie die Variable verwendet wird. Es ist besser, lokale Variablen zu erstellen und zu verwenden.

Wenn Sie jedoch eine Variable an mehreren Stellen in Ihrem Programm verwenden müssen, können Sie eine globale Konstante verwenden. Eine Variable mit der const Das Schlüsselwort verhindert, dass es geändert wird, und macht es sicherer, es zu verwenden. Sie müssen sich nur um die Aktualisierung des Werts der Konstante an dem Ort kümmern, an dem sie deklariert wurde.

Parameter

Erinnern Sie sich daran, dass ein Parameter eine Variable ist, die eine Funktion zum Akzeptieren von Daten verwendet. Der Parameter erhält den Wert der Argumente einer Funktion, wenn die Funktion aufgerufen wird. Ab ES6 können dem Format auch Parameter vorgegeben werden Parametername = Wert. In diesem Fall können Sie eine Funktion ohne Argumente aufrufen, und es werden Standardwerte verwendet. Beispiel:

Funktion greet (name = "world") console.log ("Hallo", + Name);  grüßen(); //Hallo Welt

Der Spread / Rest-Operator ist neu in ES6 und kann verwendet werden, um ein Array oder ein Objekt entweder in einzelne Werte zu erweitern oder die Parameter einer Funktion in einem Array zu erfassen. Dies ist ein Beispiel für die Verwendung eines Rest-Parameters:

Funktion foo (… args) console.log (args);  foo (1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

Module

Angenommen, Sie haben jetzt eine Datei mit 1.082 Zeilen. (Ich habe dies gesehen, und Sie sollten laufen, wenn Sie auf so etwas stoßen.) Die Datei ist in Funktionen organisiert, aber es ist schwierig zu sehen, wie sie sich zueinander verhalten. 

Um zusammenhängendes Verhalten zu gruppieren, sollten wir unseren Code in Modulen einfügen. Ein Modul in ES6 ist eine Datei, die verwandte Funktionen und Variablen enthält. Mithilfe von Modulen können Sie private Eigenschaften ausblenden und öffentliche Eigenschaften verfügbar machen, die wir in anderen Dateien verwenden möchten. Der Dateiname wäre der Name des Moduls. Module haben auch einen eigenen Umfang. Um Variablen außerhalb des Gültigkeitsbereichs des Moduls verwenden zu können, müssen sie exportiert werden. Nicht exportierte Variablen sind privat und können nur innerhalb des Moduls aufgerufen werden.  

Einzelne Eigenschaften können wie folgt exportiert werden:

Exportfunktion foo () console.log ("Hallo Welt");  export let bar = 82; export let baz = [1,2,3];

Alternativ können alle Eigenschaften mit einer Exportanweisung exportiert werden:

function foo () console.log ("Hallo Welt");  let bar = 82; sei baz = [1,2,3]; export foo, bar, baz;

Um die Variablen eines Moduls zu verwenden, importieren Sie es in die Datei. Sie können wie folgt angeben, was Sie aus dem Modul importieren möchten:

importiere foo, bar, baz von "foo"; 

Sie können Ihren Import auch umbenennen:

importiere foo as Foo von "foo"; Foo ();

Oder Sie können alle Eigenschaften des Moduls importieren:

* als myModule von "foo" importieren; myModule.foo ();

Rezension

Funktionen ermöglichen es uns, unsere Programme in kleinere Programme aufzuteilen, die wir leicht verwalten können. Diese Praxis wird als Modularisierung bezeichnet. Es gibt zwei Arten von Funktionen: Void-Funktionen und Wertrückgabe-Funktionen. Eine leere Funktion führt die darin enthaltenen Anweisungen aus. Eine Wertrückgabe-Funktion gibt uns einen Wert zurück.  

Bereich ist der Teil des Programms, auf den auf eine Variable zugegriffen werden kann. Innerhalb einer Funktion deklarierte Variablen, einschließlich der Parameter der Funktion, sind lokal. Blöcke haben auch einen Gültigkeitsbereich, und lokale Variablen können darin erstellt werden. 

Variablen, die nicht in einem Block oder Modul eingeschlossen sind, sind global. Wenn Sie eine globale Variable benötigen, ist es akzeptabel, eine globale Konstante zu haben. Versuchen Sie anderenfalls, Ihren Code in Modulen zu enthalten, da Module einen eigenen Bereich haben. Besser noch, Module geben Ihre Code-Struktur und Organisation wieder.  

Ressourcen

  • repl.it
  • ES6-Spezifikation
  • Sie kennen JS: ES6 und darüber hinaus nicht