Implementierung der Zusammenfassung

Einführung

In diesem Lab, das in der hektischen Start-up Szene von "FinTech Valley" spielt, betreten Sie die Rolle von Alex, einem aufstrebenden Softwareingenieur, der mit der Verbesserung des Finanzierungssystems für ein schnell wachsendes Tech-Unternehmen betraut ist. Das Finanzteam der Firma benötigt eine dynamische Möglichkeit, den Gesamtfinanzzustand der Organisation zu überblicken. Ihr Ziel ist es, eine Funktion in ihrer bestehenden webbasierten Buchhaltung Anwendung zu implementieren, die das Gesamt-Einkommen, die Gesamtausgaben und den Netto-Saldo berechnet und anzeigt, um so aktuelle Finanzinformationen zu liefern.

Wissenspunkte:

• Array.prototype.filter()
• Array.prototype.reduce()

Filtern und Reduzieren

Die Methoden Array.prototype.filter() und Array.prototype.reduce() in JavaScript sind leistungsstarke Werkzeuge für die Manipulation von Arrays, die die Datenverarbeitung effizienter und präziser machen. Diese Methoden werden verwendet, um Elemente in einem Array zu filtern und die Werte von Array-Elementen zu akkumulieren.

Filtern

Die filter()-Methode erstellt ein neues Array mit allen Elementen, die die von der bereitgestellten Funktion implementierte Prüfung bestehen. Sie verändert das ursprüngliche Array nicht, sondern gibt ein neues Array zurück.

Syntax:

let result = array.filter(function (element, index, array) {
  // Prüfbedingung
  return true; // oder false
});

• element: Das aktuelle Element, das im Array verarbeitet wird.
• index (optional): Der Index des aktuellen Elements.
• array (optional): Das Array, auf dem filter aufgerufen wird.

Beispielsweise das Filtern von Zahlen größer als 10.

let numbers = [5, 12, 8, 130, 44];
let filtered = numbers.filter(function (number) {
  return number > 10;
});
console.log(filtered); // Ausgabe: [12, 130, 44]

Reduzieren

Die reduce()-Methode führt eine Reduzierfunktion (die Sie bereitstellen) auf jedem Element des Arrays aus und liefert einen einzelnen Ausgabewert.

Syntax:

let result = array.reduce(function (
  accumulator,
  currentValue,
  currentIndex,
  array
) {
  // Geben Sie das akkumulierte Ergebnis zurück
  return accumulator + currentValue;
}, initialValue);

• accumulator: Akkumuliert die Rückgabewerte der Callback-Funktion; es ist der zuvor zurückgegebene akkumulierte Wert bei der letzten Aufrufung der Callback-Funktion oder initialValue, wenn angegeben.
• currentValue: Das aktuelle Element, das im Array verarbeitet wird.
• currentIndex (optional): Der Index des aktuellen Elements, das verarbeitet wird.
• array (optional): Das Array, auf dem reduce aufgerufen wurde.

Beispielsweise die Berechnung der Summe aller Zahlen in einem Array.

let numbers = [5, 12, 8, 130, 44];
let total = numbers.reduce(function (accumulator, number) {
  return accumulator + number;
}, 0);
console.log(total); // Ausgabe: 199

Im Gedanken an die Verwendung dieser beiden Methoden ist der nächste Schritt, die Summe Ihres Einkommens und Ihrer Ausgaben zu berechnen.

Implementieren der Summenberechnung-Logik

In diesem Schritt implementieren Sie die Logik, um das Gesamt-Einkommen, die Gesamtausgaben und den Saldo zu berechnen. Dies umfasst das Hinzufügen von JavaScript-Funktionen, die über die Transaktionsaufzeichnungen iterieren, das Einkommen und die Ausgaben summieren und den Netto-Saldo berechnen.

Schreiben Sie Folgendes in script.js:

document.addEventListener("DOMContentLoaded", function () {
  const updateSummary = () => {
    const totalIncome = records
      .filter((record) => record.type === "income")
      .reduce((acc, record) => acc + parseFloat(record.amount), 0);
    const totalExpense = records
      .filter((record) => record.type === "expense")
      .reduce((acc, record) => acc + parseFloat(record.amount), 0);
    const balance = totalIncome - totalExpense;

    totalIncomeEl.textContent = `Total Income: ${totalIncome}`;
    totalExpenseEl.textContent = `Total Expense: ${totalExpense}`;
    balanceEl.textContent = `Balance: ${balance}`;
  };

  // Funktion, um Aufzeichnungen in localStorage zu speichern und die Benutzeroberfläche zu aktualisieren
  const saveRecords = () => {
    localStorage.setItem("records", JSON.stringify(records));
    renderRecords();
    updateSummary();
  };
  renderRecords();
  updateSummary();
});

Diese JavaScript-Funktion, updateSummary, berechnet das Gesamt-Einkommen und die Gesamtausgaben aus dem records-Array und aktualisiert den Saldo. Anschließend aktualisiert sie den Textinhalt der jeweiligen HTML-Elemente im Summenabschnitt.

Zusammenfassung

In diesem Lab haben Sie eine Reise durch die Finanzlandschaft eines Startups in "FinTech Valley" unternommen. Sie haben die Rolle von Alex gespielt und ein webbasiertes Buchhaltungstool verbessert, um Echtzeit-Finanzsummarien bereitzustellen. Durch die Integration eines dynamischen Summenfeatures haben Sie den Finanzteam ermöglicht, sofortige Einblicke in den finanziellen Status der Firma zu erhalten, was die Macht der Kombination von HTML, CSS und JavaScript zur Schaffung interaktiver und informativer Webanwendungen illustriert. Durch diese Erfahrung haben Sie gelernt, wie Sie mit JavaScript die DOM manipulieren und Ihren Verständnis der Echtzeit-Anwendungsentwicklung verbessert.