map、filter、reduce 能简化逻辑、提升可读性与可靠性:map 用于批量转换并返回新数组;filter 显式表达筛选逻辑,自动跳过空值;reduce 适用于统计、分组等累积操作;三者可链式组合完成完整数据处理流程。
直接用 map、filter、reduce 这类数组方法,能大幅简化逻辑、减少出错、提升可读性,比手写 for 循环更可靠也更高效。
用 map 做批量转换,避免手动遍历
map 专用于“对每个元素做同一件事”,比如格式化、字段提取、单位换算。它不修改原数组,返回新数组,天然支持不可变编程习惯。
- 把用户列表转成纯 ID 数组:
users.map(u => u.id) - 给每条数据加序号:
list.map((item, i) => ({ ...item, index: i + 1 })) - 嵌套结构深层转换:比如二维数组转表格行,
data.map(row => row.map(cell => `<td>${cell}</td>`).join(''))
用 filter 精准筛选,替代条件判断+push
filter 把“要不要留下”这个逻辑显式表达出来,代码意图一目了然,且自动跳过 undefined 或 null 元素。
- 筛出价格低于 100 且有库存的商品:
products.filter(p => p.price - 按字段去重(如去重用户名):
arr.filter((item, i) => arr.findIndex(u => u.name === item.name) === i),或配合 Set 更简洁 - 布尔值过滤:
[1, 0, '', 'hello', null, undefined].filter(Boolean)→[1, 'hello']
用 reduce 统计、分组、组装复杂结构
reduce 是通用聚合工具,适合需要累积状态的场景,比如求和、分组、构建映射表、扁平化嵌套数组。
- 计算平均年龄:
users.reduce((sum, u) => sum + u.age, 0) / users.length - 按类别分组:
users.reduce((acc, u) => { (acc[u.category] ||= []).push(u); return acc; }, {}) - 扁平化二维数组:
matrix.reduce((flat, row) => flat.concat(row), [])
组合使用,链式表达完整流程
多个方法可以连用,一次调用完成过滤→转换→聚合,逻辑清晰、中间无临时变量、便于调试。
- 从用户列表中取成年用户的姓名并转大写:
users.filter(u => u.age >= 18).map(u => u.name.toUpperCase()) - 统计各城市订单数:
orders.map(o => o.city).reduce((count, city) => { count[city] = (count[city] || 0) + 1; return count; }, {})

















