html按钮使用箭头数组函数加入购物车页面

HTML按钮通常用于网页设计中，当用户想要将商品添加到购物车时，会关联一些JavaScript代码来实现这个功能。为了使用箭头函数和数组方法（比如`map()`、`forEach()`），你可以这样做：

首先，在HTML中创建一个按钮元素，并给它一个唯一的ID，方便后续引用：

<button id="add-to-cart-btn" onclick=" addToCart()">加入购物车</button>

然后，在JavaScript部分，可以编写一个箭头函数`addToCart`，它接收商品信息作为参数。假设有一个商品数组`products`：

const products = [
  { id: 1, name: '产品A', quantity: 1 },
  { id: 2, name: '产品B', quantity: 0 }
];

function addToCart(item) {
  // 使用数组方法，如 map() 或 forEach()
  // 这里我们使用forEach()遍历每个商品
  products.forEach(product => {
    if (product.id === item.id) {
      product.quantity++; // 如果是同一商品，则数量加一
      console.log(`已将 ${product.name} 添加到购物车`);
    } else {
      console.log('不是同一商品');
    }
  });
}

// 当点击按钮时，传入具体的商品对象
document.getElementById('add-to-cart-btn').addEventListener('click', function() {
  const selectedProduct = { id: 1, name: '选中的商品' }; // 假设这是当前选择的商品
  addToCart(selectedProduct);
});

在这个例子中，当你点击“加入购物车”按钮时，如果商品已经在数组中，它的数量会增加；如果不在，会提示不是同一商品。