Aufgabe auf ../../while-loops.html
FizzBuzz
Geben Sie die Zahlen von 1 bis 100 aus: Dabei sollen alle Vielfachen von 3 zusätzlich Fizz und alle Vielfachen von 5 Buzz ausgeben und am Ende auch noch FizzBuzz bei allen Vielfachen von 3 und 5. Lösen Sie die Aufgabe mit einer for-Schleife und mit einer while-Schleife.
Tipp: Der Modulo-Operator % prüft, ob eine Zahl ein Vielfaches einer Zahl ist.
Für die wirklich ambitionierten Programmierer: Kann die Aufgabe mit einer einzigen Zeile gelöst werden?
Lösung
Den Anfang macht die Lösung mit der for-Schleife.
for (let i=1; i<=100; i++) { console.log (i) }
Ob i durch 3 teilbar ist, prüft der Modulo-Operator mit i % 3 === 0, ob i durch 5 teilbar ist mit i % 5 === 0 noch vor der Konsolen-Ausgabe.
for (let i=1; i<=100; i++) { if (i % 3 === 0) console.log (`${i} Fizz`) else if (i % 5 === 0) console.log (`${i} Buzz`) else console.log (i); }
Die Abfrage, ob i ein Vielfaches von 3 und 5 ist – also von 15, muss an den Anfang der Abfrage, denn sonst würde Fizz oder Buzz ausgegeben und der Zweig i % 15 würde niemals angesteuert.
for (let i=1; i<=100; i++) { if (i % 15 == 0) console.log (`${i} FizzBuzz`) else if (i % 3 === 0) console.log (`${i} Fizz`) else if (i % 5 === 0) console.log (`${i} Buzz`) else console.log (i); }
Lösung mit der while-Schleife
Für die while-Schleife muss die Laufvariable vor dem while definiert werden. Die Bedingung ist dieselbe wie in der for-Schleife.
let i = 1; while (i <= 100) { }
Die Anweisungen aus der for-Schleife können direkt kopiert werden, aber ganz wichtig: Nicht vergessen, die Laufvariable bei jedem Durchlauf um 1 zu erhöhen!
let i = 1; while (i <= 100) { if (i % 15 == 0) console.log (`${i} FizzBuzz`) else if (i % 3 === 0) console.log (`${i} Fizz`) else if (i % 5 === 0) console.log (`${i} Buzz`) else console.log (i); i++; }
Ternary
Die Ternary-Lösung beginnt mit einer for-Anweisung, die aber keine Inkrementierung aufführt. Das Semikolon nach i < 100; ist daher zwingend erforderlich.
for (let i = 0; i < 100;)
Der Ternary-Operator kann mit einem Plus-Zeichen gleich zweimal eingesetzt werden. Die Variable i wird im ersten Ternary erhöht.
Bedingung Bedingung │ true false │ true false ┌───┴──┐ │ │ ┌─┴─┐ │ │ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ console.log((++i % 3 ? '' : 'Fizz') + (i % 5 ? '' : 'Buzz') || i) ▲ ▲ ▲ ▲ │ | | | if | if oder | Konkatenation
Der erste Ternary testet, ob ++i%3. Jeder andere Wert, der nicht 0 ist, wird nicht als falsy betrachtet. Dann wird '' zurückgegeben, sonst 'Fizz'. Dieselbe Logik wird auf 5 angewendet. Das Plus-Zeichen fügt die Ergebnisse der beiden Ternaries aneinander, sodass »FizzBuzz« entsteht, wenn beiden Ausdrücke nicht falsy sind. Ansonsten tritt der OR-Operator || am Ende in Kraft und die Zahl wird ausgegeben.
Fingernägel runtergekaut? Knoten im Kopf? Nachvollziehen allein bringt schon die volle Punktzahl.
for (let i = 0; i < 100;) console.log ("Ternary", (++i % 3 ? '' : 'Fizz') + (i % 5 ? '' : 'Buzz') || i);
Quelle: https://flexiple.com/javascript/fizzbuzz-javascript/