Was sind Schleifen? | Programmieren lernen mit JavaScript #18
In diesem Video zeige ich euch, was Schleifen sind, und stelle euch die while-Schleife vor.
Wenn man ein Array hat oder eine Liste von Elementen und man möchte dieses Array oder
diese Liste verarbeiten, dann muss man Element für Element abgehen.
Es gibt keine Möglichkeit, die komplette Liste auf einmal zu verarbeiten, man muss
das Element für Element machen.
Wenn euer Programm über ein Array, über eine Liste drüber läuft und Element für
Element verarbeitet, dann heißt das ganze iterieren.
Euer Programm iteriert über die Liste, über das Array.
Iterieren oder Iteration kommt aus dem Lateinischen von Wiederholen und da seht ihr schon, worauf
es in diesem Video hier hinausläuft, es geht um Programmkonstrukte, die bestimmten Code
immer wieder wiederholen.
Also.
Wie machen wir das?
Öffnet wieder eure Konsole.
Wir legen uns mal ein Beispielarray an, eine Variable, die ich mal array nenne.
Und wenn ihr das letzte Video gesehen habt, da hab ich immer als Beispiel mit dem Cast
von Das Schweigen der Lämmer gearbeitet.
Das mache ich jetzt hier einfach mal auch, d.h. ich erstelle mir ein Array mit den Elementen,
mit den Strings "Anthony Hopkins", "Lawrence A.
Booney", "Kasi Lemmons" (oder keine Ahnung, wie das ausgesprochen wird) und "Jodie Foster"
und das sollte jetzt für's erste mal reichen.
D.h. wir haben jetzt ein Array mit insgesamt vier Elementen.
Und ich möchte jetzt alle Elemente zu einem String zusammenfassen, wobei jedes Element
vom anderen durch ein Komma und ein Leerzeichen getrennt ist.
Das ist das, was ich am Ende des letzten Videos auch schon vorgestellt hatte.
Wir kennen inzwischen Funktionen und wir wissen auch wie diese Funktionen arbeiten, wie die
funktionieren, und wir wissen, dass sie sich selbst aufrufen können, Rekursionen also.
Und das können wir verwenden und — ich mach mal einen sogenannten result-String,
eine Variable, die ich resString nenne, und die setze ich mal auf einen leeren String
— und dann schreibe ich eine Funktion, die ich iterator nenne oder iterator im Englischen.
Und die hat den Parameter i, der halt dann für Iterator steht, und in der Funktion sagen
wir: Wenn i kleiner als die Gesamtzahl der Elemente im Array ist,
dann soll zu diesem result-String soll die Stelle i im Array hinzugefügt werden, zusammen
mit dieser Trennung Komma und Leerzeichen.
Anschließend soll die Funktion iterator, iterator nochmal aufgerufen werden, aber dann
mit ++i.
Wenn ihr euch erinnert: Plusplus war der sogenannte Inkrement-Operator und der hat 1 zu dem Wert
hinzuaddiert, auf den er angewendet wurde.
D.h. in diesem Fall wird hiermit 1 zu i hinzuaddiert.
Also wir könnten auch i plus 1 schreiben in diesem Fall, aber ich möchte, dass ihr
euch jetzt an diesen Anblick dieses Inkrement-Operators gewöhnt, denn der wird euch ab jetzt öfter
begegnen.
Wir definieren diese Funktion und rufen die mit dem Index 0 auf.
Führen wir das also mal aus und gucken jetzt in den result-String und tatsächlich: Jetzt
steht da jedes einzelne Element des Arrays drin zusammen mit der Trennung Komma und Leerzeichen.
Falls ihr jetzt nicht sofort verstanden habt, wieso das funktioniert hat, denkt nochmal
nach, geht mal den Code durch und versucht, es selbst zu erarbeiten.
Ansonsten zeige ich euch das jetzt nochmal.
Wir haben die Funktion iterator aufgerufen und ihr den Parameter 0 übergeben.
D.h. i war jetzt zuerst 0.
Dann wurde die Funktion durchlaufen und es wurde geguckt: Ist i, also ist 0, kleiner
als die Gesamtzahl der Elemente im Array, also kleiner als array-length?
Das war hier unser Array.
Es hatte 4 Elemente, d.h. es wurde geguckt: Ist 0 kleiner als 4?
Ja, das ist es!
Das bedeutet, wir sind dann in das if gegangen, also in den Code, der davon abhängig war,
der dadurch bedingt war, und jetzt sollte das Element das im Array an dem Index i ist,
also an dem Index 0 zusammen mit einem Komma und einem Leerzeichen dem result-String hinzugefügt
werden.
An der Stelle 0 ist "Anthony Hopkins" und das wurde kombiniert mit dem Komma und dem
Leerzeichen und das wurde dem result-String, der jetzt bisher noch leer war, hinzugefügt.
Dann ging es weiter.
Es wurde ++i gerechnet, also 0 plus 1, was 1 ergibt.
Und damit wurde die Funktion iterator nochmal aufgerufen.
Und jetzt wurde das ganze wieder durchlaufen: Ist i kleiner als array.length?
Also immer noch 4, also ist es kleiner als 4?
Ja, das ist es!
Und es ging hier rein. array[i], also array[1] jetzt in diesem Fall
ist "Lawrence A.
Booney".
Das wurde mit dem Komma und dem Leerzeichen kombiniert und dem result-String hinzugefügt.
Plusplus i, also plusplus 1, ist 2 und damit wurde die iterator-Funktion schon wieder aufgerufen.
Ist 2 kleiner als array.length?
Also kleiner als 4?
Ja, das ist es.
Also sind wir in den Code gegangen, haben geguckt, was an dem Index 2 im Array ist,
und das ist "Kasi Lemmons" und das wurde mit dem Komma und dem Leerzeichen kombiniert und
dem result-String hinzugefügt.
Und es ging weiter: Plusplus i, also plusplus 2 inzwischen, ergibt 3 und damit wurde die
Funktion nochmal aufgerufen.
Und es wurde geguckt, ob 3 kleiner als 4 ist.
Ja, das ist es.
Es wurde nochmal durchgegangen und jetzt sind wir schon bei "Jodie Foster" und das wurde
dem result-String hinzugefügt.
Und das ganze wurde mit 4 aufgerufen!
Und ist 4 kleiner als 4?
Nein, das ist nicht der Fall!
4 ist nicht kleiner als 4.
Vier ist gleich vier, aber nicht kleiner als vier.
D.h. jetzt wurde der Code umgangen und der Code anschließend ausgeführt, wenn da welcher
wäre.
Es ist da aber kein weiterer, also ist die Funktion zu Ende gewesen und dadurch war der
result-String fertig!
So hat das ganze also funktioniert.
Das ist im Hintergrund abgegangen.
Und ihr habt schon bemerkt: Da wurde der Code immer und immer wiederholt.
Das wäre lästig, wenn man das per Hand machen müsste, und deswegen... so wird das ganze
also vom Computer aus gemacht.
Schreiben wir das ganze mal als eigene Funktion.
Ich nenne die Funktion mal join und man kann dieser Funktion ein Array übergeben und man
kann angeben, wie die einzelnen Elemente des Arrays zusammengefügt werden sollen oder
halt, was zwischen den Elementen stehen soll — also das, was hier hier Komma und Leerzeichen
ist.
Und diese Funktion erstellt intern eine Variable result-String
und dann führt sie intern diese iterator-Funktion aus,
(Rücke ich das mal alles hier schön ein, damit das ordentlich aussieht.)
ruft dann diese iterator-Funktion selbstständig intern auf -- übrigens hier könnt ihr jetzt
auch sehen, was ich schon mal in dem Video zum Thema Funktionen gesagt habe: Man kann
innerhalb einer Funktion eine weitere Funktion schreiben — und schließlich gibt sie den
result-String zurück.
Jetzt müssen wir nur noch die Variablen hier so umbenennen, dass die Parameter genommen
werden, und ich gucke mal, ob's funktioniert: Ich schreibe join, also ich rufe die Funktion
join auf, übergebe ihr das Array und möchte, dass jetzt mal ein senkrechter Strich zwischen
den einzelnen Elementen steht.
Ich führe es aus — und tatsächlich!
Jetzt steht zwischen den einzelnen Elementen hier ein senkrechter Strich und das Komplette
ist ein String, der zurückgegeben wird von der join-Funktion.
Eventuell habt ihr schon bemerkt, dass hier am Schluss immer noch so eine Trennung steht,
und die ist natürlich jetzt nicht unbedingt so schön (hier auch bei dem Komma), aber
wir können das ganze umgehen.
Wenn ihr jetzt noch nicht wisst, wie man das machen könnte, probiert's erstmal selbst
aus, pausiert dieses Video an dieser Stelle.
Ansonsten zeige ich es euch jetzt.
Was wir nämlich brauchen, ist jedes einzelne Element des Arrays in dem String, aber worauf
wir verzichten wollen, ist auf die allerletzte Trennung am Schluss.
D.h. wir müssen in jedem Fall zum result-String das... die jeweiligen Elemente des Arrays
hinzufügen.
Aber dann gucken wir: Wenn i kleiner ist als array oder arr.length
minus 1, (arr.length minus 1 wäre der allerletzte
Index im Array) dann soll zum result-String noch der delimiter
hinzugefügt werden, aber falls i der allerletzte Index im Array ist, also falls wir hier beim
letzten Element im Array sind, dann soll dieser Code nicht ausgeführt werden, d.h. dann soll
kein Trennstrich / Trennung am Schluss noch hinzugefügt werden.
Rufen wir join jetzt nochmal auf und jetzt sehen wir: Wir haben zwischen den Elementen
einen Trennstrich, aber nicht mehr am Schluss.
Was ihr hieran seht, ist, dass ihr Rekursionen nutzen könnt, um solche Iterationen, um solche
Wiederholungen, durchzuführen.
Allerdings gibt es auch bestimmte Code-Konstrukte, die speziell für diese Aufgabe gemacht worden
sind.
Und die sind halt dadurch dementsprechend viel einfacher zu benutzen als Rekursionen.
Und diese Code-Konstrukte heißen: Schleifen.
Es gibt verschiedene Arten von Schleifen und ich werde euch jetzt zuerst die while-Schleife
vorstellen.
"While" ist Englisch für "während" oder aber auch "solange".
Und die while-Schleife führt Code solange aus, solange eine Bedingung wahr ist.
Wie auch beim if kann man die while-Schleife mit einer einzelnen Anweisung ausführen,
ohne die geschweiften Klammern zu setzen, aber muss sie setzen, wenn man mehrere Anweisungen
ausführen möchte.
Aber wie auch beim if empfiehlt es sich, einfach generell immer die geschweiften Klammern zu
setzen.
Wir können jetzt unsere join-Funktion so umschreiben, dass wir eine while-Schleife
nutzen statt diese Rekursion hier.
Das, was hier bisher beim if ist, können wir zu einem while machen.
while i kleiner als arr.length, also Array-length, dann soll arr[i] zum result-String hinzugefügt
werden und, falls i kleiner ist als arr.length minus 1, soll auch der delimiter hinzugefügt
werden.
D.h. dieser Code kann bleiben wie er ist.
Dadurch, dass wir die iterator-Funktion jetzt aber nicht mehr haben, können wir die auch
nicht mehr aufrufen.
D.h. plusplus i bleibt dann als einzelne Anweisung stehen.
Auch hier unten haben wir nicht mehr die iterator-Funktion, aber irgendwo müssen wir ja mit 0 starten,
und deswegen definieren wir i hier oben als eigene Variable.
Wenn wir wollten, könnten wir das hier noch alles einrücken,
damit das alles noch besser ersichtlich wird und dadurch sehen wir, dass hier zum Beispiel
noch die geschweifte Klammer zu viel ist von der Funktion, die davor war.
Definieren wir mal die Funktion join so und rufen die jetzt nochmal auf.
Diesmal nehme ich mal ein Leerzeichen und zwei Dollar-Zeichen und ein Leerzeichen als
Trennung, einfach mal so zum Test.
Und wie ihr seht: Es macht genau dasselbe.
Es führt zum Ergebnis, es führt zum Erfolg!
Aber, ihr seht auch: Wir haben es im Grunde vereinfacht — wir brauchen jetzt keine weitere
Funktion, wir brauchen jetzt keine eigene iterator-Funktion, wir brauchen dann in der
iterator-Funktion auch kein eigenes if.
Wir können dann einfach dieses while statt dieses ifs nutzen.
Auf die nächsten Schleifen gehe ich im nächsten Video ein.
Um das zu sehen, klickt jetzt hier in das große Feld in die Mitte, oder, falls ihr
dieses Video in einer Playlist seht, zum Beispiel bei css3-html5.de, bleibt einfach dran.
