Map与Reduce函数详解教程

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《JavaScript高阶函数Map与Reduce详解》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

JavaScript高阶函数指接受函数为参数或返回函数的函数；map对数组每项执行变换并返回等长新数组，reduce则将数组聚合为单个值，二者均不修改原数组。

JavaScript高阶函数是指接受函数作为参数、或返回函数作为结果的函数。map 和 reduce 是两个最常用、也最具代表性的高阶函数，它们不修改原数组，而是基于原数组生成新数据，让代码更简洁、可读性更强。

map：对每个元素做变换，返回等长新数组

map 接收一个回调函数，遍历数组每一项，把处理后的结果组成一个新数组返回。原数组保持不变。

• 回调函数默认接收三个参数：当前元素（item）、索引（index）、原数组（array），通常只用第一个
• 必须有返回值，否则新数组对应位置是 undefined
• 适合场景：格式转换（如提取对象属性）、数值计算（如乘以2）、字符串处理（如转大写）

示例：
const nums = [1, 2, 3];
const doubled = nums.map(x => x * 2); // [2, 4, 6]

const users = [{name: 'Alice'}, {name: 'Bob'}];
const names = users.map(u => u.name); // ['Alice', 'Bob']

reduce：把数组“压缩”成一个值，灵活但需注意初始值

reduce 接收一个“累加器函数”和一个可选的初始值，从左到右依次处理每个元素，最终返回单个结果（可以是数字、对象、数组、字符串等）。

• 累加器函数接收四个参数：上一次调用的返回值（accumulator）、当前元素（currentValue）、当前索引、原数组；最常用前两个
• 若未提供初始值，第一次调用时 accumulator 是数组第一个元素，currentValue 是第二个；空数组会报错
• 提供初始值更安全，尤其处理空数组或需要特定类型结果时（比如想求和，初始值设为 0）

示例：
const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, curr) => acc + curr, 0); // 10

const arr = ['a', 'b', 'c'];
const joined = arr.reduce((acc, curr) => acc + curr, ''); // 'abc'

const scores = [{score: 85}, {score: 92}, {score: 78}];
const total = scores.reduce((sum, s) => sum + s.score, 0); // 255

map 和 reduce 的关键区别

• 输出长度：map 输出与输入等长；reduce 输出固定为一个值（除非你刻意返回数组）
• 用途倾向：map 偏向“一对一”映射；reduce 偏向“聚合”（求和、计数、分组、扁平化、查找最大值等）
• 链式调用：两者常配合使用，比如先 filter 再 map 再 reduce，实现复杂数据处理逻辑

小技巧：想把二维数组扁平成一维？arr.reduce((acc, cur) => acc.concat(cur), []) 或更现代写法 arr.flat() —— 但理解 reduce 的思路有助于掌握底层逻辑。

好了，本文到此结束，带大家了解了《Map与Reduce函数详解教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！