Es gibt unzählige Beiträge im Internet, die erklären, welche Schleife man wann und wo in der JavaScript-Programmierung nutzt. Auch ich werde hier nichts Neues erzählen; ich hatte aber einfach Lust, eine kleine Übersicht zu erstellen.
Ich werde versuchen, auf alle mir gängigen Schleifenarten einzugehen. Manche davon wird man aber so gut wie nie nutzen, und manche umso mehr. Es ist aber immer gut alle mal gesehen zu haben.
Die "for"-Schleife ist eine sehr flexible und effizente Schleifenstruktur und wird daher gerne bei Szenarien eingesetzt wo es um Geschwindigkeit geht.
1for (let i = 0; i < 10; i++) { 2 console.log(i); 3} 4 5// Output: 0 1 2 3 4 5 6 7 8 9
Angenommen, du hast einen Obststand und möchtest den Gesamtpreis aller verfügbaren Früchte berechnen. Du hast eine Liste von Früchten und jedem ist ein Preis zugeordnet. Eine for-Schleife ist in diesem Fall sinnvoll, da sie dir ermöglicht, durch die Liste zu gehen und die Preise zusammenzuzählen.
1const fruits = [ 2 { name: "Apple", price: 1 }, 3 { name: "Banana", price: 0.5 }, 4 { name: "Cherry", price: 0.2 }, 5]; 6 7let totalCost = 0; 8 9for (let i = 0; i < fruits.length; i++) { 10 totalCost += fruits[i].price; 11} 12 13console.log("Total cost:", totalCost); 14 15// Output: Total cost: 1.7
Die "for-in"-Schleife zeigt ihre Stärke in dem sie einfach und direkt durch Eigenschaften eines Objekts iteriert um zb. den Schlüssel und den Wert jeder Eigenschaft auszulesen. Bei der Iteration von Arrays oder wenn die Performance kritisch ist sollte nicht auf diese Schleifenart zurückgegriffen werden.
1const obj = {a: 1, b: 2, c: 3}; 2for (let key in obj) { 3 console.log(key, obj[key]); 4} 5 6// Output: a 1, b 2, c 3
Angenommen, du hast ein Objekt, das die Preise verschiedener Früchte in einem Obstladen zeigt und du über das Objekt iterieren möchtest um eine Preisliste zu erstellen.
1const fruitPrices = { apple: 1, banana: 0.5, cherry: 0.2 }; 2 3let priceList = ""; 4for (let fruit in fruitPrices) { 5 priceList += `${fruit}: ${fruitPrices[fruit]}€\n`; 6} 7 8console.log(priceList); 9 10// Output: apple: 1€, banana: 0.5€, cherry: 0.2€
Die for-of-Schleife ist eine ausgezeichnete Wahl, wenn du über die Elemente eines iterierbaren Objekts iterieren und eine einfache, klare Syntax verwenden möchtest. Wenn du jedoch den Index benötigst oder über die Eigenschaften eines Objekts iterieren möchtest, könnten andere Schleifenarten oder Methoden besser geeignet sein.
1const arr = ["apple", "banana", "cherry"]; 2for (let value of arr) { 3 console.log(value); 4} 5 6// Output: apple, banana, cherry
In diesem Fall ist der Entwurf schon das Beste Beispiel. Wir gehen einfach durch die Liste und geben die Früchte aus.
EIne gute Wahl wenn die Anzahl der Iterationen im Voraus nicht bekannt sind und du eine Aktion wiederholt ausführen möchtest solange eine Bedingung erfüllt ist.
1let i = 0; 2while (i < 10) { 3 console.log(i); 4 i++; 5} 6 7// Output: 0 1 2 3 4 5 6 7 8 9
Angenommen, du hast einen Obstkorb und du möchtest die Früchte daraus entfernen, bis der Korb leer ist. Eine while-Schleife ist hier nützlich, da sie weiterläuft, solange eine bestimmte Bedingung erfüllt ist - in diesem Fall, solange noch Früchte im Korb sind.
1let fruitBasket = ["apple", "banana", "cherry"]; 2let fruit; 3 4while (fruitBasket.length > 0) { 5 fruit = fruitBasket.pop(); // Entfernt die letzte Frucht aus dem Korb 6 console.log(`Removing ${fruit} from the basket.`); 7} 8 9console.log("The basket is empty."); 10 11/* 12Output: 13 14Removing cherry from the basket. 15Removing banana from the basket. 16Removing apple from the basket. 17The basket is empty. 18 19*/
Wenn du sicherstellen möchtest das ein Codeblock mindestens einmal ausgeführt werden soll ist die "do-while"-Schleife eine gute Wahl.
1let i = 0; 2do { 3 console.log(i); 4 i++; 5} while (i < 10); 6 7// Output: 0 1 2 3 4 5 6 7 8 9
Eine Verkäufer:in, möchte Früchte verkauft, und du möchtest sicherstellen, dass mindestens eine Transaktion durchgeführt wird, bevor der Stand für den Tag schließt.
1let fruitSold = 0; 2let hasMoreFruitsToSell = true; 3 4do { 5 fruitSold++; 6 console.log(`Fruit ${fruitSold} sold.`); 7 // Hier könnte eine Bedingungsprüfung stehen, um festzustellen, ob noch mehr Früchte zu verkaufen sind. 8 // Zum Zweck dieses Beispiels setzen wir hasMoreFruitsToSell einfach auf false, um die Schleife zu beenden. 9 hasMoreFruitsToSell = false; 10} while (hasMoreFruitsToSell); 11 12console.log("No more fruits to sell for today."); 13 14// Output: Fruit 1 sold. No more fruits to sell for today.
Wenn du eine einfache und klare Syntax für die Iteration über ein Array benötigst und eine Funktion auf jedes Element anwenden möchtest ist "Array.prototype.forEach()" eine gute Wahl.
1const arr = [1, 2, 3]; 2arr.forEach((value, index) => { 3 console.log(index, value); 4}); 5 6// Output: 0 1, 1 2, 2 3
Du hast eine Liste von Früchten und möchtest die Länge jedes Fruchtnamens berechnen. Die forEach() Methode ist in diesem Fall nützlich, da sie eine klare und einfache Syntax bietet, um eine Funktion auf jedes Element in einem Array anzuwenden.
1const fruits = ["apple", "banana", "cherry"]; 2 3fruits.forEach(function (fruit) { 4 const nameLength = fruit.length; 5 console.log(`The name ${fruit} has ${nameLength} characters.`); 6}); 7 8/* 9Output: 10 11The name apple has 5 characters. 12The name banana has 6 characters. 13The name cherry has 6 characters. 14*/
Die Methode map() ist die Perfekte Wahl, wenn du ein neues Array auf Basis des ursprünglichen Arrays erstellen möchtest, insbesondere wenn du eine klare Transformation für jedes Element im Array hast.
1const arr = [1, 2, 3]; 2const newArr = arr.map((value) => value * 2); 3 4console.log(newArr); 5 6// Output: [2, 4, 6]
Angenommen, du hast eine Liste von Früchten und möchtest eine neue Liste erstellen, die die Namen aller Früchte in Großbuchstaben enthält. Die Methode map() ist hier ideal, da sie dir ermöglicht, eine Funktion auf jedes Element in einem Array anzuwenden und ein neues Array mit den Ergebnissen zu erstellen.
1const fruits = ["apple", "banana", "cherry"]; 2 3const uppercasedFruits = fruits.map(function (fruit) { 4 return fruit.toUpperCase(); 5}); 6 7console.log(uppercasedFruits); 8 9// Output: ['APPLE', 'BANANA', 'CHERRY']
Die Methode filter() ist eine hervorragende Wahl, wenn du ein neues Array auf Basis einer Bedingung erstellen möchtest, die auf den Elementen des ursprünglichen Arrays geprüft wird. Sie ermöglicht es dir, eine klare und prägnante Syntax zu verwenden, um Elemente zu filtern, die eine bestimmte Bedingung erfüllen, und ein neues Array mit diesen Elementen zu erstellen.
1const arr = [1, 2, 3, 4]; 2const newArr = arr.filter((value) => value % 2 === 0); 3 4console.log(newArr); 5 6// Output: [2, 4]
Angenommen, du hast eine Liste von Früchten und möchtest eine neue Liste erstellen, die nur die Früchte enthält, deren Namen mehr als 5 Zeichen haben. Die Methode filter() ist hier ideal, da sie es dir ermöglicht, ein neues Array zu erstellen, das auf einer bestimmten Bedingung basiert.
1const fruits = ["apple", "banana", "cherry", "kiwi", "lemon"]; 2 3const longNamedFruits = fruits.filter(function (fruit) { 4 return fruit.length > 5; 5}); 6 7console.log(longNamedFruits); 8 9/* 10Output: 11 12['banana', 'cherry', 'lemon'] 13*/
Die Methode reduce() ist eine gute Wahl, wenn du ein Array zu einem einzelnen Wert reduzieren möchtest, insbesondere wenn du eine klare Transformation oder Berechnung über die Elemente im Array ausführen möchtest.
1const arr = [1, 2, 3, 4]; 2const sum = arr.reduce((accumulator, currentValue) => { 3 return accumulator + currentValue; 4}, 0); 5console.log(sum); 6 7// Output: 10
Angenommen, du hast eine Liste von Früchten und möchtest die Gesamtzahl der Zeichen aller Fruchtnamen berechnen. Die Methode reduce() ist hier ideal, da sie es dir ermöglicht, einen Akkumulatorwert über die Elemente im Array zu führen und einen einzelnen Endwert zu berechnen.
1const fruits = ["apple", "banana", "cherry"]; 2 3const totalCharacterCount = fruits.reduce(function (acc, fruit) { 4 return acc + fruit.length; 5}, 0); 6 7console.log(totalCharacterCount); 8 9// Output: 17
Die Methode find() ist eine gute Wahl, wenn du das erste Element in einem Array finden möchtest, das eine bestimmte Bedingung erfüllt.
1const arr = [1, 2, 3, 4]; 2const found = arr.find((value) => value % 2 === 0); 3console.log(found); 4 5// Output: 2
Angenommen, du hast eine Liste von Früchten und möchtest die erste Frucht finden, deren Name mehr als 5 Zeichen hat. Die Methode find() ist hier ideal, da sie es dir ermöglicht, ein Array zu durchsuchen und das erste Element zurückzugeben, das eine bestimmte Bedingung erfüllt.
1const fruits = ["apple", "banana", "cherry"]; 2 3const longNamedFruit = fruits.find(function (fruit) { 4 return fruit.length > 5; 5}); 6 7console.log(longNamedFruit); 8 9// Output: 'banana'
Die Methode findIndex() ist eine gute Wahl, wenn du den Index des ersten Elements in einem Array finden möchtest, das eine bestimmte Bedingung erfüllt.
1const arr = [1, 2, 3, 4]; 2const foundIndex = arr.findIndex((value) => value % 2 === 0); 3console.log(foundIndex); 4 5// Output: 1
Angenommen, du hast eine Liste von Früchten und möchtest den Index der ersten Frucht finden, deren Name mehr als 4 Zeichen hat. Die Methode findIndex() ist hier ideal, da sie es dir ermöglicht, ein Array zu durchsuchen und den Index des ersten Elements zurückzugeben, das eine bestimmte Bedingung erfüllt.
1const fruits = ["apple", "banana", "cherry"]; 2 3const longNamedFruitIndex = fruits.findIndex(function (fruit) { 4 return fruit.length > 4; 5}); 6 7console.log(longNamedFruitIndex); 8 9// Output: 0
Ist eine nützliche Methode, wenn du eine Liste der Schlüssel eines Objekts benötigst. Es ist besonders nützlich, wenn du über die Schlüssel eines Objekts iterieren und auf die Werte zugreifen möchtest, oder wenn du einfach nur wissen möchtest, welche Schlüssel in einem Objekt vorhanden sind.
An dieser Stelle ist es wichtig das dies Verstanden wird, daher hier noch mal etwas Detalierter.
In JavaScript können Objekte Eigenschaften von ihren Prototypen erben. Die Methode Object.keys() berücksichtigt jedoch nur die "eigenen" Eigenschaften des Objekts, nicht die Eigenschaften, die es von seinem Prototyp erbt. Das bedeutet, dass nur die Schlüssel zurückgegeben werden, die direkt am Objekt definiert sind, nicht die Schlüssel, die durch Prototypenvererbung verfügbar sind.
1const parentObject = { fruit: 'apple' }; 2const childObject = Object.create(parentObject); 3childObject.color = 'red'; 4 5console.log(Object.keys(childObject)); 6 7// Output: ['color']
Wir erhalten hier nur den Key "color" nicht aber den Key aus dem parentObject.
1const fruitColors = { apple: 'red', banana: 'yellow', cherry: 'red' }; 2const keys = Object.keys(fruitColors); 3 4const values = keys.map(key => fruitColors[key]); 5 6console.log(values); // Output: ['red', 'yellow', 'red']
1const obj = { a: 1, b: 2, c: 3 }; 2const keys = Object.keys(obj); 3 4console.log(keys); 5 6// Output: ['a', 'b', 'c']
Angenommen, du hast ein Objekt, das verschiedene Früchte und ihre Mengen darstellt, und du möchtest alle Früchte auflisten, die du hast.
1const fruitInventory = { 2 apples: 10, 3 bananas: 20, 4 cherries: 15, 5}; 6 7const fruitNames = Object.keys(fruitInventory); 8 9console.log(fruitNames); 10 11// Output: ['apples', 'bananas', 'cherries']
Ist eine nützliche Methode, wenn du eine Liste der Werte eines Objekts benötigst. Quasi das gleiche wie Obejct.keys().
Im grunde die selben Probleme wie auch schon bei Object.keys()
1const obj = { a: 1, b: 2, c: 3 }; 2const values = Object.values(obj); 3 4console.log(values); 5 6// Output: [1, 2, 3]
Angenommen, du hast ein Objekt, das verschiedene Früchte und ihre Mengen darstellt, und du möchtest die Mengen aller Früchte auflisten.
1const fruitInventory = { 2 apples: 10, 3 bananas: 20, 4 cherries: 15 5}; 6 7const fruitQuantities = Object.values(fruitInventory); 8 9console.log(fruitQuantities); // Output: [10, 20, 15]
ist eine nützliche Methode, wenn du sowohl die Schlüssel als auch die Werte eines Objekts benötigst.
1const obj = { a: 1, b: 2, c: 3 }; 2const entries = Object.entries(obj); 3 4console.log(entries); 5 6// Output: [['a', 1], ['b', 2], ['c', 3]]
1const fruitInventory = { 2 apples: 10, 3 bananas: 20, 4 cherries: 15, 5}; 6 7const fruitEntries = Object.entries(fruitInventory); 8 9console.log(fruitEntries); 10 11// Output: [['apples', 10], ['bananas', 20], ['cherries', 15]] 12``