箭头函数多行逻辑的书写优化

箭头函数的多行逻辑并非玄学，掌握几条核心规则即可轻松驾驭：多行必须用花括号包裹并显式return，否则返回undefined；单行只能包含一个表达式，自动返回该值；返回对象字面量时记得加小括号；复杂逻辑建议拆分为独立函数，避免硬塞进箭头函数。

大家都知道箭头函数非常便捷，但多行逻辑怎么写才能避免踩坑？关键不在于能否书写，而在于如何写得清晰、安全、不出错。只要函数体内包含两条及以上的语句——例如先打印日志、再计算、再判断——就必须使用花括号包裹，并显式写出return，否则返回值必然是undefined，这是JavaScript箭头函数返回值常见的陷阱。

精准区分单行与多行箭头函数的写法边界

单行箭头函数只能写一个表达式，这个表达式会自动成为返回值。一旦出现分号、变量声明、if、for、console.log 等执行语句，就不再是单行——哪怕只加了一条日志，也得切换为多行写法才能保证正确。

• ✅ 安全单行示例：str => str.trim().toLowerCase()
• ❌ 看似简洁但可能失效的写法：str => console.log(str) && str.trim()（console.log() 返回 undefined，后续逻辑不会执行，这个坑很多人踩过）
• ✅ 正确的多行写法：str => { console.log(str); return str.trim().toLowerCase(); }

多行函数体务必显式添加 return

花括号 {} 意味着进入“语句块模式”，JavaScript 不再自动返回最后一行的值。最容易翻车的就是漏掉 return，尤其是在链式调用时，后续 then 直接拿到 undefined，排查起来非常头疼。

• 错误示例：data => { const parsed = JSON.parse(data); console.log('parsed'); } → 返回 undefined
• 正确写法：data => { const parsed = JSON.parse(data); console.log('parsed'); return parsed; }
• 一个小技巧：把 return 放在最后一行，并与花括号对齐，视觉上更容易核对，能有效避免低级错误。

返回对象字面量时必须添加小括号

这个陷阱同样经典：即使只有一行，如果目标是返回一个对象，也不能省略括号——否则花括号会被错误解释为函数体，直接报错或静默返回 undefined。

• ❌ 错误写法：user => { id: 1, name: 'Alice' }（这是代码块，不是对象字面量）
• ✅ 正确写法：user => ({ id: 1, name: 'Alice' })
• 快速检查法：写完扫一眼——花括号前面有没有小括号？没有的话大概率出错了。

复杂逻辑优先拆分，而非硬塞进箭头函数

箭头函数天生适合简洁的映射操作，但遇到条件分支、异常处理、多步状态更新时，硬塞进去只会让代码冗长且难以调试。正确做法是：把核心逻辑抽成独立命名函数，箭头函数只做轻量委托。

• 推荐做法：const handleResponse = (res) => { if (!res.ok) throw new Error('API failed'); return parseUser(res); };——清晰明了，逻辑集中。
• 避免：res => { if (!res.ok) { console.error('fail'); throw new Error(); } const data = res.json(); return { ...data, timestamp: Date.now() }; }（代码过长，难以测试、复用，且极易出现 bug）
• 一个实用判断标准：函数超过5行、包含两个以上 if 或 try/catch，就该考虑拆分了。