为什么console.log在promise循环后工作[重复]

Question

我编写了一段代码来从 API 收集一些美国城市的坐标。

基本上：

• 我有一个大数组（数据），其中包含一些公司信息，由它们所在的美国州组织
• 我创建了一个名为 coords 的空数组
• 我遍历我的大数组，其中所有数据都是为了找到每个州的独特城市
• 对于每个城市，我从 API 获取坐标并将其推送到我的数组 coords 中
• 循环结束后，我控制台记录 coords 数组，它可以工作。

console.log(coords) 不应该只显示一个空数组吗？

当我尝试做任何其他事情时（例如 JSON.stringify），我得到一个空数组（可能是因为循环后代码在承诺解决之前执行？但是为什么不使用 console.log？）

有人可以向我解释一下这种奇怪的行为吗？

// const data = ...allmydata...
let coords = []
const key = 'MYKEY'

for(let state in data){
  coords[state] = []
  // get the list of unique cities
  let cities = [...new Set( data[state].map( x => x['Largest Location'] ) )]

  // this is the fetching loop: for each city name
  // I'm getting the coordinates asynchronously
  cities.forEach( (city) => {
    coords[state][city] = {
      lat: undefined,
      lng: undefined
    }
    let req = `http://open.mapquestapi.com/geocoding/v1/address?key=${key}&location=${city},${state}`
    fetch(req)
    .then( res => res.json() )
    .then( res => {
      coords[state][city]['lat'] = res.results[0].locations[0].latLng.lat
      coords[state][city]['lng'] = res.results[0].locations[0].latLng.lng
    })
    .catch( err => console.log(err) )
  })

}
// out of the loop

// this displays my array nicely structured in the console
console.log(coords)

// this displays []
console.log(coords.map(x => x))

// this displays []
console.log(JSON.stringify(coords))

我不认为这是所有关于为什么异步代码中未定义值的问题的重复（我已经阅读了一个公平的份额），这一次值看起来定义了它不应该恕我直言。

提前致谢

Answer 1

我在 Firefox 中查看过这个，只是为了确保我做对了。

我相信正在发生的事情是，您正在记录您的数组，但当时它仍然是空的。

但是，从今天开始，有了更好的控制台，至少在 Firefox 中，我不仅获得了变量，还获得了对变量的引用。

结果出来后，现有的变量就会被添加进去。当我点击小“展开”三角形时，我实际上注意到我可以看到我在记录后添加的空数组中的数据。