从Firebase获取的数组显示有元素但length为0，如何实现遍历？

你通过以下代码从Firebase数据库填充位置数组：

const locationArray = [];
var ref = firebase.database().ref("locations");
ref.orderByKey().on("child_added", function(snapshot) {
    locationArray.push({'lat': snapshot.val().coordinates.latitude,'lon':snapshot.val().coordinates.longitude});
});
console.log(locationArray);

执行后，控制台展开数组能看到500条数据，但直接读取locationArray.length返回0，用for(const i in locationArray)也无法遍历，拆分纬度、经度数组后长度同样为0。

问题原因 #

Firebase的on("child_added")是异步事件回调，当你调用console.log(locationArray)时，数据库请求还没完成，回调函数还没执行，此时数组确实是空的。浏览器控制台显示的数组有数据是因为控制台采用惰性求值——你展开数组时，数据已经从服务器加载完成，控制台会更新显示，但代码执行时的数组状态还是初始空数组。

解决方案 #

方案1：一次性获取所有数据（推荐，适合不需要实时监听的场景） #

使用once("value")一次性拉取所有节点数据，在回调中处理完整数组：

const locationArray = [];
var ref = firebase.database().ref("locations");
ref.orderByKey().once("value", function(snapshot) {
  // 遍历所有子节点
  snapshot.forEach(childSnapshot => {
    locationArray.push({
      'lat': childSnapshot.val().coordinates.latitude,
      'lon': childSnapshot.val().coordinates.longitude
    });
  });
  
  // 此时数组已填充完成，可直接遍历
  console.log(locationArray.length); // 输出500
  // 方式1：forEach遍历
  locationArray.forEach(loc => {
    console.log(`纬度：${loc.lat}，经度：${loc.lon}`);
  });
  // 方式2：for...of遍历
  for (const loc of locationArray) {
    console.log(loc.lat, loc.lon);
  }
});

方案2：实时监听并等待所有数据加载完成（适合需要实时新增的场景） #

如果需要实时监听新添加的位置，可先获取总节点数，等数组长度等于总节点数时再遍历：

const locationArray = [];
var ref = firebase.database().ref("locations");
let totalNodeCount = 0;

// 先获取节点总数
ref.once("value", snapshot => {
  totalNodeCount = snapshot.numChildren();
});

// 监听子节点添加事件
ref.orderByKey().on("child_added", function(snapshot) {
  locationArray.push({
    'lat': snapshot.val().coordinates.latitude,
    'lon': snapshot.val().coordinates.longitude
  });
  
  // 检查是否所有数据都已加载
  if (locationArray.length === totalNodeCount) {
    console.log("所有数据加载完成，开始遍历：");
    locationArray.forEach(loc => {
      console.log(loc.lat, loc.lon);
    });
  }
  
  // 也可以在每次新增时单独处理当前数据
  console.log("新增位置：", snapshot.val().coordinates);
});

方案3：用async/await简化异步逻辑 #

将异步操作封装为async函数，让代码更易读：

async function loadAllLocations() {
  const ref = firebase.database().ref("locations");
  // 等待数据获取完成
  const snapshot = await ref.orderByKey().once("value");
  const locationArray = [];
  
  snapshot.forEach(childSnapshot => {
    locationArray.push({
      'lat': childSnapshot.val().coordinates.latitude,
      'lon': childSnapshot.val().coordinates.longitude
    });
  });
  
  // 遍历数组
  for (const loc of locationArray) {
    console.log(`纬度：${loc.lat}，经度：${loc.lon}`);
  }
  
  return locationArray;
}

// 调用函数
loadAllLocations();

内容的提问来源于stack exchange，提问作者het.oosten