JavaScript中使用forEach循环无法显示数组空索引为undefined的问题

云原生阿岚

2026-7-12

问题分析与解决方案

核心问题

你遇到的问题是**forEach会跳过稀疏数组的空槽位**。当你直接给数组赋值索引7时，索引4、5、6属于未初始化的空槽，forEach不会对这些索引执行回调函数，所以你的else分支永远不会触发，自然无法显示"undefined"。

另外，原代码里的if (index in fruits)判断完全多余——因为forEach只遍历数组中实际存在的索引，这个条件永远为true，else分支根本不会执行。

替代方案

方案1：使用普通`for`循环（最直接）

遍历从0到数组长度-1的所有索引，确保每个位置都被检查：

const fruits = ["banana", "apple", "watermelom", "grapes"];
fruits[7] = "Lemon";

let text = "<ul>";

for (let index = 0; index < fruits.length; index++) {
  const value = fruits[index];
  text += `<li>${value !== undefined ? value : "undefined"}</li>`;
}

text += "</ul>";
document.getElementById("demo").innerHTML = text;

方案2：用`Array.from`转密集数组后再遍历

Array.from会自动把稀疏数组的空槽位填充为undefined，之后用forEach就能遍历所有位置：

const fruits = ["banana", "apple", "watermelom", "grapes"];
fruits[7] = "Lemon";

let text = "<ul>";

Array.from(fruits).forEach(value => {
  text += `<li>${value !== undefined ? value : "undefined"}</li>`;
});

text += "</ul>";
document.getElementById("demo").innerHTML = text;

方案3：用`for...of`遍历数组的`keys()`

通过遍历数组的所有索引（包括空槽对应的索引），再逐个检查值：

const fruits = ["banana", "apple", "watermelom", "grapes"];
fruits[7] = "Lemon";

let text = "<ul>";

for (const index of fruits.keys()) {
  const value = fruits[index];
  text += `<li>${value !== undefined ? value : "undefined"}</li>`;
}

text += "</ul>";
document.getElementById("demo").innerHTML = text;