如何用箭头函数简化回调逻辑

箭头函数通过自动继承外层this、省略function关键字及括号/花括号，显著简化回调逻辑，适用于数据转换、Promise链和事件处理，但不可用作构造函数或需动态this的场景。

箭头函数能显著简化回调逻辑，核心在于它自动绑定 this、省略 function 关键字和括号/花括号（在单参数单表达式时），让代码更紧凑可读。

避免 this 指向丢失

传统函数回调中，this 容易指向错误上下文（如定时器、事件监听器里变成 window 或 undefined）。箭头函数不绑定自己的 this，而是继承外层作用域的 this，天然解决这个问题。

• ❌ 错误写法（普通函数）：

const obj = { name: 'Alice', sayHi() { setTimeout(function() { console.log(this.name); }, 100); } }; // 输出 undefined

• ✅ 箭头函数修复：

const obj = { name: 'Alice', sayHi() { setTimeout(() => console.log(this.name), 100); } }; // 输出 'Alice'

精简单参数单返回值回调

数组方法（如 map、filter、reduce）的回调常是纯计算逻辑，箭头函数可大幅压缩语法噪音。

• 普通写法：numbers.map(function(x) { return x * 2; })
• 箭头简化：numbers.map(x => x * 2)
• 带括号也简洁：users.filter(user => user.active)
• 多参数用小括号：items.sort((a, b) => a.price - b.price)

嵌套回调变扁平（配合 Promise/async）

箭头函数与 Promise 链式调用天然契合，避免层层缩进和重复的 function 声明。

• 传统回调地狱（简化版）：

getData(function(data) { processData(data, function(result) { save(result, function() { console.log('done'); }); }); });

• Promise + 箭头函数（清晰线性）：

getData() .then(data => processData(data)) .then(result => save(result)) .then(() => console.log('done'));

注意适用边界

箭头函数不是万能替代。它没有 arguments、不能用 new 调用、不适用于需要动态 this 的场景（如 Vue 方法、React 类组件事件处理器需绑定时）。

• ✅ 适合：数据转换、事件处理（ES6+ class 中常用）、Promise 回调、高阶函数入参
• ❌ 不适合：构造函数、需要 arguments 的老式函数、明确需要重绑定 this 的方法