Schritt-für-Schritt-Anleitung zum Erstellen eines anfängerfreundlichen Warenkorbs in JavaScript mithilfe von Arrays und Funktionen

Der beste Weg, eine neue Programmiersprache zu lernen, besteht darin, so viele Projekte wie möglich zu erstellen. Als Anfänger werden Sie eine reibungslosere Erfahrung machen, wenn Sie Miniprojekte erstellen, die sich auf das konzentrieren, was Sie gelernt haben.
Das Ziel besteht darin, die „Tutorial-Hölle“ zu vermeiden – den gruseligen Ort, an dem man sich ständig mehrere Tutorial-Videos ansieht, ohne ein konkretes Projekt zu haben, um seine Fähigkeiten unter Beweis zu stellen – und außerdem das nötige Selbstvertrauen aufzubauen, um größere Projekte in Angriff zu nehmen.
In diesem Artikel erkläre ich, wie Sie als Anfänger mithilfe grundlegender Javascript-Konzepte ein Warenkorbsystem erstellen können.

Voraussetzungen

Um dieses Projekt in Angriff zu nehmen, benötigen Sie fundierte Kenntnisse in:

• Funktionen
• Methoden
• Arrays

Was soll gebaut werden?

Der Warenkorb wird über ein System verfügen, mit dem Benutzer:

• Artikel zum Warenkorb hinzufügen
• Artikel aus dem Warenkorb entfernen
• Warenkorbinhalt anzeigen
• Berechnen Sie den Gesamtpreis der Artikel im Warenkorb

Schritt 1: Einrichten der Daten

Zu Beginn müssen wir einige Arrays erstellen, die die Daten für unsere Artikel enthalten. Die speziell benötigten Arrays sind:

• itemNames: Gibt den Namen jedes Elements an.
• itemPrices: Enthält den Preis, den jeder Artikel kostet.
• itemQuantities: Gibt an, wie viel von einem bestimmten Artikel verfügbar ist.
• itemInStock: Ermittelt durch die Verwendung von „true“ oder „false“, ob ein Artikel auf Lager ist.

const itemNames = ["Laptop", "Phone"];
const itemPrices = [1000, 500];
const itemQuantities = [1, 2];
const itemInStock = [true, true];

Schritt 2: Aufbau des Warenkorbs mit Funktionen

Wir werden eine Haupt-Warenkorbfunktion erstellen, die die Logik für den Warenkorb enthält. Wir werden Verschlüsse verwenden, um sicherzustellen, dass der Warenkorb privat bleibt und nur bestimmte Funktionen mit ihm interagieren können.

const ShoppingCart = () => {
  const cart = []; // The cart is a private array

  // Add an item to the cart
  const addItemToCart = (itemIndex) => {
    if (itemInStock[itemIndex]) {
      cart.push(itemIndex);
      console.log(`${itemNames[itemIndex]} added to the cart`);
    } else {
      console.log(`${itemNames[itemIndex]} is out of stock`);
    }
  };

  // Remove an item from the cart
  const removeItemFromCart = (itemIndex) => {
    const index = cart.indexOf(itemIndex);
    if (index > -1) {
      cart.splice(index, 1);
    }
  };

  // Get the names of items in the cart
  const getCartItems = () => {
    return cart.map(itemIndex => itemNames[itemIndex]);
  };

  // Calculate the total price of items in the cart
  const calculateTotal = () => {
    return cart.reduce((total, itemIndex) => {
      return total + itemPrices[itemIndex] * itemQuantities[itemIndex];
    }, 0);
  };

  return {
    addItemToCart,
    removeItemFromCart,
    getCartItems,
    calculateTotal
  };
};

Um den Code aufzuschlüsseln:

• addItemToCart(itemIndex): Fügt einen Artikel basierend auf seinem Index zum Warenkorb hinzu (nur wenn er auf Lager ist).
• removeItemFromCart(itemIndex): Entfernt einen Artikel anhand seines Index aus dem Warenkorb.
• getCartItems(): Gibt den Namen der Artikel im Warenkorb zurück, indem map() verwendet wird, um die Indizes in Namen umzuwandeln.
• berechneTotal(): Berechnet den Gesamtpreis durch Multiplikation der Preise und Mengen der Artikel im Warenkorb mithilfe der Methode Reduce().

Schritt 3: Testen des Warenkorbs

Ein fertiges Projekt sollte getestet werden, um sicherzustellen, dass es wie erforderlich funktioniert. Wir werden Folgendes testen:

