17370845950

本文介绍如何将已有的单字符串首三字母大写函数，扩展为作用于字符串数组的通用工具函数，使用 map() 方法高效实现批量处理，并修正常见循环与参数传递错误。

在 JavaScript 中，若已有一个专用于单个字符串的转换函数（如 capitalizeThreeLetters），需将其安全、正确地应用到整个字符串数组上，关键在于避免过早返回、确保逐元素调用、并返回新数组。原始代码中 applyAll 存在两个核心问题：

1. return 语句位于 for 循环内 → 函数执行一次即终止，仅处理首个元素；
2. 错误地将整个数组传入 capitalizeThreeLetters(arr) → 该函数期望接收字符串，却收到数组，导致隐式类型转换（如 ['mai','brian'] + '' 变成 'mai,brian'），进而错误地大写逗号前的字符。

✅ 正确解法是使用数组高阶方法 map()：它遍历每个元素，将指定函数应用于当前项，并自动收集所有返回值，生成一个结构一致的新数组，不修改原数组，语义清晰且符合函数式编程习惯。

以下是修复后的完整实现：

function capitalizeThreeLetters(str) {
  // 边界防护：空字符串或长度不足3时，安全处理
  if (!str || typeof str !== 'string') return str;

  const len = str.length;
  let result = '';

  // 大写前三个字符（若存在）
  for (let i = 0; i < Math.min(3, len); i++) {
    result += str[i].toUpperCase();
  }

  // 拼接剩余部分（若存在）
  if (len > 3) {
    result += str.slice(3);
  }

  return result;
}

function applyAll(arr, fn) {
  // ✅ 使用 map：对 arr 中每一项调用 fn，返回新数组
  return arr.map(fn);
}

// 测试用例
console.log(applyAll(['mai', 'brian', 'jeho', 'han'], capitalizeThreeLetters));
// 输出: ['MAI', 'BRIan', 'JEHo', 'HAN']

console.log(applyAll(['a', 'hi', 'test', 'JavaScript'], capitalizeThreeLetters));
// 输出: ['A', 'HI', 'TESt', 'JAVAScript']

? 注意事项：

• applyAll 必须接收 fn 参数（即 capitalizeThreeLetters），否则无法复用；省略参数会导致 fn 为 undefined，调用时报错。
• capitalizeThreeLetters 增加了健壮性检查（空值、非字符串类型）和长度保护，避免 str[1] 或 str[2] 访问 undefined 导致 toUpperCase() 报错。
• 不要使用 forEach() 替代 map()：forEach() 无返回值（始终返回 undefined），无法构建结果数组；它适用于“仅执行副作用”，而非“转换并收集”。

? 总结：当需要将一个单元素处理函数扩展至数组时，Array.prototype.map() 是最自然、最安全的选择。它抽象了循环细节，保证不可变性，并与现代 JavaScript 工具链（如 React、Lodash）高度兼容。牢记——map 转换，forEach 执行，filter 筛选，选择取决于你的目标。