如何改进箭头函数内的多行逻辑书写

箭头函数多行逻辑必须用花括号包裹并显式return，否则返回undefined；单行仅限一个表达式自动返回；返回对象需加小括号；复杂逻辑应拆分为独立函数。

多行逻辑写在箭头函数里，关键不是“能不能写”，而是“怎么写才清晰、安全、不踩坑”。只要函数体包含两条及以上语句（比如先 console.log，再计算，再判断），就必须用花括号包裹，并显式写 return，否则返回值一定是 undefined。

明确区分单行与多行的边界

单行只允许一个表达式，且该表达式自动成为返回值。一旦出现分号、变量声明、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() }; }（太长，难测试，难复用）
• 提示：函数超过 5 行、含 2 个以上 if 或 try/catch，就该考虑拆分