JavaScript数组显示有内容但访问返回undefined的问题排查

核心原因：异步加载的时序矛盾 #

你遇到的问题本质是异步操作的时序不匹配：Leaflet的GPX插件加载文件是异步过程，主函数中执行console.log(Gpx_Array)、JSON.stringify(Gpx_Array)、访问Gpx_Array[0]时，push(coords)的操作其实还没完成。

浏览器的console.log有延迟显示对象最终状态的特性，所以你看到的是后续push完成后的数组，但同步执行的代码拿到的还是初始空数组，这就导致了JSON.stringify返回[]、索引访问undefined的矛盾现象。

优雅的解决方案：适配异步逻辑处理 #

方案1：利用GPX插件的加载完成回调 #

直接借助插件提供的loaded事件钩子，在回调中处理坐标数据，避免全局数组的来回传递：

// 无需全局声明Gpx_Array，在回调中直接处理数据
new L.GPX('目标GPX文件路径.gpx', {
  async: true
}).on('loaded', function(e) {
  const gpxLayer = e.target;
  // 提取路径坐标（若有多段路径可遍历getLatLngs()）
  const coords = gpxLayer.getLatLngs()[0].map(point => [point.lat, point.lng]);
  // 直接在这里使用坐标，或传递给业务处理函数
  handleGpxCoords(coords);
}).addTo(map);

// 业务处理函数
function handleGpxCoords(coordsArray) {
  console.log(coordsArray); // 坐标已正确加载
  console.log(JSON.stringify(coordsArray)); // 正常序列化
  console.log(coordsArray[0]); // 可正常访问索引
}

方案2：用Promise封装加载逻辑 #

如果需要复用GPX加载逻辑，可封装为Promise，通过await确保数据加载完成后再执行后续操作：

function loadGpxFile(url) {
  return new Promise((resolve, reject) => {
    new L.GPX(url, {
      async: true
    }).on('loaded', function(e) {
      const coords = e.target.getLatLngs()[0].map(point => [point.lat, point.lng]);
      resolve(coords);
    }).on('error', function(e) {
      reject(e.error);
    }).addTo(map);
  });
}

// 在async函数中调用
async function mainProcess() {
  try {
    const Gpx_Array = await loadGpxFile('目标GPX文件路径.gpx');
    // 所有操作都确保在数据加载完成后执行
    console.log(Gpx_Array);
    console.log(JSON.stringify(Gpx_Array));
    console.log(Gpx_Array[0]);
  } catch (err) {
    console.error('GPX加载失败:', err);
  }
}

// 启动主流程
mainProcess();

方案3：闭包封装全局坐标集合 #

若确实需要维护全局的坐标集合，用闭包封装状态，避免外部随意修改，同时确保只有加载完成后才更新数据：

const GpxCoordinateStore = (function() {
  let coordsCollection = [];
  
  return {
    addCoords: function(newCoords) {
      coordsCollection.push(...newCoords);
    },
    getCoords: function() {
      return [...coordsCollection]; // 返回副本，防止外部篡改内部状态
    },
    clear: function() {
      coordsCollection = [];
    }
  };
})();

// 加载GPX时更新集合
new L.GPX('目标GPX文件路径.gpx', {
  async: true
}).on('loaded', function(e) {
  const coords = e.target.getLatLngs()[0].map(point => [point.lat, point.lng]);
  GpxCoordinateStore.addCoords(coords);
  // 此时可安全获取完整数据
  console.log(GpxCoordinateStore.getCoords());
}).addTo(map);

临时方案可行的原因 #

你用计数器+localStorage的方案能工作，是因为手动等待了异步加载完成的时机，且localStorage是同步存储，但这种方式冗余且易出错，上述方案更符合JavaScript异步编程的规范。

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