使用JavaScript的.forEach()实现FizzBuzz功能的代码问题排查

原代码的两个核心问题 #

• FizzBuzz无法生成：条件判断顺序完全错误。同时是3和5倍数的数（比如15）会先触发第一个if (item % 3 === 0)的判断，直接被赋值为"Fizz"，后面的else if根本没机会执行。而且第三个判断的逻辑也错了，应该是同时满足3和5的倍数（用&&），不是||。
• count数组有冗余项：你用item作为count的索引，比如原数组第一个元素是1，就给count[1]赋值，那count[0]就会是空位，最终输出的数组长度是16，索引0是空白的，这就是冗余。

修正后的代码 #

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
let count = [];

arr.forEach((item) => {
  if (item % 3 === 0 && item % 5 === 0) {
    count.push("FizzBuzz");
  } else if (item % 3 === 0) {
    count.push("Fizz");
  } else if (item % 5 === 0) {
    count.push("Buzz");
  } else {
    count.push(item);
  }
});

console.log(count);

修正点说明 #

1. 调整判断顺序：先检查是否同时是3和5的倍数（优先级最高），再依次检查3的倍数、5的倍数，最后保留原值，这样不会出现逻辑覆盖的问题。
2. 用push()填充数组：直接把处理后的结果push到count里，保证数组顺序和原数组一致，不会出现冗余的空位。
3. 简化逻辑：不需要先给count[item]赋值再修改，直接用原item做判断更清晰，避免不必要的赋值操作。

另外，如果你想保留原数组的索引对应关系（比如原数组索引0对应count索引0），也可以用forEach的第二个参数index来赋值：

arr.forEach((item, index) => {
  if (item % 3 === 0 && item % 5 === 0) {
    count[index] = "FizzBuzz";
  } else if (item % 3 === 0) {
    count[index] = "Fizz";
  } else if (item % 5 === 0) {
    count[index] = "Buzz";
  } else {
    count[index] = item;
  }
});

这个写法和push()的效果一致，都是生成和原数组长度相同的无冗余数组。

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