为何无法通过索引访问JavaScript数组元素？

兄弟，我太懂你这种摸不着头脑的困惑了！这种情况十有八九是异步操作在搞鬼，我来给你把这个事儿掰扯明白。

核心原因：控制台的"延迟求值"坑 #

你看到console.log(myArr)显示有1到10的数据，但myArr[2]返回undefined、myArr.length是0，问题出在浏览器控制台的特性上：

• 对于数组这种引用类型，控制台是「延迟求值」的——也就是说，当你执行console.log(myArr)的时候，数组其实还是空的，但控制台只是先记录了这个数组的引用；等你手动展开控制台里的数组时，它才会去读取数组的最新状态，这时候异步填充的操作已经完成了，所以你看到了数据。
• 而myArr[2]和myArr.length是在代码执行的那一刻直接获取值的，当时数组还没被填充，自然返回空数组的状态。

举个你大概率遇到的场景 #

你的代码估计是类似这样的（比如用了定时器、API请求这类异步操作）：

var myArr = [];

function fillArr() {
  // 模拟异步操作，比如实际场景里的接口请求、文件读取
  setTimeout(() => {
    for(let i=1; i<=10; i++) {
      myArr.push(i);
    }
  }, 100);
}

fillArr();
console.log(myArr); // 控制台展开会看到数据，但执行时数组是空的
console.log(myArr[2]); // undefined
console.log(myArr.length); // 0

这里的setTimeout属于异步任务，JavaScript会先执行完主线程里的同步代码（也就是后面三个console.log），之后才会去执行异步任务里的填充逻辑。所以当你打印索引和长度时，数组根本还没被填充。

怎么解决？ #

核心思路就是：确保在数组填充完成之后再访问它，这里给你两种常用的写法：

1. 用回调函数处理

把需要访问数组的逻辑放到回调里，等填充完成后再调用：

var myArr = [];

function fillArr(callback) {
  setTimeout(() => {
    for(let i=1; i<=10; i++) {
      myArr.push(i);
    }
    callback(); // 填充完成后触发回调
  }, 100);
}

fillArr(() => {
  console.log(myArr); // 此时数组已填充完成
  console.log(myArr[2]); // 输出3
  console.log(myArr.length); // 输出10
});

2. 用Promise + async/await（更优雅）

如果是复杂的异步场景，这种写法可读性更高：

var myArr = [];

function fillArr() {
  return new Promise((resolve) => {
    setTimeout(() => {
      for(let i=1; i<=10; i++) {
        myArr.push(i);
      }
      resolve();
    }, 100);
  });
}

async function main() {
  await fillArr(); // 等待填充完成
  console.log(myArr);
  console.log(myArr[2]); // 输出3
  console.log(myArr.length); // 输出10
}

main();

额外排查点 #

如果你的填充逻辑完全是同步的，那就要检查是不是在函数里重新声明了var myArr，导致全局的数组根本没被修改——比如函数里写了var myArr = []，这会覆盖全局变量，这种低级错误也偶尔会出现。

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