Array.map() 中的箭头函数 VS 普通函数

Question

我正在解决一些 JS 挑战并注意到当使用箭头函数时结果如预期的那样出现，当我使用普通函数尝试相同的代码时它不会。谁能解释一下区别，否则我可能打错了！！

这是第一个解决方案（有效）：

function titleCase(str) {
    str = str.split(' ').map(i =>  i[0].toUpperCase() + i.substr(1).toLowerCase()).join(' ')
    return str;
  }
   console.log(titleCase("I'm a liTTle tea pot")); // I'm A Little Tea Pot

和第二个功能正常的解决方案（returns 空字符串）：

function titleCase2(str) {
    str = str.split(' ').map(function(i, index){ i[0].toUpperCase() + i.substr(1).toLowerCase()}).join(' ')
    return str;
  }
   console.log(titleCase2("I'm a liTTle tea pot")); // empty string

You can use My Plunker here

Answer 1

您在回调函数中遗漏了一个 return 关键字。

粗箭头函数return默认是一个值，return关键字是内置的。要从普通函数表达式中获取值，您必须 return 它。

function titleCase2(str) {
  str = str.split(' ').map(function(i, index) {
    return i[0].toUpperCase() + i.substr(1).toLowerCase()
  }).join(' ')
  return str;
}
console.log(titleCase2("I'm a liTTle tea pot"));

Answer 2

对于非箭头函数，您需要显式 return。 1 行箭头函数隐式地 return 那一行的结果。

function titleCase2(str) {
  return str.split(' ').map(function(i, index){ return i[0].toUpperCase() + i.substr(1).toLowerCase()}).join(' ')
}
console.log(titleCase2("I'm a liTTle tea pot")); // I'm A Little Tea Pot

Array.map() 中的箭头函数 VS 普通函数

Arrow function VS normal function in Array.map()

javascript

arrow-functions