Arrays und Objekte

Einführung

In diesem Lab folgen wir Alex weiter auf ihrem Weg als Webdesigner bei einem Tech-Startup. Die Szene spielt sich im Arbeitsbereich des Entwicklungsteams ab, wo Alex die Aufgabe hat, den persönlichen Finanztracker zu verbessern, indem die Fähigkeit hinzugefügt wird, mehrere Finanzaufzeichnungen zu verarbeiten. Dieses entscheidende Feature erfordert von Alex, sich in die Arrays und Objekte von JavaScript zu vertiefen, wobei jede Finanzaufzeichnung als Objekt in einem Array gespeichert wird. Ziel ist es, eine dynamische und interaktive Anwendung zu erstellen, die nicht nur die Finanzdaten der Nutzer verfolgt, sondern auch effizient organisiert. Mit diesem Vorhaben möchte Alex den Nutzern einen klaren Überblick über ihre finanziellen Aktivitäten geben und die App somit nützlicher und attraktiver machen.

In diesem Lab müssen wir Buchhaltungsaufzeichnungen durch die Manipulation von Arrays und Objekten speichern. Der Schwerpunkt liegt auf dem Verständnis, wie Arrays verwendet werden, um Objekte zu speichern und wie neue Elemente zu einem Array hinzugefügt werden.

Wissenspunkte:

• Array-Manipulation (Erstellen, Durchlaufen, Hinzufügen von Elementen)
• Objekte (Erstellen von Objekten, Zugreifen auf und Festlegen von Eigenschaften)

Funktionen

In diesem Lab finden Sie einige grundlegende JavaScript-Codeausschnitte, die Ihnen helfen, die Konzepte zu verstehen. Sie können diese Ausschnitte in der Browserkonsole oder in der Node.js-Umgebung ausführen.

1. Öffnen Sie die Browserkonsole, indem Sie mit der rechten Maustaste auf die Webseite klicken und "Inspect" auswählen oder F12 drücken.
2. Öffnen Sie die Node.js-Umgebung, indem Sie den Befehl node im Terminal ausführen.

Funktion

Eine Funktion in JavaScript ist ein Codeblock, der dazu bestimmt ist, eine Aufgabe auszuführen oder Werte zu berechnen. Funktionen werden mit dem Schlüsselwort function definiert:

function greet(name) {
  return "Hello, " + name + "!";
}
console.log(greet("Alice")); // Ausgabe: "Hello, Alice!"

Hier nimmt die greet-Funktion einen Parameter name entgegen und gibt einen Gruß zurück.

Pfeilfunktion

Pfeilfunktionen, die in ES6 eingeführt wurden, bieten eine kürzere Möglichkeit, Funktionen zu schreiben. Sie eignen sich besonders gut für anonyme Funktionsausdrücke:

const greet = (name) => "Hello, " + name + "!";
console.log(greet("Bob")); // Ausgabe: "Hello, Bob!"

Pfeilfunktionen binden automatisch den this-Wert des aktuellen Kontexts, was für Callbackfunktionen und Methodenketten nützlich ist.

Array-Operationen

Ein Array in JavaScript ist ein Objekt, das verwendet wird, um mehrere Werte zu speichern.

Erstellen eines Arrays

let fruits = ["Apple", "Orange", "Cherry"];

JavaScript-Arrays sind nullbasiert: das erste Element eines Arrays befindet sich am Index 0, das zweite am Index 1 und so weiter – und das letzte Element befindet sich am Wert der Länge-Eigenschaft des Arrays minus 1.

Jeder Index entspricht einem eindeutigen Array-Element.

Wie lesen wir nun die Elemente des Arrays?

Durchlaufen eines Arrays

Verwenden Sie die forEach-Methode, um ein Array durchzulaufen.

Die forEach-Methode nimmt eine Callback-Funktion entgegen, die zwei Parameter hat: value und index.

Zum Beispiel, um jedes Element des fruits-Arrays auszugeben:

fruits.forEach(function (value, index) {
  console.log(index, value);
});

Hinzufügen von Elementen

Verwenden Sie die push-Methode, um ein Element am Ende eines Arrays hinzuzufügen.

Zum Beispiel fügen wir eine Traube zum fruits-Array hinzu.

fruits.push("Grape");
console.log(fruits);

Objekte

Objekte sind grundlegende Bausteine in JavaScript und werden verwendet, um Schlüssel-Wert-Paare zu speichern.

Erstellen eines Objekts

let person = {
  name: "Alice",
  age: 30
};

Zugreifen auf und Festlegen von Eigenschaften

Sie können auf Objekteigenschaften mit Punkt (.) oder eckigen Klammern ([]) Notation zugreifen:

console.log(person.name); // Mit Punktnotation

person["age"] = 31; // Mit eckiger Klammer Notation, um eine Eigenschaft festzulegen
console.log(person.age);

Nachdem wir das grundlegende Verwenden von Arrays und Objekten verstanden haben, können wir mit der Verbesserung des Codes des Projekts beginnen.

Erstellen und Speichern von Finanzaufzeichnungen

In diesem Schritt arbeiten Sie zusammen mit Alex, um eine Struktur für das Speichern von Finanzaufzeichnungen als Objekte in einem Array zu erstellen. Diese Einrichtung wird den Kern des Datenmanagementsystems des Finanztrackers bilden und ermöglicht dynamische Updates und Manipulationen von Finanzaufzeichnungen.

