Array.forEach()方法在含文本元素的数组中无法正常工作的问题排查

核心问题：异步操作的执行时机错误 #

你的代码里getUsers函数的逻辑存在异步处理的问题：

• fetch是异步网络请求，它的.then回调只会在请求完成、拿到数据后才执行。但你在调用fetch之后立刻就返回了returnArray，这时候数组还是空的。
• 当addUsersToDOM里调用getUsers()时，拿到的是初始状态的空数组，此时执行forEach自然没有任何输出；等后续fetch请求完成、数组被填充时，forEach已经执行完毕，所以看不到预期的打印结果。
• 你测试简单数字数组时，数组是同步生成的，没有异步延迟，所以forEach能正常工作。

次要问题：DOM属性拼写错误 #

createListItem函数里的li.textConent是拼写错误，正确的属性名是li.textContent，这个错误会导致后续添加到DOM的列表项无法显示文本。

修正后的代码（两种实现方式） #

方式1：使用Promise链式调用

function getUsers() {
  // 直接返回Promise，将处理后的数组作为Promise的resolve值
  return fetch("https://api.github.com/users")
    .then((response) => response.json())
    .then((data) => data.map(item => item.login));
}

function createListItem(text) {
  let li = document.createElement("li");
  li.textContent = text; // 修正拼写错误
  return li;
}

function addUsersToDOM() {
  let body = document.getElementById("my-body");

  // 通过.then获取异步返回的数组，再执行遍历操作
  getUsers().then(namesArray => {
    console.log(namesArray);
    namesArray.forEach((item) => {
      console.log(item);
      body.appendChild(createListItem(item));
    });
  });
}

addUsersToDOM();

方式2：使用async/await（更简洁易读）

async function getUsers() {
  const response = await fetch("https://api.github.com/users");
  const data = await response.json();
  return data.map(item => item.login);
}

function createListItem(text) {
  let li = document.createElement("li");
  li.textContent = text;
  return li;
}

async function addUsersToDOM() {
  let body = document.getElementById("my-body");

  // 用await等待异步操作完成，拿到填充后的数组
  const namesArray = await getUsers();
  console.log(namesArray);
  namesArray.forEach((item) => {
    console.log(item);
    body.appendChild(createListItem(item));
  });
}

addUsersToDOM();

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