如何用JavaScript从Firebase实时数据库获取对象数组并访问元素？

首先，你的第一个代码片段里的核心问题是异步操作的执行顺序：Firebase的once("value")是异步方法，它的回调函数要等数据从服务器获取完成后才会执行，但你写在回调外的console.log(scores[1].Name)会先一步运行——这时候scores还是初始的空数组，自然会出现无法访问的错误。

不过你后来把日志移到回调里后，依然无法访问scores[1]，这是因为Firebase返回的"数组"本质是一个对象。Firebase不会存储真正的数组，当你存入类数组数据时，它会自动转换成以数字（或push生成的随机字符串）为键的对象（比如{"0": {...}, "1": {...}}），虽然外观和数组类似，但直接用数字索引scores[1]无法正确访问。

正确的解决思路与代码示例 #

1. 确保在异步回调内处理数据

所有依赖Firebase返回数据的操作，必须放在once的回调函数内部，或者用Promise/async-await语法来处理异步逻辑。

2. 将Firebase返回的对象转为真正的数组

可以通过两种方式实现：

方法一：用Object.values()转换为数组

var scores = [];
var database = firebase.database();
database.ref().once("value", function(snap){
  const rawData = snap.val();
  // 将对象的所有值提取出来，转为真正的数组
  scores = Object.values(rawData);
  // 现在可以正常通过索引访问了
  console.log(scores);
  console.log(scores[1]); // 输出{Name: "Josh"}
  console.log(scores[1].Name); // 输出"Josh"
});

方法二：用Firebase快照自带的forEach遍历

如果不需要转换为数组，也可以直接遍历快照里的每个子节点：

var database = firebase.database();
database.ref().once("value", function(snap){
  snap.forEach(function(childSnap) {
    const item = childSnap.val();
    console.log(item.Name); // 依次打印每个对象的Name值
  });
});

方法三：用async/await简化异步代码（现代写法）

如果你的运行环境支持ES6+，可以用async-await让异步代码看起来更像同步逻辑：

async function fetchScores() {
  var database = firebase.database();
  const snap = await database.ref().once("value");
  const rawData = snap.val();
  const scores = Object.values(rawData);
  console.log(scores[1].Name);
}
// 调用函数
fetchScores();

补充说明 #

Firebase之所以将数组转为对象存储，是为了避免并发修改数组时出现的索引移位问题。所以即使你存入的是标准数组，取出来时也会是键值对结构，必须手动转换后才能用数字索引访问。

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