Zunächst definieren wir, wie eine Finanzaufzeichnung aussieht. Jede Aufzeichnung wird eine Beschreibung, einen Betrag und einen Typ (Einnahme oder Ausgabe) haben. Öffnen Sie Ihre script.js und beginnen Sie, indem Sie ein Array erstellen, um diese Aufzeichnungen zu speichern:

let records = [];

Als nächstes erstellen Sie eine Funktion, um neue Aufzeichnungen zu diesem Array hinzuzufügen. Jede Aufzeichnung wird ein Objekt sein:

const addRecord = (description, amount, type) => {
  records.push({ description, amount, type });
};

Sie können noch nichts auf der Seite sehen, weil wir die Funktion, die auf das Absenden hört, noch nicht abgeschlossen haben.

Definieren Sie form.addEventListener("submit", (e) => {}) in ~/project/script.js, um auf Interaktionen zu hören, wenn die Schaltfläche "Hinzufügen" geklickt wird.

// Event listener für das Formularabsenden, um eine neue Aufzeichnung hinzuzufügen
form.addEventListener("submit", (e) => {
  e.preventDefault();
  const description = document.getElementById("description").value;
  const amount = document.getElementById("amount").value;
  const type = document.getElementById("type").value;
  addRecord(description, amount, type);
});

• Die preventDefault()-Methode der Event-Schnittstelle teilt dem Benutzeroberflächen-Element mit, dass, wenn das Ereignis nicht explizit behandelt wird, die Standardaktion nicht wie normalerweise ausgeführt werden soll.
• Die value-Eigenschaft der HTMLDataElement-Schnittstelle gibt einen String zurück, der den Wert des HTML-Attributs wiedergibt.

An diesem Punkt können Sie, wenn Sie die addRecord-Funktion hinzufügen und console.log(records); hinzufügen, sehen, dass die hinzugefügten Daten in die Aufzeichnungen protokolliert werden.

Wenn wir die hinzugefügten Aufzeichnungen im Ledger anzeigen möchten, müssen wir die renderRecords-Funktion erstellen, aber bevor wir das tun, müssen wir uns mit der Template-String beschäftigen.

Template-String

Template-Strings werden mit Backticks (`) definiert und können Platzhalter im Format ${expression} enthalten, wobei expression ein beliebiger gültiger JavaScript-Ausdruck sein kann.

let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // Ausgabe: Hello, Alice!

Variableinterpolation

Template-Strings integrieren bequem Variablenwerte in den String, was die Konstruktion dynamischer Stringinformationen vereinfacht.

let age = 25;
let message = `She is ${age} years old.`;
console.log(message); // Ausgabe: She is 25 years old.

Behandlung von mehrzeiligen Strings

In traditionellem JavaScript erfordert das Bearbeiten von mehrzeiligen Strings oft die Verwendung von Backslashes oder Stringverkettung. Template-Strings bieten eine kürzere Möglichkeit, mehrzeiligen Text zu behandeln.

let poem = `Roses are red,
Violets are blue,
Sugar is sweet,
And so are you.`;
console.log(poem);

Anzeige von Finanzaufzeichnungen

Da Alex eine Möglichkeit eingerichtet hat, Finanzaufzeichnungen zu speichern, ist der nächste Schritt, diese Aufzeichnungen dynamisch auf der Webseite anzuzeigen. Sie werden lernen, wie Sie über das Array der Finanzaufzeichnungen iterieren und jede als Teil der Benutzeroberfläche des Finanztrackers anzeigen.

Dann erstellen Sie in script.js eine Funktion, um diese Aufzeichnungen darzustellen:

const renderRecords = () => {
  recordsList.innerHTML = "";
  records.forEach((record, index) => {
    const recordElement = document.createElement("div");
    recordElement.classList.add("record-item");
    recordElement.innerHTML = `
                ${record.description} - ${record.amount} (${record.type}) <button onclick="deleteRecord(${index})">Delete</button>
            `;
    recordsList.appendChild(recordElement);
  });
};

Nachdem Sie Ihre Testaufzeichnungen hinzugefügt haben, rufen Sie renderRecords auf, um sie auf der Seite anzuzeigen:

renderRecords();

Diese Funktion iteriert über das financialRecords-Array, erstellt für jede Aufzeichnung einen neuen Absatz und fügt ihn in den angegebenen Container auf der Webseite an.

Zusammenfassung

In diesem Lab haben Sie mit Alex bedeutende Fortschritte gemacht, um den persönlichen Finanztracker zu einer robusten Anwendung zu entwickeln. Indem Sie gelernt haben, Arrays und Objekte zu verwenden, können Sie die App nun dynamisch mehrere Finanzaufzeichnungen speichern und anzeigen. Dies verbessert nicht nur die Funktionalität der App, sondern führt Sie auch in die Verwaltung komplexer Datenstrukturen in JavaScript ein, eine entscheidende Fähigkeit in der Webanwendungentwicklung.

Durch diese praktische Erfahrung haben Sie gesehen, wie Arrays und Objekte zusammenarbeiten können, um Daten auf sinnvolle Weise zu organisieren und zu manipulieren. Dieses grundlegende Wissen bereitet die Grundlage für weitere Verbesserungen, wie die Hinzufügung von Interaktivität und Datenpersistenz, auf dem Weg der weiteren Entwicklung.