Guide étape par étape pour créer un panier d'achat adapté aux débutants en JavaScript à l'aide de tableaux et de fonctions

La meilleure façon d'apprendre un nouveau langage de programmation est de créer autant de projets que possible. Vous vivrez une expérience plus fluide en tant que débutant si vous construisez des mini-projets axés sur ce que vous avez appris.
Le but est d'éviter « l'enfer des tutoriels » – cet endroit effrayant où vous continuez à regarder plusieurs vidéos de tutoriels sans avoir de projet concret pour montrer vos compétences – et également de développer la confiance nécessaire pour aborder des projets à plus grande échelle.
Dans cet article, je vais vous expliquer comment créer un système de panier d'achat en tant que débutant, en utilisant les concepts de base de Javascript.

Conditions préalables

Pour tenter ce projet, vous devez avoir une connaissance approfondie de :

• Fonctions
• Méthodes
• Tableaux

Que construire ?

Le panier aura un système où les utilisateurs pourront :

• Ajouter des articles au panier
• Supprimer les articles du panier
• Voir le contenu du panier
• Calculez le prix total des articles dans le panier

Étape 1 : configuration des données

Pour commencer, nous devons créer quelques tableaux qui contiendront les données de nos éléments. Les tableaux nécessaires spécifiquement sont :

• itemNames : Spécifie le nom de chaque élément.
• itemPrices : contient le prix que coûte chaque article.
• itemQuantities : indique la quantité d'un article spécifique disponible.
• itemInStock : Détermine si un article est en stock grâce à l'utilisation de true ou false.

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

Étape 2 : Créer le panier avec des fonctions

Nous allons créer une fonction principale de panier qui contiendra la logique du panier. Nous utiliserons des fermetures pour garantir que le panier reste privé et que seules certaines fonctions puissent interagir avec lui.

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
  };
};

Pour décomposer le code :

• addItemToCart(itemIndex) : ajoute un article au panier en fonction de son index (uniquement s'il est en stock).
• RemoveItemFromCart(itemIndex) : supprime un article du panier en utilisant son index.
• getCartItems() : renvoie le nom des articles dans le panier en utilisant map() pour convertir les index en noms.
• calculateTotal() : calcule le prix total en multipliant les prix et les quantités des articles dans le panier à l'aide de la méthode réduire().

Étape 3 : tester le panier

Un projet terminé doit être testé pour s'assurer qu'il fonctionne comme nécessaire. Nous allons tester :

• ajout d'éléments

• consultation du panier

• vérification du prix total

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

Pour décomposer le code :

• Nous créons une instance du panier en l'appelant : const monCart = shoppingCart();.
• Nous ajoutons des articles au panier en utilisant leur index du tableau itemNames : monCart.addItemToCart(0); pour l'ordinateur portable et myCart.addItemTocart(1); pour le téléphone.
• Nous utilisons getCartItems() pour imprimer les noms des articles dans le panier
• Enfin, nous calculons le prix total en utilisant calculateTotal().

Étape 4 : Supprimer des articles du panier

Un bon système de panier d'achat doit permettre à l'utilisateur de supprimer des articles du panier. Nous pouvons le faire en appelant 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 : Comprendre les fermetures dans le système de panier d'achat

Les fermetures aident le tableau de paniers à rester privé, accessible uniquement via les fonctions renvoyées par la fonction ShoppingCart().

• Le tableau de paniers est défini à l'intérieur du panier d'achat() et n'est pas accessible directement de l'extérieur. Cependant, comme les fonctions addItemTocart(), removeItemFromCart(), getCartItems() et calculateTotal() sont définies dans la même portée, elles peuvent interagir avec cart.
• Les fermetures sont une fonctionnalité puissante de JavaScript qui aide à maintenir la confidentialité et la structure des données dans votre code.

Conclusion

En utilisant des tableaux et des fonctions de base, vous avez créé un système de panier d'achat entièrement fonctionnel qui peut ajouter, supprimer et calculer les totaux des articles. La partie géniale de ce projet est qu'il utilise des fermetures pour encapsuler et gérer l'état sans nécessiter d'objets ou de classes complexes.

Code final

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());

J'espère que vous avez apprécié apprendre et je suis ravi que vous puissiez construire d'autres projets géniaux !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!