JavaScript数组的map和reduce是两个核心高阶函数，map用于返回新数组，reduce用于累积计算，它们的区别体现在返回值、用途和回调参数上。
JS数组map和reduce有什么区别？
返回值差异
map返回一个新数组,长度与原数组一致，reduce返回一个累积值，类型由初始值决定，可以是数字、对象、数组等。
回调参数对比
map的回调为(currentValue, index, array)，reduce的回调为(accumulator, currentValue, index, array)，多一个累加器参数。
使用场景本质
- map用于一对一的映射转换,比如将数组每一项乘以2。
- reduce用于将数组整合为单一值,比如求和、分组、扁平化。
是否修改原数组
两者都不修改原数组,但reduce在某些操作中可能通过引用修改传入的对象。
常见错误认知
- map不能替代reduce做聚合，虽然map也能拼凑，但可读性差。
- reduce可以替代map配合concat，但不如直接使用map清晰。
数组map和reduce的实战用法
map基本语法
const arr = [1, 2, 3]; const doubled = arr.map(num => num 2); // [2, 4, 6]
- 返回新数组,不会改变原数组。
- 可以链式调用,如
arr.map(...).filter(...)。
reduce基本语法
const arr = [1, 2, 3]; const sum = arr.reduce((acc, cur) => acc + cur, 0); // 6
- 初始值可选,不传则取第一个元素作为初始值，但空数组会报错。
- 建议始终提供初始值,保证代码健壮性。
常见用法示例
- 求最大值：
reduce((max, cur) => Math.max(max, cur)) - 数组去重：
reduce((acc, cur) => acc.includes(cur) ? acc : [...acc, cur], []) - 对象数组分组：按字段分组生成对象
- 扁平化二维数组：
reduce((acc, cur) => acc.concat(cur), [])
注意事项
- map的回调函数不应有副作用,避免混淆。
- reduce的回调中累加器类型需一致,否则容易出错。
实际开发中map和reduce怎么选？
映射场景优先选map
- 需要将数组转换为格式相同、长度相等的数组时，如修改对象中的某个属性。
- 代码意图明显,其他开发者一看就懂。
聚合场景必须用reduce
- 求和、求积、拼接字符串、统计频次等需求。
- 需要将数组转换为对象或不同结构的数据。
可互相替代但不推荐
- 用reduce实现map：
arr.reduce((acc, cur) => [...acc, transform(cur)], [])，但性能略差且可读性低。 - 用map模拟聚合：需要外部变量，破坏了纯函数特性。
实际项目中的选择建议
- 如果目的是生成新数组,毫不犹豫用map。
- 如果目的是从数组中提炼出一个值,用reduce。
- 如果目的不明确,先问自己：结果长度是否与原数组相等？是则map，否则reduce。
性能对比：map和reduce哪个更高效？
基准测试参考
- 在大多数浏览器中,map和reduce的耗时相差不大，map略快，因为无需处理累加器逻辑。
- 当数组长度较大时（如10万条），map的分配新数组内存开销稍高，但reduce的每次迭代回调计算更复杂，实际差异在5%以内，通常可忽略。
性能瓶颈不在方法本身
- 真正影响性能的是回调函数中的操作,比如在map里做大量DOM操作，或在reduce里做复杂对象拷贝。
-
选择合适的数据结构和算法,比纠结map和reduce性能更重要。
优化建议
- 如果必须使用循环,
for循环通常比这两个方法更快，但代码可读性下降。 - 对于高频执行场景,考虑使用
for或for...of，但日常开发优先使用高阶函数，保持代码清晰。
JS数组map reduce面试题汇总
map和reduce都能实现数组求和吗？
map不能直接实现,需要配合外部变量，不推荐，reduce是标准做法，map返回数组，reduce返回单值，用途不同。
reduce没有初始值会怎样？
当数组为空时抛出TypeError，如果数组只有一个元素且无初始值，reduce直接返回该元素，不执行回调，建议始终提供初始值，避免歧义。
如何用reduce实现map的功能？
arr.reduce((acc, cur) => { acc.push(transform(cur)); return acc; }, [])，但这样代码冗余，且每次push可能触发数组扩容，性能不如直接map，所以面试中知道即可，不要用在实际项目。
JavaScript数组的map和reduce各有不可替代的定位：map负责转换，reduce负责聚合，理解它们的区别和适用场景，比单纯记住语法更重要。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/js-array-mapreduce%e6%80%8e%e4%b9%88%e7%94%a8%ef%bc%9f-%e4%bd%bf%e7%94%a8%e5%9c%ba%e6%99%af%ef%bc%9f/
