插件窝干货文章使用数组和函数在 JavaScript 中构建初学者友好的购物车的分步指南

使用数组和函数在 JavaScript 中构建初学者友好的购物车的分步指南

购物车 itemindex const mycart 169 来源： 2024-10-18

学习新编程语言的最佳方法是创建尽可能多的项目。如果您构建专注于您所学知识的迷你项目，您将获得更顺畅的初学者体验。
我们的目标是避免“教程地狱”（即您不断观看多个教程视频而没有任何具体项目来展示您的技能的可怕地方），并建立处理大型项目所需的信心。
在本文中，我将向初学者解释如何使用基本的 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 步：使用功能构建购物车

我们将创建一个主要的购物车功能，其中包含购物车的逻辑。我们将使用闭包来确保购物车保持私密性，并且只有某些功能可以与其交互。

立即学习“Java免费学习笔记（深入）”；


const shoppingcart = () =&gt; {
  const cart = []; // the cart is a private array

  // add an item to the cart
  const additemtocart = (itemindex) =&gt; {
    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) =&gt; {
    const index = cart.indexof(itemindex);
    if (index &gt; -1) {
      cart.splice(index, 1);
    }
  };

  // get the names of items in the cart
  const getcartitems = () =&gt; {
    return cart.map(itemindex =&gt; itemnames[itemindex]);
  };

  // calculate the total price of items in the cart
  const calculatetotal = () =&gt; {
    return cart.reduce((total, itemindex) =&gt; {
      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() 函数返回的函数访问。

购物车数组是在shopping cart()内部定义的，不能从外部直接访问。但是，由于 additemtocart()、removeitemfromcart()、getcartitems() 和calculatetotal() 函数定义在同一范围内，因此它们可以与 cart 交互。
闭包是 javascript 的一项强大功能，有助于维护代码中的数据隐私和结构。

结论

通过使用基本数组和函数，您已经构建了一个功能齐全的购物车系统，可以添加、删除和计算商品总数。这个项目最棒的部分是它使用闭包来封装和管理状态，而不需要复杂的对象或类。

最终代码


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

const ShoppingCart = () =&gt; {
  const cart = [];

  const addItemToCart = (itemIndex) =&gt; {
    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) =&gt; {
    const index = cart.indexOf(itemIndex);
    if (index &gt; -1) {
      cart.splice(index, 1);
    }
  };

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

  const calculateTotal = () =&gt; {
    return cart.reduce((total, itemIndex) =&gt; {
      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());

我希望您喜欢学习，我很高兴您能够构建更多精彩的项目！

上一篇：你真的需要“useState”来处理所有事情吗？探索替代方案

下一篇：js该如何自学