JavaScript中forEach循环拼接字符串返回undefined及调用join方法报错问题咨询

嘿，我来帮你理清这个问题的根源，以及怎么修复它！

问题出在哪？ #

你遇到的两个问题其实都源于forEach方法的特性：

• forEach没有返回值：它的设计就是用来遍历数组执行副作用（比如打印、修改外部变量），默认返回undefined，所以你直接console.log它的调用结果，自然会输出undefined。
• 修改element不会改变原数组：字符串是值类型，forEach循环里的element是原数组元素的副本，你做的element += 'hello'只是修改了这个临时变量，根本没影响到原数组。
• 链式调用报错的原因：因为forEach返回undefined，你在它后面调用join('')，相当于在undefined上调用方法，浏览器自然会抛出“undefined is not an object”的错误。

正确的解决方案：用map代替forEach #

如果你需要处理数组元素并生成新数组，map才是合适的工具——它会遍历数组，对每个元素执行回调函数，然后返回一个包含所有处理后元素的新数组，完美支持链式调用。

修改后的代码如下：

const string = 'abcd';
const result = string.toUpperCase().split('').map(element => element + 'hello').join('');
console.log(result); // 输出：AhelloBhelloChelloDhello

非要用forEach怎么办？ #

如果因为某些场景必须用forEach，那你需要手动创建一个新数组来收集处理后的元素，之后再拼接：

const string = 'abcd';
const processedElements = [];

string.toUpperCase().split('').forEach(element => {
  processedElements.push(element + 'hello');
});

const result = processedElements.join('');
console.log(result); // 同样输出：AhelloBhelloChelloDhello

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