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

Posted 2023-02-14

【中文标题】对字符串进行标题大小写时，Array.map() 与 for 循环

【英文标题】：Array.map() versus for loop when title-casing a string

【发布时间】：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() 在这种情况下不起作用？还是我只是在某个地方犯了一个愚蠢的错误？

【参考方案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 上的练习。