JavaScript For循环仅输出数组最后一个值的解决方法

尝试遍历列举一组数值，期望展示数组内所有更新后的值，但实际仅打印输出数组的最后一个值。单独通过console.log打印longLat[itemIndex]时可看到所有对应数据，这些数据本应属于同一个数组：

• 控制台折叠状态输出：
  
• 控制台展开状态输出：
  

原实现代码如下：

let longLat = []

for (let index of this.overwatchTargets) {
  let coordsArr = [index["longitude"], index["latitude"], index["userName"], index["dateTimeCaptured"]]
  longLat.push(coordsArr)

  for (let itemIndex in longLat) {
    // Update location coords
    this.map.getSource('data-source').setData({
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "properties": {
          'description': "Dispatcher: " + longLat[itemIndex][2] + "\n" + "\Lng/Lat\:" + longLat[itemIndex][0] + " / " + longLat[itemIndex][1] + "\n" + "\StartTime\: " + longLat[itemIndex][3]
        },
        "geometry": {
          "type": "Point",
          "coordinates": longLat[itemIndex] // 预期展示数组所有元素，实际仅展示最后一项
        }
      }]
    });
  }
}

1. 你在两层循环内部反复调用setData更新地图数据源，每次调用都会完全覆盖上一次设置的数据源内容，不会做内容追加
2. 每次调用setData时传入的features数组里只包含当前循环到的单个点位要素，循环到最后一次时，数据源里就只剩最后一个点位
3. 内层遍历longLat的循环完全冗余：每push一个新坐标就从头遍历整个数组重复执行覆盖操作，除了重复触发地图重绘没有实际作用

不要在循环内反复调用setData覆盖数据源，先遍历所有目标点位组装好完整的要素集合，所有数据处理完成后仅调用一次setData，把完整的FeatureCollection传入即可。

修复后代码：

let longLat = []
const allFeatures = []

// 遍历所有目标点，组装完整的要素数组
for (const target of this.overwatchTargets) {
  const coordsArr = [
    target.longitude,
    target.latitude,
    target.userName,
    target.dateTimeCaptured
  ]
  longLat.push(coordsArr)

  allFeatures.push({
    "type": "Feature",
    "properties": {
      description: `Dispatcher: ${coordsArr[2]}\nLng/Lat: ${coordsArr[0]} / ${coordsArr[1]}\nStartTime: ${coordsArr[3]}`
    },
    "geometry": {
      "type": "Point",
      "coordinates": coordsArr
    }
  })
}

// 所有要素组装完成后，一次性更新数据源
this.map.getSource('data-source').setData({
  "type": "FeatureCollection",
  "features": allFeatures
});

注：原代码中\Lng/Lat\、\StartTime\属于无效转义写法，修复时已同步修正。

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