本文介绍如何将已有的单字符串处理函数（使前三个字母大写）扩展为批量处理字符串数组，使用 `map()` 方法高效实现逐元素应用，并修正常见循环与参数传递错误。
在 JavaScript 中，若你已编写好一个专用于单个字符串的转换函数（如 capitalizeThreeLetters），需将其复用到整个字符串数组时，关键在于：避免在循环中提前 return，并确保每次调用都传入单个元素而非整个数组。
你原写的 applyAll 函数存在两个核心问题：
- 过早返回（Early Return）：for 循环内使用 return capitalizeThreeLetters(arr) 会导致函数在第一次迭代后立即退出，仅处理第一个元素（甚至因传入数组而非字符串而产生意外行为）；
- 参数类型错误：capitalizeThreeLetters(arr) 将整个数组作为参数传入，但该函数期望接收一个字符串（如 'mai'），导致 arr[0]、arr[1]、arr[2]（即 'mai'、'brian'、'jeho'）被当作字符处理——这正是 'MAIBRIANJEHOhan' 这种异常结果的根源。
✅ 正确解法是使用数组高阶方法 map() —— 它会遍历数组每一项，将指定函数应用到每个元素，并返回一个结构相同的新数组，语义清晰、无副作用、无需手动管理索引：
function capitalizeThreeLetters(str) {
// 边界防护：空字符串或长度不足3时安全处理
if (!str || typeof str !== 'string') return str;
const len = str.length;
const capFirst = len > 0 ? str[0].toUpperCase() : '';
const capSecond = len > 1 ? str[1].toUpperCase() : '';
const capThird = len > 2 ? str[2].toUpperCase() : '';
const rest = str.slice(3);
return capFirst + capSecond + capThird + rest;
}
function applyAll(arr, fn) {
// ✅ 使用 map 批量应用 fn 到每个元素，返回新数组
return arr.map(fn);
}
// 测试
console.log(applyAll(['mai', 'brian', 'jeho', 'han'], capitalizeThreeLetters));
// 输出: ['MAI', 'BRIan', 'JEHo', 'HAN']
console.log(applyAll(['a', 'hi', 'test'], capitalizeThreeLetters));
// 输出: ['A', 'HI', 'TESt'] （自动适配短字符串）⚠️ 注意事项：
- map() 不修改原数组，而是返回新数组，符合函数式编程原则；
- 建议为 capitalizeThreeLetters 添加输入校验（如空值、非字符串类型），提升鲁棒性；
- 避免使用 forEach() 实现此需求：它不返回新数组，需手动 push 到临时数组，代码冗余且易出错；
- 若必须用传统循环，应初始化空数组并 push 结果，最后统一 return：
function applyAllWithFor(arr, fn) {
const result = [];
for (let i = 0; i < arr.length; i++) {
result.push(fn(arr[i])); // ✅ 传入单个元素 arr[i]
}
return result;
}总结：面对“将函数应用于数组每个元素并收集结果”的场景，Array.prototype.map() 是最简洁、可读性最强、不易出错的标准方案。掌握其用法，能显著提升数据处理代码的表达力与可靠性。
