为何map()会将数组所有元素转为undefined？驼峰拆分代码排查

问题分析 #

原代码的核心问题有两个：

• map() 回调函数没有返回值，默认返回 undefined，导致最终数组全是 undefined，join('') 后结果异常。
• 试图修改 x[i+1] 是错误操作：x 是当前遍历的单个元素，不是原数组，无法通过它修改下一个数组项。

原代码：

function splitCamelCase(string) {
  return string.split(/([A-Z])/g)
  .map(function(x,i) {
    if (x === x.toUpperCase()) {
      x[i+1] = x + x[i+1]
      x = " "
      
    }
    
  })
.join('')
}

修复方案 #

方案一：正确使用 map() #

给 map() 回调添加返回值，同时通过回调的第三个参数（原数组）操作下一项：

function splitCamelCase(string) {
  return string.split(/([A-Z])/g)
    .map(function(x, i, arr) {
      if (x === x.toUpperCase()) {
        arr[i+1] = x + arr[i+1];
        return " ";
      }
      return x;
    })
    .join('')
    .trim();
}

方案二：更简洁的正则替换 #

无需拆分遍历，直接用正则替换一步完成：

function splitCamelCase(string) {
  return string.replace(/([A-Z])/g, ' $1').trim();
}

测试示例 #

console.log(splitCamelCase("helloWorldFooBar")); 
// 输出：hello World Foo Bar

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