如何在JavaScript中实现购物车功能并添加商品？

在JavaScript中实现购物车功能通常涉及到数组、对象以及事件处理。下面是一个简单的步骤说明：

1. **创建购物车数据结构**：你可以用一个JavaScript对象来表示购物车，每个商品作为一个键值对，其中键通常是商品ID，值是一个包含价格、名称等信息的对象。

let cart = {};

2. **添加商品**：定义一个函数`addProduct`，接收商品ID、名称和价格作为参数。如果商品ID已存在，更新其数量；否则，添加新的商品到购物车。

function addProduct(id, name, price) {
    if (cart[id]) {
        cart[id].quantity++;
    } else {
        cart[id] = { id, name, price, quantity: 1 };
    }
}

3. **显示购物车内容**：可以定义一个`displayCart`函数，遍历购物车对象，打印出所有商品的信息。

function displayCart() {
    let totalCost = 0;
    for (const product in cart) {
        const item = cart[product];
        console.log(`商品ID: ${item.id}, 名称: ${item.name}, 价格: ${item.price} 元, 数量: ${item.quantity}`);
        totalCost += item.price * item.quantity;
    }
    console.log('总价:', totalCost);
}

4. **添加按钮事件监听**：在HTML页面上为添加商品按钮绑定点击事件，调用上述的`addProduct`函数，并在需要的时候更新购物车显示。

<button onclick="addProduct('1', '商品A', 10)">添加商品A</button>
<button onclick="addProduct('2', '商品B', 20)">添加商品B</button>