05. 数组渲染：列表、map、filter 与 reduce

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

三、知识点提醒

`map()` 适合把数据转换成 HTML 字符串。
`filter()` 适合分类、搜索、条件过滤。
`reduce()` 适合汇总数量、价格、库存等。

四、练习建议

增加“价格从低到高”排序。
给库存少于 15 的产品添加提醒样式。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/05-array-rendering.js，下面同步展示，方便学习和复制。

// 页面 05：数组渲染、筛选、统计
const products = [
  { id: 1, name: 'Classic Decking', type: 'decking', price: 58, stock: 32 },
  { id: 2, name: 'Birch Wall Panel', type: 'wall', price: 79, stock: 18 },
  { id: 3, name: 'Privacy Fencing', type: 'fence', price: 66, stock: 25 },
  { id: 4, name: 'Co-extrusion Decking', type: 'decking', price: 95, stock: 10 },
  { id: 5, name: 'White Fluted Panel', type: 'wall', price: 82, stock: 14 }
];

const list = document.querySelector('#p5-list');
const summary = document.querySelector('#p5-summary');
const filterButtons = document.querySelectorAll('[data-filter]');

function getFilteredProducts(type) {
  if (type === 'all') return products;
  return products.filter((product) => product.type === type);
}

function renderProducts(type = 'all') {
  const result = getFilteredProducts(type);
  const totalStock = result.reduce((sum, item) => sum + item.stock, 0);
  const averagePrice = result.reduce((sum, item) => sum + item.price, 0) / result.length;

  summary.textContent = `共 ${result.length} 个产品，库存合计 ${totalStock}，平均价格 $${averagePrice.toFixed(2)}`;

  list.innerHTML = result.map((product) => `
    <article class="item-card">
      <h4>${product.name}</h4>
      <p>分类：${product.type}</p>
      <p>价格：$${product.price}</p>
      <p>库存：${product.stock}</p>
    </article>
  `).join('');
}

filterButtons.forEach((button) => {
  button.addEventListener('click', () => {
    filterButtons.forEach((item) => item.classList.remove('active'));
    button.classList.add('active');
    renderProducts(button.dataset.filter);
  });
});

renderProducts();