从Firebase获取值push到数组后控制台显示长度异常问题求助

问题原因 #

这不是代码逻辑错误，是两个特性共同作用的结果：

• 异步执行顺序：Firebase的on('value')是异步监听接口，调用后不会立刻执行回调函数gotData，需要等云端数据传输完成才会触发回调。你打印数组的操作大概率是在调用监听接口之后同步执行的，此时回调还没运行，数组确实只有3个初始元素，所以控制台首行会打印(3) [0, 3, 2]的快照。
• 浏览器控制台惰性求值：控制台打印引用类型（数组、对象）时，首行仅保留打印瞬间的内容快照，当你手动点击展开箭头时，浏览器才会读取该引用的当前最新值。此时云端数据已经返回，回调已经把14条新数据推入数组，所以展开后能看到总计17个元素，长度也显示为17。

解决方案 #

所有需要用到更新后数组的逻辑，都要放到gotData回调内部执行，不要放在监听接口外部同步执行。如果要验证数组实际长度，把打印操作也挪到回调最后即可：

var starCountRef = firebase.database().ref('PPGValues');
starCountRef.on('value', gotData);
function gotData(data){
  var data = data.val();
  var keys = Object.keys(data);
  for(var i=0; i < keys.length; i++){
    var k = keys[i];
    var yValue = data[k].yValue;
    x.push(Number(yValue));
  }
  // 回调执行完成后打印，此时数组已经更新完成，显示的长度与实际一致
  console.log(x);
  // 其他需要用到完整x数组的逻辑也写在这里
}

内容的提问来源于stack exchange，提问作者Cong Hoan Nguyen