javascript数组方法是ui动态渲染的核心工具，map用于生成结构化html、filter实现动态筛选、sort控制渲染顺序、reduce完成聚合统计与分组渲染，均返回新数组且不修改原数据。
JavaScript 数组方法是驱动 UI 动态渲染的核心工具，不是单纯“存数据”，而是直接参与视图生成、筛选、排序和更新的全过程。用得好，代码更清晰、交互更流畅、维护成本更低。
用 map 生成结构化 HTML 片段
map 不改变原数组，而是返回一个新数组，特别适合把数据批量转成 DOM 节点或字符串。它天然契合“数据 → 视图”的映射逻辑。
- 对每个对象生成一个
<li>或<div class="card"> 字符串，再用 <code>join('')合并 - 配合模板字符串可读性高：
item => `<li>${item.name} - ¥${item.price}</li>` - 避免手动拼接导致的 XSS 风险：若内容含用户输入，应先做转义或改用
document.createElement+textContent - 例如搜索框监听
input事件，对商品数组执行filter(item => item.name.includes(keyword)) - 组合多个条件时可链式调用：
data.filter(byPrice).filter(byCategory).map(toHTML) - 注意：filter 返回新数组，原数据保持不变，便于撤销操作或保留原始数据源
- 数值排序别漏掉减法：
items.sort((a, b) => a.price - b.price)（升序） - 字符串排序用
localeCompare更稳妥：a.name.localeCompare(b.name) - 避免在渲染函数里反复调用 sort，建议封装为独立函数，在数据变更后统一处理
- 统计总数与金额：
data.reduce((acc, item) => ({ count: acc.count + 1, total: acc.total + item.price }), { count: 0, total: 0 }) - 分组生成嵌套结构：
data.reduce((groups, item) => { (groups[item.category] ||= []).push(item); return groups; }, {})，再遍历各组分别渲染 - 注意：reduce 的初始值类型要与累加逻辑一致，否则易出错
用 filter 实现动态列表筛选
用户输入关键词、选择价格区间、切换状态标签——这些交互背后几乎都靠 filter 实时过滤数组，再重新渲染。
用 sort 控制渲染顺序
列表默认按接口返回顺序展示，但用户常需“按价格升序”“最新上架”“销量最高”等排序方式，sort 是最直接的响应手段。
配合 reduce 做聚合类 UI 渲染
当需要统计型展示（如“共 12 件商品，总价 ¥3,899”）或分组渲染（如按分类折叠显示），reduce 比循环更语义化。
