JavaScript中map方法箭头函数{}与()的区别及报错问题

核心区别在于箭头函数的隐式返回和显式返回，这直接影响map最终生成的数组结果：

一、map(() => { }) 写法 #

• 大括号代表箭头函数的函数体，此时必须通过return关键字明确指定返回值，否则函数默认返回undefined——这就是你偶尔报错或得到异常结果的原因。
• 示例：
  错误写法（无return）：

  [1,2,3].map(num => { num * 2 }) 
  // 结果：[undefined, undefined, undefined]
  

  正确写法（带return）：

  [1,2,3].map(num => { 
    const doubled = num * 2;
    return doubled; // 必须显式return
  })
  // 结果：[2,4,6]
  

• 适用场景：需要多行代码、变量声明、条件判断等复杂逻辑的时候。

二、map(() => ( )) 写法 #

• 小括号是箭头函数隐式返回的语法糖，它会自动把括号内的表达式结果作为返回值，无需写return。
• 注意：如果要直接返回一个对象字面量，必须用小括号包裹——因为直接写{}会被解析成函数体，而非对象。示例：

  [1,2,3].map(num => ({ value: num * 2 }))
  // 结果：[{value:2}, {value:4}, {value:6}]
  

• 如果是单行简单表达式，甚至可以省略小括号，比如[1,2,3].map(num => num * 2)，和带小括号的效果完全一致。
• 适用场景：逻辑简单，仅需返回单个表达式结果的场景，代码更简洁。

总结 #

• 复杂逻辑（多行代码、变量、条件）：用大括号+显式return
• 简单返回表达式/对象：用隐式返回（返回对象时必须加小括号）

内容的提问来源于stack exchange，提问作者Niroj Bajracharya