map是“每个都变”，filter是“挑着留”：map用于一对一转换且输出长度不变，filter用于条件筛选且输出长度≤原数组。
map 和 filter 的核心区别就一条：**map 是“每个都变”，filter 是“挑着留”**。用错一个，结果就完全不对——比如想筛偶数却用了 map，得到的还是原长度数组，只是每个值被“算了一遍”，根本没少元素。
什么时候该用 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 元素、箭头函数简写陷阱
很多人测试只用理想数据，上线后遇到空值就报错。这两个函数本身不报错，但你的回调可能崩。
立即学习“Java免费学习笔记（深入）”；
-
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}]
真正卡住人的从来不是语法，而是“我到底想干什么”——想改每个值，就用 map；想砍掉一部分，就用 filter。至于中间那个模糊地带（比如“把负数变成 0，其余不变”），那是 map 的活；“只要非负数”，才是 filter 的边界。越早分清这个，调试时就越少翻来覆去改函数名。 
