对字符串进行标题大小写时，Array.map() 与 for 循环答案

【问题标题】：Array.map() versus for loop when title-casing a string对字符串进行标题大小写时，Array.map() 与 for 循环
【发布时间】：2017-08-04 07:14:52
【问题描述】：

我正在研究一个 FreeCodeCamp 算法问题，我被要求对给定字符串进行标题大小写，例如将每个单词的第一个字母大写。我设法使用以下代码做到了：

function titleCase(str) {
  var wordArr = str.split(" ");
  for(var i=0; i<wordArr.length; i++){
    wordArr[i] = wordArr[i].charAt(0).toUpperCase() + wordArr[i].slice(1).toLowerCase();
  }
  return wordArr.join(" ");

}

但我开始尝试以这样的方式使用 array.map()：

function titleCase(str) {
  var wordArr = str.split(" ");
  var newArr = wordArr.map(function(word){
    word = word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
  });
  return newArr;

}

我什至没有费心尝试连接（即使用.join()）数组，因为它是一个 null 值的数组。为什么array.map() 在这种情况下不起作用？还是我只是在某个地方犯了一个愚蠢的错误？

【问题讨论】：

标签： javascript arrays string for-loop array.prototype.map

【解决方案1】：

Array.prototype.map 接受一个函数，该函数采用原始值并应返回一个预计值。
您的函数什么都不返回，它只是重新分配 word 值，这不会影响任何事情，因为 word 是一个局部变量。

这是map函数的正确用法：

var wordArr = str.split(" ");
var newArr = wordArr.map(function(word){
  return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
});
return newArr;

演示：

function titleCase(str) {
  return str.split(" ").map(function(word){
    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
  });
}

console.log(titleCase("hello") + " " + titleCase("world") + "!");

【讨论】：

【解决方案2】：

你应该在地图函数内部返回

示例代码：

function titleCase(str) {
  var wordArr = str.split(" ");
  var newArr = wordArr.map(function(word){
    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
  });
  return newArr.join(' ');
}

【讨论】：

【解决方案3】：

为什么array.map() 在这种情况下不起作用？

根据 .map() 的 MDN 文档：

map() 方法创建一个新数组，其结果在该数组中的每个元素上调用提供的函数。

在该语句中暗示，.map() 需要每次调用的 results，为此使用 return 关键字将值发送回每次迭代。否则，该值（即分配给word）未使用（在回调函数之外）。请参阅下面的代码中的演示。

function titleCase(str) {
  return str.split(" ").map(function(word){
    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
  });
}

console.log(titleCase("title case this string"));

附：如果您想了解更多关于 Javascript 函数式编程的知识，我建议您通过 this page 上的练习。

【讨论】：