JavaScript中从数组取值返回Undefined的问题求助

兄弟，我一看你描述的现象就懂了——这大概率是异步操作的时机问题在搞鬼！虽然你贴出来的同步代码逻辑上完全不会出现这个bug，但结合你说的“打印数组能看到值，取单个元素却返回undefined”，十有八九是你实际代码里填充imgDim数组的操作是异步的（比如定时器、网络请求、DOM加载回调这类）。

为啥会出现这种矛盾的现象？ #

• 你执行let width = imgDim[0]的时候，数组还没被填充呢！这时候imgDim[0]就是undefined，所以width和height自然也是undefined。
• 至于控制台打印数组能看到值，那是浏览器控制台的“小特性”：它对于数组、对象这类引用类型，显示的是你展开查看时的实时状态，而不是执行console.log那一刻的状态。不信你在console.log(imgDim)后面加一行console.log(imgDim.length)，肯定会输出0——说明执行打印时数组确实是空的，只是后来异步操作完成后数组才被填充了。

怎么解决？ #

根据你的场景，有两种常用方案：

方案1：把依赖数组的逻辑放到异步回调里

如果是用定时器、DOM事件这类回调填充数组，直接把赋值和打印的代码挪到回调内部就行：

let imgDim = [];
// 模拟异步填充数组（比如实际场景可能是图片加载完成回调）
setTimeout(() => {
  imgDim.push(300);
  imgDim.push(300);
  // 这里数组已经有值了，再赋值
  let width = imgDim[0];
  let height = imgDim[1];
  let testString = "s994320";
  if (/^[ms]\d+$/.test(testString)) {
    console.log(imgDim);
    console.log(width, height); // 现在会正常输出300 300
  }
}, 1000);

方案2：用Promise + async/await（更优雅的异步处理）

如果你的异步操作支持Promise（比如fetch请求、某些API），用async/await能让代码更像同步逻辑：

// 模拟返回数组的异步操作（比如实际是请求图片尺寸的接口）
function getImgDimensions() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([300, 300]);
    }, 1000);
  });
}

async function handleDimensions() {
  // 等待异步操作完成，拿到填充好的数组
  let imgDim = await getImgDimensions();
  let width = imgDim[0];
  let height = imgDim[1];
  let testString = "s994320";
  if (/^[ms]\d+$/.test(testString)) {
    console.log(imgDim);
    console.log(width, height);
  }
}

// 执行函数
handleDimensions();

如果你确实是同步代码出问题？ #

那可以检查这两点：

• 有没有在if块里重新声明了width或height（比如写了let width;），导致内层变量覆盖了外层的。
• 有没有其他代码在你赋值width之后，清空或者修改了imgDim数组。

内容的提问来源于stack exchange，提问作者Ish Sah.