在Array.map()的箭头函数中添加{}导致返回undefined，是什么原因？

该现象和Array.map()方法本身无关，是ES6箭头函数的语法规则差异导致的。

箭头函数的两种返回规则 #

• 当箭头函数的函数体没有被{}包裹时，属于隐式返回模式，会自动返回函数体表达式的执行结果。你的第一种写法就属于这种情况，默认自动返回了p.nodeName的值，因此能拿到预期结果。
• 当箭头函数的函数体被{}包裹时，属于显式函数块模式，此时不会自动添加return语句，如果你没有手动指定返回值，函数默认返回undefined。你的第二种写法没有手动return，因此map得到的全是undefined。

多逻辑场景的正确写法 #

如果需要在map回调内写if判断等多段逻辑，只要手动补充return语句即可：

const final = pdata.map((p) => { 
  // 此处可添加任意多的判断逻辑
  if (p.nodeType === 1) {
    return `元素节点：${p.nodeName}`
  }
  if (p.nodeType === 3) {
    return `文本节点`
  }
  // 必须手动指定返回值
  return p.nodeName
});

内容的提问来源于stack exchange，提问作者Michael Kremenetsky