配列と関数を使用して JavaScript で初心者に優しいショッピング カートを構築するためのステップバイステップ ガイド

新しいプログラミング言語を学ぶ最良の方法は、できるだけ多くのプロジェクトを作成することです。学んだことに焦点を当てたミニプロジェクトを作成すると、初心者としてよりスムーズに経験できるでしょう。
目標は、「チュートリアル地獄」 (スキルを示すための具体的なプロジェクトがないのに、いくつかのチュートリアル ビデオを見続ける恐ろしい場所) を回避し、大規模なプロジェクトに取り組むのに必要な自信を築くことです。
この記事では、JavaScript の基本的な概念を使用して、初心者向けにショッピング カート システムを作成する方法を説明します。

前提条件

このプロジェクトに挑戦するには、以下についての深い知識が必要です。

• 機能
• メソッド
• 配列

何を構築するか?

ショッピング カートには、ユーザーが次のことができるシステムが組み込まれます。

• 商品をカートに追加
• カートから商品を削除します
• カートの内容を表示
• カート内の商品の合計金額を計算します

ステップ 1: データのセットアップ

まず、アイテムのデータを保持する配列をいくつか作成する必要があります。特に必要な配列は次のとおりです:

• itemNames: 各アイテムの名前を指定します。
• itemPrices: 各アイテムにかかる価格が含まれます。
• itemQuantities: 特定のアイテムがどれだけ入手可能かを示します。
• itemInStock: true または false を使用してアイテムの在庫があるかどうかを判断します。

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

ステップ 2: 関数を備えたショッピング カートを構築する

カートのロジックを含むメインのショッピング カート関数を作成します。クロージャーを使用して、カートが非公開であり、特定の機能のみがカートとやり取りできるようにします。

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

コードを分解するには:

• addItemToCart(itemIndex): インデックスに基づいてアイテムをカートに追加します (在庫がある場合のみ)。
• RemoveItemFromCart(itemIndex): インデックスを使用してカートから商品を削除します。
• getCartItems(): Map() を使用してインデックスを名前に変換し、カート内のアイテムの名前を返します。
• CalculateTotal():reduce() メソッドを使用して、カート内の商品の価格と数量を乗算して合計価格を計算します。

ステップ 3: ショッピング カートのテスト

完成したプロジェクトは、必要に応じて動作することを確認するためにテストする必要があります。以下についてテストします:

• アイテムの追加

• カートを見る

• 合計金額を確認中

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

コードを分解するには:

• 次のように呼び出して、ショッピング カートのインスタンスを作成します。 const myCart = shoppingCart();.
• itemNames 配列のインデックスを使用して、アイテムをカートに追加します。 myCart.addItemToCart(0);ラップトップおよび myCart.addItemTocart(1) の場合。電話用。
• getCartItems() を使用してカート内の商品の名前を出力します
• 最後に、calculateTotal() を使用して合計価格を計算します。

ステップ 4: カートから商品を削除する

優れたショッピング カート システムでは、ユーザーがカートから商品を削除できる必要があります。これを行うには、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

ボーナス: ショッピング カート システムのクロージャについて理解する

クロージャは、カート配列をプライベートに保つのに役立ち、ShoppingCart() 関数によって返される関数を介してのみアクセスできます。

• カート配列はショッピングカート()内で定義されており、外部から直接アクセスすることはできません。ただし、addItemTocart()、removeItemFromCart()、getCartItems()、およびcalculateTotal()関数は同じスコープ内で定義されているため、カートと対話できます。
• クロージャは、コード内のデータのプライバシーと構造を維持するのに役立つ JavaScript の強力な機能です。

結論

基本的な配列と関数を使用して、アイテムの追加、削除、合計の計算ができる完全に機能するショッピング カート システムを構築しました。このプロジェクトの素晴らしい点は、複雑なオブジェクトやクラスを必要とせずに、クロージャを使用して状態をカプセル化し、管理していることです。

最終コード

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

学習を楽しんでいただければ幸いです。さらに素晴らしいプロジェクトを構築できることを楽しみにしています!

以上が配列と関数を使用して JavaScript で初心者に優しいショッピング カートを構築するためのステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。