箭头函数使 filter 和 map 更简洁可读,单参数单表达式可省括号、花括号和 return;返回对象需加小括号;链式调用清晰,但需避免副作用、this 丢失及异步误用。

箭头函数让数组的 filter 和 map 操作更简洁、可读性更强,尤其适合链式调用和单表达式逻辑。
用箭头函数写 filter:省掉 return 和花括号
传统函数写法需要显式 return 和大括号;箭头函数在单参数+单表达式时可全部省略:
// 传统写法
const evens = numbers.filter(function(n) {
return n % 2 === 0;
});
<p>// 箭头函数简化版(推荐)
const evens = numbers.filter(n => n % 2 === 0);
</p>- 参数只有一个时,括号可省(如
n) - 函数体是纯表达式且需返回值时,花括号和
return可省 - 注意:若要返回对象字面量,必须加小括号,否则会被解析为代码块:
arr.map(x => ({id: x}))
用箭头函数写 map:一行完成数据结构转换
映射操作常用于提取字段、格式化或构造新对象,箭头函数让意图一目了然:
// 提取用户姓名
const names = users.map(u => u.name);
<p>// 构造带状态的新对象
const withActive = users.map(u => ({ ...u, active: u.lastLogin > Date.now() - 86400000 }));</p><p>// 组合 filter + map(链式调用)
const activeNames = users
.filter(u => u.status === 'active')
.map(u => u.name.toUpperCase());
</p>- 避免在
map中做副作用(如修改原对象),保持纯函数特性 - 链式调用时,每个箭头函数都独立清晰,便于调试和复用
- 复杂逻辑建议拆成具名函数,别硬塞进箭头函数里(可读性优先)
常见陷阱与避坑提醒
箭头函数没有自己的 this、arguments,也不能用作构造函数——这些在数组方法中通常不是问题,但要注意上下文丢失场景:
- 不要在对象方法里用箭头函数处理数组,除非你明确不需要
this:obj.process = () => this.items.map(x => x * 2); // this 指向外层,可能出错 - 异步操作中慎用:箭头函数不能用
await单独写在链式调用里,需包裹在 async 函数中 - 空数组调用
filter/map仍返回新数组,不会报错,但结果可能不符合预期(记得加边界判断)
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











