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

在网页开发领域，JavaScript是一门强大的编程语言。构建一个购物车功能是许多开发者在学习过程中想尝试的项目，它既实用又能帮助理解JavaScript的核心概念。以下将以数组和函数为基础，带您一步步创建一个简单的购物车。

初始化购物车数组

我们需要一个数组来存储购物车中的商品。在JavaScript中，可以这样初始化一个空的购物车数组：

let shoppingCart = [];

这个数组将成为我们购物车的“仓库”，后续添加的商品都会存放在这里。

创建添加商品函数

接下来，编写一个函数用于向购物车中添加商品。这个函数需要接收商品的相关信息，比如名称、价格等，并将其作为一个对象添加到购物车数组中。

function addToCart(productName, productPrice) {
    let product = {
        name: productName,
        price: productPrice
    };
    shoppingCart.push(product);
    console.log(`${productName} 已添加到购物车`);
}

调用这个函数时，就可以将商品添加到购物车数组中。

显示购物车内容

为了了解购物车中都有哪些商品，我们需要一个函数来显示购物车的内容。

function displayCart() {
    if (shoppingCart.length === 0) {
        console.log('购物车为空');
    } else {
        console.log('购物车中的商品：');
        shoppingCart.forEach((product, index) => {
            console.log(`${index + 1}. ${product.name} - $${product.price}`);
        });
    }
}

这个函数首先检查购物车是否为空，如果不为空，则遍历购物车数组并打印出每个商品的信息。

计算购物车总价

最后，创建一个函数来计算购物车中所有商品的总价。

function calculateTotal() {
    let total = 0;
    shoppingCart.forEach(product => {
        total += product.price;
    });
    console.log(`购物车总价：$${total}`);
    return total;
}

通过遍历购物车数组，将每个商品的价格累加到total变量中，就能得到购物车的总价。

通过以上步骤，我们利用JavaScript的数组和函数构建了一个简单的购物车。对于初学者来说，这是一个很好的实践项目，可以帮助您更深入地理解JavaScript的基础概念，同时为进一步开发更复杂的购物系统打下坚实的基础。