# JavaScript Grundlagen: Arrays und Schleifen ![JavaScript Basics - Arrays](../../../../translated_images/de/webdev101-js-arrays.439d7528b8a29455.webp) > Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey title Dein Arrays & Schleifen Abenteuer section Grundlagen von Arrays Arrays erstellen: 5: You Elemente zugreifen: 4: You Array-Methoden: 5: You section Schleifen Beherrschung For-Schleifen: 4: You While-Schleifen: 5: You Moderne Syntax: 4: You section Datenverarbeitung Array + Schleifen: 5: You Anwendungen in der Praxis: 4: You Leistungsoptimierung: 5: You ``` ## Vor-Vorlesungs-Quiz [Vor-Vorlesungs-Quiz](https://ff-quizzes.netlify.app/web/quiz/13) Haben Sie sich schon einmal gefragt, wie Websites die Artikel im Warenkorb verfolgen oder Ihre Freundesliste anzeigen? Genau hier kommen Arrays und Schleifen ins Spiel. Arrays sind wie digitale Behälter, die mehrere Informationsstücke aufnehmen, während Schleifen es Ihnen ermöglichen, all diese Daten effizient ohne sich wiederholenden Code zu verarbeiten. Gemeinsam bilden diese beiden Konzepte die Grundlage für den Umgang mit Informationen in Ihren Programmen. Sie lernen, von der manuellen Auflistung jeden einzelnen Schritts zu klugem, effizientem Code überzugehen, der Hunderte oder sogar Tausende von Elementen schnell verarbeiten kann. Am Ende dieser Lektion werden Sie verstehen, wie man komplexe Datenaufgaben mit nur wenigen Zeilen Code bewältigen kann. Lassen Sie uns diese wesentlichen Programmierkonzepte erkunden. [![Arrays](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Arrays") [![Loops](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Schleifen") > 🎥 Klicken Sie auf die obigen Bilder für Videos über Arrays und Schleifen. > Sie können diese Lektion auf [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon) absolvieren! ```mermaid mindmap root((Datenverarbeitung)) Arrays Struktur eckige Klammern Syntax nullbasierte Indizierung dynamische Größe Operationen push/pop shift/unshift indexOf/includes Typen Zahlen-Array Zeichenketten-Array gemischte Typen Schleifen For-Schleifen Iterationen zählen Array-Verarbeitung vorhersehbarer Ablauf While-Schleifen bedingungsbasiert unbekannte Iterationen Benutzereingabe Moderne Syntax for...of forEach funktionale Methoden Anwendungen Datenanalyse Statistik Filterung Transformationen Benutzeroberflächen Listen Menüs Galerien ``` ## Arrays Denken Sie an Arrays wie an einen digitalen Aktenschrank - statt ein Dokument pro Schublade zu speichern, können Sie mehrere verwandte Elemente in einem einzigen strukturierten Behälter organisieren. In Programmierbegriffen ermöglichen Arrays es, mehrere Informationsstücke in einem organisierten Paket zu speichern. Egal ob Sie eine Fotogalerie erstellen, eine To-Do-Liste verwalten oder Highscores in einem Spiel verfolgen, Arrays bilden die Grundlage für die Datenorganisation. Schauen wir uns an, wie sie funktionieren. ✅ Arrays sind überall um uns herum! Können Sie an ein reales Beispiel eines Arrays denken, wie z.B. ein Solarpanel-Array? ### Arrays erstellen Ein Array zu erstellen ist super einfach – verwenden Sie einfach eckige Klammern! ```javascript // Leeres Array - wie ein leerer Einkaufswagen, der auf Artikel wartet const myArray = []; ``` **Was passiert hier?** Sie haben gerade einen leeren Behälter mit diesen eckigen Klammern `[]` erstellt. Denken Sie daran wie ein leeres Bücherregal – es ist bereit, die Bücher, die Sie dort organisieren möchten, aufzunehmen. Sie können Ihr Array auch von Anfang an mit Anfangswerten füllen: ```javascript // Die Geschmacksrichtungen in Ihrem Eisgeschäft const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; // Profilinformationen eines Benutzers (Mischung verschiedener Datentypen) const userData = ["John", 25, true, "developer"]; // Testergebnisse für Ihren Lieblingskurs const scores = [95, 87, 92, 78, 85]; ``` **Coole Dinge zu beachten:** - Sie können Text, Zahlen oder sogar Wahr/Falsch-Werte im gleichen Array speichern - Trennen Sie einfach jedes Element mit einem Komma – ganz einfach! - Arrays sind perfekt, um zusammengehörige Informationen zusammenzuhalten ```mermaid flowchart LR A["📦 Arrays"] --> B["Erstellen [ ]"] A --> C["Mehrere Elemente speichern"] A --> D["Zugriff über Index"] B --> B1["const arr = []"] B --> B2["const arr = [1,2,3]"] C --> C1["Zahlen"] C --> C2["Zeichenketten"] C --> C3["Boolesche Werte"] C --> C4["Gemischte Typen"] D --> D1["arr[0] = erster"] D --> D2["arr[1] = zweiter"] D --> D3["arr[2] = dritter"] E["📊 Array-Index"] --> E1["Index 0: Erster"] E --> E2["Index 1: Zweiter"] E --> E3["Index 2: Dritter"] E --> E4["Index n-1: Letzter"] style A fill:#e3f2fd style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 style E fill:#e0f2f1 ``` ### Array-Indizierung Hier ist etwas, das auf den ersten Blick ungewöhnlich erscheinen mag: Arrays nummerieren ihre Elemente ab 0, nicht ab 1. Diese Null-basierte Indizierung hat ihren Ursprung darin, wie Computerspeicher funktioniert – sie ist eine Programmierkonvention seit den frühen Tagen von Programmiersprachen wie C. Jeder Platz im Array erhält eine eigene Adressnummer, den **Index**. | Index | Wert | Beschreibung | |-------|-------|-------------| | 0 | "Schokolade" | Erstes Element | | 1 | "Erdbeere" | Zweites Element | | 2 | "Vanille" | Drittes Element | | 3 | "Pistazie" | Viertes Element | | 4 | "Rocky Road" | Fünftes Element | ✅ Überraschend, dass Arrays bei Index 0 starten? In einigen Programmiersprachen beginnen Indizes bei 1. Es gibt eine interessante Geschichte dazu, die Sie auf [Wikipedia nachlesen](https://en.wikipedia.org/wiki/Zero-based_numbering) können. **Zugriff auf Array-Elemente:** ```javascript const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; // Zugriff auf einzelne Elemente mit eckiger Klammernotation console.log(iceCreamFlavors[0]); // "Schokolade" - erstes Element console.log(iceCreamFlavors[2]); // "Vanille" - drittes Element console.log(iceCreamFlavors[4]); // "Rocky Road" - letztes Element ``` **Den Ablauf hier erklärt:** - **Verwendet** eckige Klammern mit der Indexnummer, um auf Elemente zuzugreifen - **Gibt** den Wert zurück, der an dieser spezifischen Position im Array gespeichert ist - **Beginnt** bei 0 zu zählen, somit hat das erste Element den Index 0 **Ändern von Array-Elementen:** ```javascript // Ändere einen bestehenden Wert iceCreamFlavors[4] = "Butter Pecan"; console.log(iceCreamFlavors[4]); // "Butter Pecan" // Füge ein neues Element am Ende hinzu iceCreamFlavors[5] = "Cookie Dough"; console.log(iceCreamFlavors[5]); // "Cookie Dough" ``` **Im obigen Beispiel haben wir:** - **Das Element** an Index 4 von "Rocky Road" zu "Butter Pecan" geändert - **Ein neues Element** "Cookie Dough" an Index 5 hinzugefügt - **Die Array-Länge** automatisch erweitert, wenn Elemente außerhalb der aktuellen Grenzen hinzugefügt werden ### Array-Länge und häufige Methoden Arrays bringen eingebaute Eigenschaften und Methoden mit, die das Arbeiten mit Daten wesentlich erleichtern. **Array-Länge ermitteln:** ```javascript const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; console.log(iceCreamFlavors.length); // 5 // Die Länge wird automatisch aktualisiert, wenn sich das Array ändert iceCreamFlavors.push("Mint Chip"); console.log(iceCreamFlavors.length); // 6 ``` **Wichtig zu merken:** - **Gibt** die Gesamtanzahl der Elemente im Array zurück - **Aktualisiert** sich automatisch, wenn Elemente hinzugefügt oder entfernt werden - **Bietet** eine dynamische Zählung, nützlich für Schleifen und Validierung **Essentielle Array-Methoden:** ```javascript const fruits = ["apple", "banana", "orange"]; // Elemente hinzufügen fruits.push("grape"); // Fügt am Ende hinzu: ["Apfel", "Banane", "Orange", "Traube"] fruits.unshift("strawberry"); // Fügt am Anfang hinzu: ["Erdbeere", "Apfel", "Banane", "Orange", "Traube"] // Elemente entfernen const lastFruit = fruits.pop(); // Entfernt und gibt "Traube" zurück const firstFruit = fruits.shift(); // Entfernt und gibt "Erdbeere" zurück // Elemente finden const index = fruits.indexOf("banana"); // Gibt 1 zurück (Position der "Banane") const hasApple = fruits.includes("apple"); // Gibt wahr zurück ``` **Diese Methoden verstehen:** - **Fügt** Elemente mit `push()` (Ende) und `unshift()` (Anfang) hinzu - **Entfernt** Elemente mit `pop()` (Ende) und `shift()` (Anfang) - **Findet** Elemente mit `indexOf()` und prüft Existenz mit `includes()` - **Gibt** nützliche Werte zurück wie entfernte Elemente oder Positionsindizes ✅ Probieren Sie es selbst! Verwenden Sie die Konsole Ihres Browsers, um ein eigenes Array zu erstellen und zu manipulieren. ### 🧠 **Array-Grundlagen-Check: Organisieren Sie Ihre Daten** **Testen Sie Ihr Verständnis von Arrays:** - Warum glauben Sie, dass Arrays bei 0 statt bei 1 zu zählen beginnen? - Was passiert, wenn Sie versuchen, einen Index zuzugreifen, der nicht existiert (z.B. `arr[100]` in einem 5-Element-Array)? - Können Sie drei reale Anwendungsszenarien nennen, in denen Arrays nützlich sind? ```mermaid stateDiagram-v2 [*] --> EmptyArray: const arr = [] EmptyArray --> WithItems: Elemente hinzufügen WithItems --> Accessing: Indizes verwenden Accessing --> Modifying: Werte ändern Modifying --> Processing: Methoden verwenden WithItems --> WithItems: push(), unshift() Processing --> Processing: pop(), shift() note right of Accessing Nullbasierte Indexierung arr[0] = erstes Element end note note right of Processing Eingebaute Methoden Dynamische Operationen end note ``` > **Praxisbezug:** Arrays sind überall in der Programmierung! Social-Media-Feeds, Einkaufswagen, Fotogalerien, Wiedergabelisten – hinter den Kulissen sind sie alle Arrays! ## Schleifen Denken Sie an die berühmte Strafe aus Charles Dickens’ Romanen, bei der Schüler wiederholt Sätze auf eine Tafel schreiben mussten. Stellen Sie sich vor, Sie könnten einfach jemandem sagen „Schreibe diesen Satz 100 Mal“ und es würde automatisch erledigt werden. Genau das tun Schleifen für Ihren Code. Schleifen sind wie ein unermüdlicher Assistent, der Aufgaben fehlerfrei wiederholen kann. Egal ob Sie jedes Element in einem Warenkorb prüfen oder alle Fotos in einem Album anzeigen müssen – Schleifen erledigen die Wiederholung effizient. JavaScript bietet mehrere Arten von Schleifen zur Auswahl. Lassen Sie uns jede untersuchen und verstehen, wann man sie einsetzt. ```mermaid flowchart TD A["🔄 Schleifentypen"] --> B["For-Schleife"] A --> C["While-Schleife"] A --> D["For...of-Schleife"] A --> E["forEach-Methode"] B --> B1["Bekannte Iterationen"] B --> B2["Zählerbasiert"] B --> B3["for(init; Bedingung; Inkrement)"] C --> C1["Unbekannte Iterationen"] C --> C2["Bedingungsbasiert"] C --> C3["while(Bedingung)"] D --> D1["Modern ES6+"] D --> D2["Array-Iteration"] D --> D3["for(Element von array)"] E --> E1["Funktionaler Stil"] E --> E2["Array-Methode"] E --> E3["array.forEach(rückruf)"] F["⏰ Wann verwenden"] --> F1["For: Zählen, Indizes"] F --> F2["While: Benutzereingabe, Suche"] F --> F3["For...of: Einfache Iteration"] F --> F4["forEach: Funktionale Programmierung"] style A fill:#e3f2fd style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 style E fill:#e0f2f1 style F fill:#fce4ec ``` ### For-Schleife Die `for`-Schleife ist wie ein Timer – Sie wissen genau, wie oft etwas passieren soll. Sie ist super organisiert und vorhersehbar, was sie perfekt macht, wenn Sie mit Arrays arbeiten oder Dinge zählen müssen. **Aufbau einer For-Schleife:** | Komponente | Zweck | Beispiel | |-----------|---------|----------| | **Initialisierung** | Startpunkt setzen | `let i = 0` | | **Bedingung** | Wann fortfahren | `i < 10` | | **Inkrement** | Wie aktualisieren | `i++` | ```javascript // Zählen von 0 bis 9 for (let i = 0; i < 10; i++) { console.log(`Count: ${i}`); } // Praktischeres Beispiel: Verarbeitung von Punkten const testScores = [85, 92, 78, 96, 88]; for (let i = 0; i < testScores.length; i++) { console.log(`Student ${i + 1}: ${testScores[i]}%`); } ``` **Schritt für Schritt, das passiert hier:** - **Initialisiert** die Zählvariable `i` mit 0 am Anfang - **Prüft** vor jeder Iteration die Bedingung `i < 10` - **Führt** den Codeblock aus, wenn die Bedingung wahr ist - **Erhöht** `i` nach jeder Iteration um 1 mit `i++` - **Stoppt**, wenn die Bedingung falsch wird (wenn `i` 10 erreicht) ✅ Führen Sie diesen Code in der Browser-Konsole aus. Was passiert, wenn Sie kleine Änderungen an Zähler, Bedingung oder Iterationsausdruck vornehmen? Können Sie ihn rückwärts laufen lassen und einen Countdown erstellen? ### 🗓️ **For-Schleifen-Mastery-Check: Kontrollierte Wiederholung** **Überprüfen Sie Ihr Verständnis der for-Schleife:** - Was sind die drei Teile einer for-Schleife und was macht jeder Teil? - Wie können Sie ein Array rückwärts durchlaufen? - Was passiert, wenn Sie die Inkrementierung (`i++`) vergessen? ```mermaid flowchart TD A["🚀 Starte For-Schleife"] --> B["Initialisieren: let i = 0"] B --> C{"Bedingung: i < array.length?"} C -->|true| D["Codeblock ausführen"] D --> E["Inkrementieren: i++"] E --> C C -->|false| F["✅ Schleife beenden"] G["📋 Übliche Muster"] --> G1["for(let i=0; i G2["for(let i=n-1; i>=0; i--)"] G --> G3["for(let i=0; i **Schleifenweisheit:** For-Schleifen sind perfekt, wenn Sie genau wissen, wie oft Sie etwas wiederholen müssen. Sie sind die gebräuchlichste Wahl bei der Verarbeitung von Arrays! ### While-Schleife Die `while`-Schleife ist wie „mach weiter, bis...“ – Sie wissen vielleicht nicht genau, wie oft sie läuft, aber Sie wissen, wann sie aufhören soll. Sie ist perfekt, um z.B. Benutzereingaben zu erfragen, bis der Benutzer liefert, was Sie brauchen, oder Daten zu durchsuchen, bis Sie gefunden haben, was Sie suchen. **Merkmale der While-Schleife:** - **Führt** aus, solange die Bedingung wahr ist - **Erfordert** manuelle Verwaltung von Zählvariablen - **Prüft** die Bedingung vor jeder Iteration - **Risiko** von Endlosschleifen, wenn die Bedingung nie falsch wird ```javascript // Einfaches Zählbeispiel let i = 0; while (i < 10) { console.log(`While count: ${i}`); i++; // Nicht vergessen zu inkrementieren! } // Praktischeres Beispiel: Verarbeitung von Benutzereingaben let userInput = ""; let attempts = 0; const maxAttempts = 3; while (userInput !== "quit" && attempts < maxAttempts) { userInput = prompt(`Enter 'quit' to exit (attempt ${attempts + 1}):`); attempts++; } if (attempts >= maxAttempts) { console.log("Maximum attempts reached!"); } ``` **Verstehen Sie diese Beispiele:** - **Verwaltet** die Zählvariable `i` manuell im Schleifenkörper - **Erhöht** den Zähler, um Endlosschleifen zu verhindern - **Demonstriert** den praktischen Einsatz mit Benutzereingabe und Limitierung der Versuche - **Enthält** Sicherheitsmechanismen, um endlose Ausführungen zu vermeiden ### ♾️ **While-Schleifen-Weisheits-Check: Bedingungsbasierte Wiederholung** **Testen Sie Ihr Verständnis der while-Schleife:** - Was ist die größte Gefahr bei der Verwendung von while-Schleifen? - Wann würden Sie eine while-Schleife einer for-Schleife vorziehen? - Wie kann man Endlosschleifen verhindern? ```mermaid flowchart LR A["🔄 While vs For"] --> B["While-Schleife"] A --> C["For-Schleife"] B --> B1["Unbekannte Iterationen"] B --> B2["Bedingungsgetrieben"] B --> B3["Benutzereingabe, Suche"] B --> B4["⚠️ Risiko: Endlosschleifen"] C --> C1["Bekannte Iterationen"] C --> C2["Zählergetrieben"] C --> C3["Array-Verarbeitung"] C --> C4["✅ Sicher: vorhersehbares Ende"] D["🛡️ Sicherheitstipps"] --> D1["Immer Bedingungsvariable ändern"] D --> D2["Fluchtbedingungen einbauen"] D --> D3["Maximale Iterationsgrenzen setzen"] style A fill:#e3f2fd style B fill:#fff3e0 style C fill:#e8f5e8 style D fill:#ffebee ``` > **Sicherheit zuerst:** While-Schleifen sind mächtig, benötigen aber sorgfältiges Bedingungsmanagement. Stellen Sie immer sicher, dass Ihre Schleifenbedingung irgendwann falsch wird! ### Moderne Alternativen zu Schleifen JavaScript bietet moderne Schleifensyntax, die Ihren Code lesbarer und weniger fehleranfällig macht. **For...of-Schleife (ES6+):** ```javascript const colors = ["red", "green", "blue", "yellow"]; // Moderner Ansatz - sauberer und sicherer for (const color of colors) { console.log(`Color: ${color}`); } // Vergleich mit traditioneller for-Schleife for (let i = 0; i < colors.length; i++) { console.log(`Color: ${colors[i]}`); } ``` **Wichtige Vorteile von for...of:** - **Eliminiert** die Indexverwaltung und potenzielle Off-by-One-Fehler - **Bietet** direkten Zugriff auf Array-Elemente - **Verbessert** die Lesbarkeit und reduziert Syntaxkomplexität **forEach-Methode:** ```javascript const prices = [9.99, 15.50, 22.75, 8.25]; // Verwendung von forEach für einen funktionalen Programmierstil prices.forEach((price, index) => { console.log(`Item ${index + 1}: $${price.toFixed(2)}`); }); // forEach mit Pfeilfunktionen für einfache Operationen prices.forEach(price => console.log(`Price: $${price}`)); ``` **Was Sie über forEach wissen sollten:** - **Führt** eine Funktion für jedes Array-Element aus - **Bietet** sowohl Elementwert als auch Index als Parameter - **Kann** nicht vorzeitig abgebrochen werden (im Gegensatz zu traditionellen Schleifen) - **Gibt** undefined zurück (erstellt kein neues Array) ✅ Warum würden Sie eine for-Schleife anstelle einer while-Schleife wählen? 17.000 Nutzer auf StackOverflow hatten dieselbe Frage, und einige Meinungen [könnten für Sie interessant sein](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript). ### 🎨 **Moderner Schleifen-Syntax-Check: ES6+ annehmen** **Bewerten Sie Ihr modernes JavaScript-Verständnis:** - Was sind die Vorteile von `for...of` gegenüber traditionellen for-Schleifen? - Wann würden Sie trotzdem traditionelle for-Schleifen bevorzugen? - Was ist der Unterschied zwischen `forEach` und `map`? ```mermaid quadrantChart title Schleifenauswahl-Leitfaden x-axis Traditionell --> Modern y-axis Einfach --> Komplex quadrant-1 Modern Komplex quadrant-2 Traditionell Komplex quadrant-3 Traditionell Einfach quadrant-4 Modern Einfach Traditionelle For-Schleife: [0.2, 0.7] While-Schleife: [0.3, 0.6] For...of: [0.8, 0.3] forEach: [0.9, 0.4] Array-Methoden: [0.8, 0.8] ``` > **Moderner Trend:** ES6+ Syntax wie `for...of` und `forEach` wird die bevorzugte Methode für Array-Iteration, weil sie sauberer und weniger fehleranfällig ist! ## Schleifen und Arrays Kombinieren Sie Arrays mit Schleifen, schaffen Sie leistungsstarke Möglichkeiten zur Datenverarbeitung. Dieses Paar ist grundlegend für viele Programmieraufgaben, vom Anzeigen von Listen bis zur Berechnung von Statistiken. **Traditionelle Array-Verarbeitung:** ```javascript const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; // Klassische for-Schleifen-Methode for (let i = 0; i < iceCreamFlavors.length; i++) { console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`); } // Moderne for...of-Methode for (const flavor of iceCreamFlavors) { console.log(`Available flavor: ${flavor}`); } ``` **So funktioniert dieser Ansatz:** - **Verwendet** die Array-Länge, um die Schleifengrenze zu bestimmen - **Greift** auf Elemente per Index in traditionellen for-Schleifen zu - **Bietet** direkten Elementzugriff in for...of-Schleifen - **Verarbeitet** jedes Array-Element genau einmal **Praktisches Beispiel zur Datenverarbeitung:** ```javascript const studentGrades = [85, 92, 78, 96, 88, 73, 89]; let total = 0; let highestGrade = studentGrades[0]; let lowestGrade = studentGrades[0]; // Verarbeite alle Noten mit einer einzigen Schleife for (let i = 0; i < studentGrades.length; i++) { const grade = studentGrades[i]; total += grade; if (grade > highestGrade) { highestGrade = grade; } if (grade < lowestGrade) { lowestGrade = grade; } } const average = total / studentGrades.length; console.log(`Average: ${average.toFixed(1)}`); console.log(`Highest: ${highestGrade}`); console.log(`Lowest: ${lowestGrade}`); ``` **So funktioniert dieser Code:** - **Initialisiert** Variablen zur Verfolgung von Summe und Extremen - **Verarbeitet** jede Note in einer einzigen effizienten Schleife - **Summiert** zur Berechnung des Durchschnitts - **Verfolgt** höchste und niedrigste Werte während der Iteration - **Berechnet** abschließende Statistiken nach Schleifenende ✅ Experimentieren Sie mit dem Durchlaufen eines eigenen Arrays in der Konsole Ihres Browsers. ```mermaid flowchart TD A["📦 Array-Daten"] --> B["🔄 Schleifenverarbeitung"] B --> C["📈 Ergebnisse"] A1["[85, 92, 78, 96, 88]"] --> A B --> B1["Gesamtsumme berechnen"] B --> B2["Min/Max finden"] B --> B3["Bedingungen zählen"] B --> B4["Daten transformieren"] C --> C1["Durchschnitt: 87.8"] C --> C2["Höchster: 96"] C --> C3["Bestanden: 5/5"] C --> C4["Noten"] D["⚡ Verarbeitungsmuster"] --> D1["Akkumulation (Summe)"] D --> D2["Vergleich (Min/Max)"] D --> D3["Filterung (Bedingungen)"] D --> D4["Abbildung (Transformation)"] style A fill:#e3f2fd style B fill:#fff3e0 style C fill:#e8f5e8 style D fill:#f3e5f5 ``` --- ## GitHub Copilot Agent Challenge 🚀 Verwenden Sie den Agentenmodus, um die folgende Herausforderung zu lösen: **Beschreibung:** Erstellen Sie eine umfassende Datenverarbeitungsfunktion, die Arrays und Schleifen kombiniert, um einen Datensatz zu analysieren und aussagekräftige Erkenntnisse zu generieren. **Aufgabe:** Erstellen Sie eine Funktion namens `analyzeGrades`, die ein Array von Studenten-Notenobjekten (jedes mit den Eigenschaften name und score) entgegennimmt und ein Objekt mit Statistiken zurückgibt, darunter höchste Punktzahl, niedrigste Punktzahl, Durchschnittspunktzahl, Anzahl der Studenten, die bestanden haben (Punktzahl >= 70), und ein Array der Namen der Studenten, die über dem Durchschnitt liegen. Verwenden Sie in Ihrer Lösung mindestens zwei verschiedene Schleifentypen. Erfahren Sie mehr über den [Agentenmodus](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode). ## 🚀 Herausforderung JavaScript bietet mehrere moderne Array-Methoden, die traditionelle Schleifen für bestimmte Aufgaben ersetzen können. Erkunde [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [filter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) und [reduce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce). **Deine Herausforderung:** Überarbeite das Beispiel der Schülernoten mit mindestens drei verschiedenen Array-Methoden. Achte darauf, wie viel sauberer und lesbarer der Code mit modernem JavaScript-Syntax wird. ## Quiz nach der Vorlesung [Quiz nach der Vorlesung](https://ff-quizzes.netlify.app/web/quiz/14) ## Wiederholung & Selbststudium Arrays in JavaScript haben viele Methoden, die extrem nützlich für die Datenmanipulation sind. [Lies diese Methoden nach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) und probiere einige davon aus (wie push, pop, slice und splice) an einem selbst erstellten Array. ## Aufgabe [Loop an Array](assignment.md) --- ## 📊 **Deine Zusammenfassung zum Arrays- & Loops-Werkzeugkasten** ```mermaid graph TD A["🎯 Arrays & Schleifen Beherrschung"] --> B["📦 Array Grundlagen"] A --> C["🔄 Schleifentypen"] A --> D["🔗 Datenverarbeitung"] A --> E["🎨 Moderne Techniken"] B --> B1["Erstellung: [ ]"] B --> B2["Indexierung: arr[0]"] B --> B3["Methoden: push, pop"] B --> B4["Eigenschaften: length"] C --> C1["For: Bekannte Iterationen"] C --> C2["While: Bedingungsbasiert"] C --> C3["For...of: Direkter Zugriff"] C --> C4["forEach: Funktional"] D --> D1["Berechnung von Statistiken"] D --> D2["Datenumwandlung"] D --> D3["Filtern & Suchen"] D --> D4["Echtzeitverarbeitung"] E --> E1["Pfeilfunktionen"] E --> E2["Methodenverkettung"] E --> E3["Destrukturierung"] E --> E4["Template-Strings"] F["💡 Hauptvorteile"] --> F1["Effiziente Datenverarbeitung"] F --> F2["Reduzierte Code-Wiederholung"] F --> F3["Skalierbare Lösungen"] F --> F4["Sauberere Syntax"] style A fill:#e3f2fd style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 style E fill:#e0f2f1 style F fill:#fce4ec ``` --- ## 🚀 Deine Timeline zur Arrays- & Loops-Meisterschaft ### ⚡ **Das kannst du in den nächsten 5 Minuten tun** - [ ] Erstelle ein Array deiner Lieblingsfilme und greife auf spezifische Elemente zu - [ ] Schreibe eine for-Schleife, die von 1 bis 10 zählt - [ ] Probiere die Herausforderung mit modernen Array-Methoden aus der Lektion - [ ] Übe Array-Indexierung in deiner Browser-Konsole ### 🎯 **Das kannst du in dieser Stunde erreichen** - [ ] Beende das Quiz nach der Lektion und wiederhole schwierige Konzepte - [ ] Baue den umfassenden Notenanalysator aus der GitHub Copilot-Herausforderung - [ ] Erstelle einen einfachen Warenkorb, der Artikel hinzufügt und entfernt - [ ] Übe das Konvertieren zwischen verschiedenen Schleifentypen - [ ] Experimentiere mit Array-Methoden wie `push`, `pop`, `slice` und `splice` ### 📅 **Deine einwöchige Reise zur Datenverarbeitung** - [ ] Beende die Aufgabe „Loop an Array“ mit kreativen Erweiterungen - [ ] Erstelle eine To-Do-Liste-App mit Arrays und Schleifen - [ ] Baue einen einfachen Statistikrechner für numerische Daten - [ ] Übe mit [MDN Array-Methoden](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) - [ ] Baue eine Fotogalerie- oder Musik-Playlist-Oberfläche - [ ] Erkunde funktionale Programmierung mit `map`, `filter` und `reduce` ### 🌟 **Deine einmonatige Transformation** - [ ] Meistere fortgeschrittene Array-Operationen und Performance-Optimierung - [ ] Baue ein vollständiges Dashboard zur Datenvisualisierung - [ ] Trage zu Open-Source-Projekten im Bereich Datenverarbeitung bei - [ ] Bringe jemand anderem Arrays und Schleifen mit praktischen Beispielen bei - [ ] Erstelle eine persönliche Bibliothek wiederverwendbarer Datenverarbeitungsfunktionen - [ ] Erkunde Algorithmen und Datenstrukturen, die auf Arrays basieren ### 🏆 **Endgültiger Check-in für Datenverarbeitungs-Champions** **Feiere deine Arrays- und Schleifen-Meisterschaft:** - Was ist die nützlichste Array-Operation, die du für reale Anwendungen gelernt hast? - Welcher Schleifentyp fühlt sich für dich am natürlichsten an und warum? - Wie hat das Verständnis von Arrays und Schleifen deinen Umgang mit der Organisation von Daten verändert? - Welche komplexe Datenverarbeitungsaufgabe möchtest du als nächstes angehen? ```mermaid journey title Ihre Datenverarbeitung Entwicklung section Heute Array Verwirrung: 3: Sie Schleifen Grundlagen: 4: Sie Index Verständnis: 5: Sie section Diese Woche Methoden Beherrschung: 4: Sie Effiziente Verarbeitung: 5: Sie Moderne Syntax: 5: Sie section Nächster Monat Komplexe Algorithmen: 5: Sie Leistungsoptimierung: 5: Sie Anderen Lehren: 5: Sie ``` > 📦 **Du hast die Macht der Datenorganisation und -verarbeitung freigeschaltet!** Arrays und Schleifen sind die Grundlage fast jeder Anwendung, die du je bauen wirst. Von einfachen Listen bis zu komplexer Datenanalyse hast du jetzt die Werkzeuge, um Informationen effizient und elegant zu handhaben. Jede dynamische Website, jede mobile App und jede datengetriebene Anwendung beruht auf diesen grundlegenden Konzepten. Willkommen in der Welt der skalierbaren Datenverarbeitung! 🎉 --- **Haftungsausschluss**: Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir um Genauigkeit bemüht sind, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner Ursprungssprache ist als maßgebliche Quelle zu betrachten. Bei wichtigen Informationen wird eine professionelle menschliche Übersetzung empfohlen. Für Missverständnisse oder Fehlinterpretationen, die durch die Nutzung dieser Übersetzung entstehen, übernehmen wir keine Haftung.