• Elemente hinzufügen

• Warenkorb anzeigen

• Gesamtpreis prüfen

const myCart = ShoppingCart();

// Add a Laptop (item 0)
myCart.addItemToCart(0);

// Add a Phone (item 1)
myCart.addItemToCart(1);

// View cart contents
console.log(myCart.getCartItems()); // Output: ['Laptop', 'Phone']

// Calculate the total price
console.log(myCart.calculateTotal()); // Output: 2000

Um den Code aufzuschlüsseln:

• Wir erstellen eine Instanz des Warenkorbs, indem wir sie aufrufen: const myCart = shoppingCart();.
• Wir fügen Artikel zum Warenkorb hinzu, indem wir ihren Index aus dem itemNames-Array verwenden: myCart.addItemToCart(0); für den Laptop und myCart.addItemTocart(1); für das Telefon.
• Wir verwenden getCartItems(), um die Namen der Artikel im Warenkorb auszudrucken
• Abschließend berechnen wir den Gesamtpreis mit berechneTotal().

Schritt 4: Artikel aus dem Warenkorb entfernen

Ein gutes Warenkorbsystem muss es dem Benutzer ermöglichen, Artikel aus dem Warenkorb zu entfernen. Wir können dies tun, indem wir „removeItemFromCart().

myCart.removeItemFromCart(1); // Remove the Phone

// View the updated cart
console.log(myCart.getCartItems()); // Output: ['Laptop']

// Recalculate the total price
console.log(myCart.calculateTotal()); // Output: 1000

Bonus: Abschlüsse im Warenkorbsystem verstehen

Schließungen tragen dazu bei, dass das Warenkorb-Array privat bleibt und nur über die von der Funktion ShoppingCart() zurückgegebenen Funktionen zugänglich ist.

• Das Warenkorb-Array wird innerhalb des Warenkorbs definiert und kann nicht direkt von außen aufgerufen werden. Da jedoch die Funktionen „addItemTocart()“, „removeItemFromCart()“, „getCartItems()“ und „calcuteTotal()“ im selben Bereich definiert sind, können sie mit „cart.
“ interagieren
• Abschlüsse sind eine leistungsstarke Funktion von JavaScript, die dabei hilft, den Datenschutz und die Struktur in Ihrem Code aufrechtzuerhalten.

Abschluss

Durch die Verwendung grundlegender Arrays und Funktionen haben Sie ein voll funktionsfähiges Warenkorbsystem erstellt, das Artikel hinzufügen, entfernen und Gesamtsummen berechnen kann. Das Tolle an diesem Projekt ist, dass es Abschlüsse verwendet, um den Zustand zu kapseln und zu verwalten, ohne dass komplexe Objekte oder Klassen erforderlich sind.

Endgültiger Code

const itemNames = ["Laptop", "Phone"];
const itemPrices = [1000, 500];
const itemQuantities = [1, 2];
const itemInStock = [true, true];

const ShoppingCart = () => {
  const cart = [];

  const addItemToCart = (itemIndex) => {
    if (itemInStock[itemIndex]) {
      cart.push(itemIndex);
      console.log(`${itemNames[itemIndex]} added to the cart`);
    } else {
      console.log(`${itemNames[itemIndex]} is out of stock`);
    }
  };

  const removeItemFromCart = (itemIndex) => {
    const index = cart.indexOf(itemIndex);
    if (index > -1) {
      cart.splice(index, 1);
    }
  };

  const getCartItems = () => {
    return cart.map(itemIndex => itemNames[itemIndex]);
  };

  const calculateTotal = () => {
    return cart.reduce((total, itemIndex) => {
      return total + itemPrices[itemIndex] * itemQuantities[itemIndex];
    }, 0);
  };

  return {
    addItemToCart,
    removeItemFromCart,
    getCartItems,
    calculateTotal
  };
};

const myCart = ShoppingCart();
myCart.addItemToCart(0);
myCart.addItemToCart(1);
console.log(myCart.getCartItems());
console.log(myCart.calculateTotal());
myCart.removeItemFromCart(1);
console.log(myCart.getCartItems());
console.log(myCart.calculateTotal());

Ich hoffe, dass Ihnen das Lernen Spaß gemacht hat, und ich freue mich darauf, dass Sie weitere tolle Projekte erstellen!

Das obige ist der detaillierte Inhalt vonSchritt-für-Schritt-Anleitung zum Erstellen eines anfängerfreundlichen Warenkorbs in JavaScript mithilfe von Arrays und Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!