数组遍历实战项目聚焦四类核心任务：任务1用forEach打印商品名，避免for...in；任务2用filter().map()生成在库商品价格列表，禁用forEach手动push；任务3用reduce计算库存总价；任务4用find查找高价数码产品，并延伸some/every用法；最后结合DOM渲染与两个易错点（索引漂移、异步陷阱）完成闭环训练。
直接上手做一个能覆盖主流场景的数组遍历实战项目，重点不在炫技，而在理清每种方法“为什么用”和“怎么不出错”。下面是一个结构清晰、可立即运行的综合演练方案，包含数据准备、四类核心任务、对应写法对比和关键避坑提示。
一、准备真实可用的数据源
别用 [1,2,3] 这类占位符。用贴近业务的示例，比如商品列表：
const products = [
{ id: 1, name: "无线耳机", price: 299, category: "数码", inStock: true },
{ id: 2, name: "保温杯", price: 89, category: "家居", inStock: false },
{ id: 3, name: "机械键盘", price: 599, category: "数码", inStock: true },
{ id: 4, name: "折叠伞", price: 45, category: "户外", inStock: true }
];
二、完成四个典型任务并对比写法
每个任务都给出两种以上实现方式，标出适用理由：
-
任务1：打印所有商品名称（只遍历，不改数据）
✅ 推荐forEach：语义明确，代码干净。
⚠️ 避免for...in：它遍历对象属性名，对数组会出错（可能遍历到原型方法）。 -
任务2：生成新数组——所有在库商品的价格列表
✅ 推荐filter().map()组合：先筛再映射，逻辑分离，易读易测。
❌ 不要用forEach手动 push：容易漏初始化空数组，且无法链式调用。 -
任务3：计算库存总价（聚合计算）
✅ 必用reduce：专为“多变一”设计，一行解决。
? 写法：products.reduce((sum, p) => p.inStock ? sum + p.price : sum, 0) -
任务4：查找第一个价格超 300 的数码产品
✅ 用find：直接返回匹配项，不建新数组，效率高。
? 补充：想查是否存在？用some；想查是否全部满足？用every。
三、加入 DOM 渲染闭环
把数据操作和页面展示连起来，才算真正“实战”：
- 用
for...of遍历products，为每个商品创建<li>元素； - 用
textContent设置文本内容，避免 XSS 风险； - 用
appendChild追加到已有的<ul id="product-list"></ul>中。
这样就把数组遍历、条件判断、DOM 操作全串起来了，不是纸上谈兵。
四、刻意练习两个易错点
光会写不够，得知道哪里容易翻车：
-
索引漂移问题：想删除数组中所有缺货商品，不能正向
forEach + splice，必须倒序for循环或用filter生成新数组； -
异步遍历陷阱：循环内发请求，用
forEach无法await，必须改用for...of或for循环。
