箭头函数通过省略function和return、自动绑定this、明确参数提升代码可读性；适用于单表达式回调、避免this丢失、事件解构等场景，但复杂逻辑或需动态this时应回退普通函数。
箭头函数本身不改变逻辑，但能帮你去掉冗余语法、聚焦数据流转，让回调更“一眼看懂”。关键在三点：省掉 function 和 return（单表达式时）、自动绑定 this、避免意外的参数干扰。
用单表达式写最简回调
当回调只做一件事——比如从数组里取某个字段、判断真假、转成新值——直接写成一行，语义干净：
// ✅ 清晰：map 要的是“每个 item 的 id” users.map(user => user.id); <p>// ✅ 清晰：filter 要的是“活跃用户” activeUsers = users.filter(user => user.isActive);</p><p>// ✅ 清晰：sort 比较逻辑直给 items.sort((a, b) => a.price - b.price);
注意：括号可省（单参数），花括号和 return 也可省（单表达式）。但一旦要写多条语句，就得加花括号和 return：
// ❌ 错误：没 return，返回 undefined
list.map(item => { console.log(item); item.name });
<p>// ✅ 正确：显式 return
list.map(item => { console.log(item); return item.name });
避开 this 陷阱，尤其在事件或定时器中
传统函数里 this 容易丢失（比如绑给按钮点击或 setTimeout），箭头函数继承外层 this，天然安全：
立即学习“Java免费学习笔记（深入）”；
class Counter {
constructor() {
this.count = 0;
}
start() {
// ✅ 箭头函数：this 指向 Counter 实例
setInterval(() => {
this.count++; // 正常更新
console.log(this.count);
}, 1000);
<pre class="brush:php;toolbar:false;">// ❌ 普通函数：this 指向全局或 undefined（严格模式）
// setInterval(function() { this.count++ }, 1000);} }
同样适用于 DOM 事件监听器，避免手动 .bind(this) 或中间变量 const self = this。
明确参数，少用 arguments，必要时解构
箭头函数没有 arguments 对象，也不支持重复参数名。好处是强迫你写清楚输入——尤其适合处理事件对象或 Promise 回调：
- 事件回调直接解构需要的属性：
button.addEventListener('click', ({ clientX, clientY }) => console.log(clientX)) - Promise 链中避免无意义占位：
fetch('/api').then(res => res.json()).then(data => render(data))，不写res => { return res.json() } - 多个参数别省括号：
[1, 2, 3].forEach((item, index) => console.log(`${index}: ${item}`))（两个参数必须加括号）
该不用时就不用：别为简而简
以下情况建议退回普通函数：
- 需要动态
this（比如 Vue 方法、jQuery 插件回调要求 this 指 DOM 元素） - 要用
arguments处理不定参数（可用剩余参数...args替代） - 函数需被命名、调试时需在堆栈中识别（箭头函数匿名，Chrome 调试器显示为
anonymous） - 逻辑稍复杂（超过 2 行或含条件分支），加花括号后反而不如普通函数直观
