For...of循环遍历数组中途大量对象变为undefined的问题求助

针对你遇到的for...of遍历数组时后半部分元素变为undefined的问题，以下是具体的排查方向和解决方法：

核心排查点1：原数组是否被外部异步修改 #

你的map是同步遍历，会先完成所有输出；而for...of遍历过程中，如果有外部异步操作（比如socket回调、定时器、其他异步函数）修改了原listings数组（例如删除元素、将元素设为undefined），就会出现后半部分遍历值异常的情况。

验证与解决： #

深拷贝数组后再遍历，隔绝外部修改的影响：

async function postAllItems(listings, limit, socket) {
  // 深拷贝数组（若对象无循环引用，此方法足够）
  const copiedListings = JSON.parse(JSON.stringify(listings));
  
  copiedListings.map((item) => {
    console.log(typeof item);
  });

  for (const item of copiedListings) {
    console.log(typeof item);
  }
}

如果拷贝后的数组遍历正常，说明原数组确实被外部异步逻辑修改，此时需要排查所有可能操作listings的代码（尤其是和socket相关的回调，因为函数传入了socket参数）。

核心排查点2：数组是否为标准Array，迭代器是否异常 #

map是Array原型方法，只要对象有索引和length就能正常执行；但for...of依赖对象的Symbol.iterator迭代器，如果你的listings是类数组对象或者被篡改了迭代器，就会导致遍历结果异常。

验证与解决： #

1. 手动调用迭代器检查输出：

async function postAllItems(listings, limit, socket) {
  console.log('迭代器输出：');
  const iterator = listings[Symbol.iterator]();
  let result;
  while (!(result = iterator.next()).done) {
    console.log(typeof result.value);
  }

  console.log('map输出：');
  listings.map((item) => console.log(typeof item));
}

2. 转为标准Array后再遍历：

async function postAllItems(listings, limit, socket) {
  const realArray = Array.from(listings);
  
  realArray.map((item) => {
    console.log(typeof item);
  });

  for (const item of realArray) {
    console.log(typeof item);
  }
}

核心排查点3：数组长度是否被动态修改 #

在map和for...of前后打印数组长度，确认是否被截断：

async function postAllItems(listings, limit, socket) {
  console.log('map前长度：', listings.length);
  
  listings.map((item) => {
    console.log(typeof item);
  });

  console.log('for...of前长度：', listings.length);
  
  for (const item of listings) {
    console.log(typeof item);
  }

  console.log('for...of后长度：', listings.length);
}

如果长度在过程中变小，说明有代码动态修改了数组长度。

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