map与filter函数区别详解

哈喽！今天心血来潮给大家带来了《JavaScript高阶函数map与filter区别详解》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

map是“每个都变”，filter是“挑着留”：map用于一对一转换且输出长度不变，filter用于条件筛选且输出长度≤原数组。

什么时候该用 map？看是否需要“一对一转换”

你不是在删数据，而是在改数据：提取字段、单位换算、格式化、加前缀……只要输出数组长度和原数组一致，就轮到 map 出场。

• 回调函数必须 返回值，否则新数组里全是 undefined
• 不修改原数组，但也不会跳过任何元素（空位会被保留，undefined 也会被映射）
• 如果传入空数组，map 返回空数组；但若数组含 undefined 或 null，它们仍会进入回调，需自行判空

const users = [{name: 'Alice', age: 28}, {name: 'Bob', age: 32}];
const names = users.map(u => u.name); // ['Alice', 'Bob']
const agesPlusOne = users.map(u => u.age + 1); // [29, 33]
// ❌ 错误写法（漏 return）：
// users.map(u => { u.name }); // → [undefined, undefined]

什么时候该用 filter？看是否需要“条件筛选”

filter 不关心怎么变，只问“要不要”。它只收 true，其他一概扔掉。返回数组长度 ≤ 原数组长度，甚至可能是空数组。

• 回调函数必须返回布尔值：true 留下，false/undefined/null/0 都不算数
• 注意隐式类型转换陷阱：比如 filter(x => x) 会把 0、''、false 全干掉，不等于“非空判断”
• 对稀疏数组（如 [1,,3]）不会遍历空位，这是它和 map 行为不同的关键点之一

const nums = [0, 1, -2, 3, '', null, 4];
nums.filter(x => x > 0); // [1, 3, 4]
nums.filter(x => x);      // [1, 3, 4] ← 0 和 '' 被当成 false
nums.filter(x => x != null && x !== ''); // [0, 1, -2, 3, 4]

混用场景：先筛再转，别在一个函数里硬扛

常见需求如“取所有活跃用户的邮箱列表”，本质是两步：先 filter 出 status === 'active' 的对象，再 map 提取 email 字段。强行塞进一个 map 里加 if 判断，或在 filter 里返回邮箱，都会让逻辑变脏、难维护、易出错。

• 链式调用最清晰：arr.filter(...).map(...)
• 性能上无明显差异（现代 JS 引擎优化充分），可读性才是第一成本
• 如果真要单次遍历（比如大数据量+性能敏感），才考虑用 reduce 合并，但绝大多数业务场景不值得

const data = [
  {id: 1, name: 'A', status: 'active', email: 'a@x.com'},
  {id: 2, name: 'B', status: 'inactive', email: 'b@x.com'},
  {id: 3, name: 'C', status: 'active', email: 'c@x.com'}
];
const activeEmails = data
  .filter(item => item.status === 'active')
  .map(item => item.email);
// → ['a@x.com', 'c@x.com']

容易被忽略的细节：空数组、null/undefined 元素、箭头函数简写陷阱

很多人测试只用理想数据，上线后遇到空值就报错。这两个函数本身不报错，但你的回调可能崩。

• filter 遇到 undefined 元素时，仍会把 undefined 传给回调；若回调里直接访问 prop，就会 Cannot read property 'xxx' of undefined
• map 中用箭头函数简写 x => x.foo 时，如果 x 是 null，一样炸
• 安全写法：用可选链 x?.foo，或提前 guard（if (!x) return）

const risky = [null, {val: 1}, undefined];
risky.map(x => x.val); // TypeError: Cannot read property 'val' of null
risky.map(x => x?.val); // [undefined, 1, undefined]
risky.filter(x => x && x.val > 0); // [{val: 1}]

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~