JavaScript中的高阶函数是指接收函数作为参数或者返回函数的函数，Map和Filter是数组原型上自带的两个高阶方法，能够大幅简化数组的处理流程，避免繁琐的for循环嵌套。这两个方法都不会修改原数组，而是返回一个新的数组结果，符合函数式编程的思想。
Map方法的基础使用
Map方法会遍历原数组的每一个元素，对每个元素执行传入的回调函数，将回调函数的返回值组成新的数组返回。它的核心作用是实现数组元素的统一转换，比如将数组中的数字全部翻倍，或者提取对象数组中的某个属性。
Map方法的回调函数接收三个参数，分别是当前遍历的元素、当前元素的索引、原数组本身，其中第一个参数是必填的，后两个是可选参数。下面是基础的使用示例：
// 数字数组每个元素翻倍
const numArr = [1, 2, 3, 4, 5];
const doubleArr = numArr.map((item) => {
return item * 2;
});
console.log(doubleArr); // 输出 [2, 4, 6, 8, 10]
// 提取对象数组中的指定属性
const userArr = [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 22 },
{ id: 3, name: '王五', age: 25 }
];
const userNameArr = userArr.map((item) => {
return item.name;
});
console.log(userNameArr); // 输出 ['张三', '李四', '王五']
Filter方法的基础使用
Filter方法同样会遍历原数组的每一个元素，对每个元素执行传入的回调函数，回调函数需要返回一个布尔值，当返回值为true时，当前元素会被保留到新数组中，返回值为false时则会被过滤掉。它的核心作用是实现数组的筛选过滤，比如筛选出数组中大于某个值的元素，或者筛选出对象数组中符合特定条件的对象。
Filter方法的回调函数参数和Map一致，同样第一个参数是当前遍历的元素，后两个是可选参数。下面是基础的使用示例：
// 筛选出数组中大于3的元素
const numArr = [1, 2, 3, 4, 5];
const moreThanThreeArr = numArr.filter((item) => {
return item > 3;
});
console.log(moreThanThreeArr); // 输出 [4, 5]
// 筛选出年龄大于21的用户
const userArr = [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 22 },
{ id: 3, name: '王五', age: 25 }
];
const adultUserArr = userArr.filter((item) => {
return item.age > 21;
});
console.log(adultUserArr);
// 输出 [{ id: 2, name: '李四', age: 22 }, { id: 3, name: '王五', age: 25 }]
Map与Filter的组合应用
在实际开发中，很多场景需要先对数组进行过滤，再对过滤后的结果进行转换，或者先转换再过滤，这时候就可以组合使用Map和Filter方法，让代码逻辑更清晰。
场景一：先过滤再转换
比如我们需要从用户数组中筛选出年龄大于等于22的用户，然后提取这些用户的姓名组成新数组，就可以先使用Filter过滤，再使用Map提取属性：
const userArr = [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 22 },
{ id: 3, name: '王五', age: 25 },
{ id: 4, name: '赵六', age: 18 }
];
// 先过滤年龄>=22的用户，再提取姓名
const targetNameArr = userArr
.filter((item) => item.age >= 22)
.map((item) => item.name);
console.log(targetNameArr); // 输出 ['李四', '王五']
场景二：先转换再过滤
比如我们有一个包含数字的字符串数组，需要先将其转换为数字类型，再筛选出大于10的数字，就可以先使用Map转换类型，再使用Filter过滤：
const strNumArr = ['5', '12', '8', '20', '3']; // 先转换为数字类型，再筛选大于10的元素 const targetNumArr = strNumArr .map((item) => Number(item)) .filter((item) => item > 10); console.log(targetNumArr); // 输出 [12, 20]
场景三：实现简单数组去重
结合Map和Filter还可以实现简单的数组去重功能，通过Filter的索引判断，只保留第一次出现的元素：
const duplicateArr = [1, 2, 2, 3, 3, 3, 4, 5, 5];
const uniqueArr = duplicateArr.filter((item, index, arr) => {
// 判断当前元素在数组中第一次出现的索引是否等于当前索引
return arr.indexOf(item) === index;
});
console.log(uniqueArr); // 输出 [1, 2, 3, 4, 5]
使用注意事项
- Map和Filter都不会修改原数组，会返回新的数组，如果需要修改原数组需要手动赋值。
- 当数组为空时，Map和Filter都会返回空数组，不会报错。
- 回调函数中如果不写return语句，默认返回undefined，Map得到的新数组会充满undefined，Filter得到的新数组会是空数组。
- 不要在Map或Filter的回调函数中执行修改外部变量的操作，尽量保持纯函数的特性，避免产生副作用。
JavaScriptMapFilter高阶函数数据处理修改时间：2026-07-06 13:45:13