JavaScript回调函数问题：无法访问返回数组的单个元素

嘿，这个坑我当初刚学JS异步的时候也踩过！你的问题核心其实是异步代码的执行顺序搞的鬼，咱们一步步理清楚：

为什么会出现这种情况？ #

你大概率是在一个异步操作（比如fetch请求、setTimeout、或者读取本地文件这类需要等待结果的操作）外面定义了ResultsArray，然后在回调函数里尝试访问它的元素，但这个回调函数执行的时候，异步操作还没完成，数组其实还没被填充数据！

举个最常见的错误示例：

let ResultsArray = [];

// 模拟异步获取数据的操作，比如后端接口请求
setTimeout(() => {
  // 1秒后才会把数据赋值给数组
  ResultsArray = ["数据1", "数据2", "数据3"];
}, 1000);

// 你写的回调处理函数
function handleResults() {
  console.log(ResultsArray); // 这里控制台可能显示空数组，但展开后又能看到数据（后面说原因）
  console.log(ResultsArray[1]); // 这里返回undefined！因为此时数组还没被赋值
}

// 立即调用回调，这时候异步操作还没跑完
handleResults();

至于为什么你在Firefox控制台直接敲ResultsArray[1]能拿到值？因为等你手动在控制台输入的时候，那个1秒的异步操作早就完成了，数组已经被填充好数据了。

另外还有个容易迷惑的点：控制台打印数组时，有时候会显示[]但展开后有内容，这是因为控制台是惰性求值的——它记录的是数组的引用，等你展开的时候，数组已经被异步操作修改了，但代码执行时数组确实是空的。

怎么解决？ #

核心思路就是：确保在数组被填充完成之后，再执行访问数组元素的逻辑，有两种常用的方式：

1. 把处理逻辑放到异步回调内部 #

直接在异步操作完成、数组被赋值后，调用你的处理函数或者写处理逻辑：

let ResultsArray = [];

setTimeout(() => {
  ResultsArray = ["数据1", "数据2", "数据3"];
  // 数组准备好了再调用处理函数
  handleResults();
}, 1000);

function handleResults() {
  console.log(ResultsArray[1]); // 现在能正常拿到"数据2"了！
}

2. 用Promise + async/await简化异步流程 #

如果你的异步操作是基于Promise的（比如fetch本身就返回Promise），用async/await能让代码逻辑更直观，避免回调嵌套：

// 把异步操作包装成Promise
function getResults() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(["数据1", "数据2", "数据3"]);
    }, 1000);
  });
}

// 用async函数处理异步
async function processResults() {
  // 等待异步操作完成，拿到填充好的数组
  const ResultsArray = await getResults();
  console.log(ResultsArray[1]); // 正常输出"数据2"
}

processResults();

这样就能保证你访问数组元素的时候，数组已经有数据啦！

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