循環後數組未填充？

Question

我從來沒有真正理解JavaScript中的變量範圍，所以我很高興我真的遇到了這個問題。

這裏是我的問題：

getPlaceNames(){ 
var places = []; 
var source =firebase.database().ref(`${this.props.countryProp}/${this.props.cityProp}`); 
source.on('value', function(snapshot){ 
    for (var key in snapshot.val()) 
    places.push(key); 
}); 
console.log(places); 
return places; 
} 

所以發生了什麼是循環完成後places最終還是作爲一個空數組。到底發生了什麼，我該如何解決？

Answer 1

您正在使用異步調用。在你的代碼中，執行console.log(places);時，function(snapshot)尚未被調用。

因此可用於回調：

function getPlaceNames(callback){ 
    var source = firebase.database().ref(`${this.props.countryProp}/${this.props.cityProp}`); 
    source.on('value', function(snapshot){ 
     var places = []; 
     for (var key in snapshot.val()) { 
      console.log(key); 
      places.push(key); 
     } 
     callback(places); 
    }); 
} 

getPlaceNames(function(places){ 
    console.log(places); 
});