ES6实现数组元素加2的函数调用后返回undefined是什么原因？

问题根因 #

mapSomething函数未显式返回arr.map的执行结果，默认返回undefined，对应ES6箭头函数的规则：

• 箭头函数函数体使用大括号{}包裹时，必须手动声明return指定返回值，无return时默认返回undefined
• 当前代码仅执行了arr.map逻辑，未将map生成的新数组作为函数返回值向外传递

修复方案 #

方案1：显式添加return语句 #

const mapSomething = (arr) => {
  // 新增return返回map处理后的新数组
  return arr.map(n => {
    return n + 2;
  })
}

// 输出 [3, 4, 5]
console.log(mapSomething([1, 2, 3]));

方案2：使用箭头函数隐式返回简化写法 #

箭头函数函数体仅为单条表达式时，可省略大括号和return，自动返回表达式结果：

const mapSomething = (arr) => arr.map(n => n + 2)

// 输出 [3, 4, 5]
console.log(mapSomething([1, 2, 3]));

内容的提问来源于stack exchange，提问作者Faruk Şirket