map、filter、reduce 是 JavaScript 数组高阶函数，用于映射、筛选和累积计算，不修改原数组，返回新数组或值，支持链式调用，结合箭头函数使代码更简洁清晰。
JavaScript中的数组高阶函数能极大简化数据处理逻辑。它们不改变原数组，而是返回新数组或结果值，配合箭头函数使用更简洁。以下是几个常用高阶函数的实现原理和使用方式。
map：映射生成新数组
map 方法对数组每个元素应用一个函数，并返回由结果组成的新数组。
例如将数组中每个数字平方：- const nums = [1, 2, 3];
- const squared = nums.map(x => x * x); // [1, 4, 9]
其内部实现逻辑类似于：
function map(arr, fn) {
const result = [];
for (let i = 0; i < arr.length; i++) {
result.push(fn(arr[i], i, arr));
}
return result;
}
filter：筛选符合条件的元素
filter 返回一个新数组，包含所有使回调函数返回 true 的元素。
立即学习“Java免费学习笔记（深入）”；
比如筛选出偶数：- const numbers = [1, 2, 3, 4, 5];
- const evens = numbers.filter(n => n % 2 === 0); // [2, 4]
手动实现方式如下：
function filter(arr, fn) {
const result = [];
for (let i = 0; i < arr.length; i++) {
if (fn(arr[i], i, arr)) {
result.push(arr[i]);
}
}
return result;
}
reduce：累积计算最终值
reduce 将数组“压缩”为一个值，常用于求和、扁平化等操作。
如计算数组总和：- const values = [1, 2, 3, 4];
- const sum = values.reduce((acc, cur) => acc + cur, 0); // 10
自定义实现思路：
function reduce(arr, fn, initialValue) {
let acc = initialValue;
for (let i = 0; i < arr.length; i++) {
acc = fn(acc, arr[i], i, arr);
}
return acc;
}
实际应用建议
这些方法可链式调用，提升代码可读性。
例如先筛选再映射：- const data = [1, 2, 3, 4, 5];
- const result = data
- .filter(x => x > 2)
- .map(x => x * 2); // [6, 8, 10]
注意避免在回调中修改外部变量或产生副作用，保持函数纯净有助于调试和测试。
基本上就这些，掌握 map、filter、reduce 的行为和实现逻辑，能帮助你写出更清晰、可靠的数组操作代码。
