JavaScript对象非空却返回length=0，谷歌地图多标记添加失败

兄弟，我太懂你这种看着控制台明明有数据，结果循环死活跑不起来的憋屈了！咱们先把问题根源揪出来，再一步步搞定它。

问题根源分析 #

你说控制台打印myArray能看到内容，但myArray.length返回0，核心原因大概率是：你手里的myArray根本不是JavaScript数组，而是一个「类数组对象」或者普通的键值对对象。

JS里只有数组（以及少数类数组比如arguments）才有正确的length属性，普通对象直接访问length只会返回0。你可以在控制台敲Array.isArray(myArray)验证下，如果返回false，那实锤不是数组了。

两种解决方案 #

根据你的数据类型，选对应的方法就行：

方案1：把对象转成真正的数组

如果你的myArray是类数组（比如带数字键和length的对象），或者是后端返回的键值对对象，先转成数组再循环：

function createMarkers(myArray) {
  var myOptions = { zoom:6, center: new google.maps.LatLng(28.704059, 77.102490) };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  // 先判断是否为数组，不是的话转成数组
  const markerData = Array.isArray(myArray) ? myArray : Object.values(myArray);
  
  console.log(markerData.length); // 现在能拿到正确长度了
  for(var x=0;x<markerData.length;x++){
    var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(markerData[x].lat, markerData[x].lng), // 替换成你数据里的经纬度字段
      map: map
    });
  }
}

• 类数组用Array.from(myArray)或者[...myArray]也能转成数组；
• 普通键值对对象用Object.values(myArray)可以直接拿到所有值组成的数组。

方案2：直接遍历对象（不用转数组）

如果不想转数组，也可以用for...in循环直接遍历对象的属性：

function createMarkers(myArray) {
  var myOptions = { zoom:6, center: new google.maps.LatLng(28.704059, 77.102490) };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  // 遍历对象的每个属性，注意过滤原型链上的属性
  for(const key in myArray){
    if(myArray.hasOwnProperty(key)){
      const data = myArray[key];
      var marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(data.lat, data.lng),
        map: map
      });
    }
  }
}

额外排查小技巧 #

在控制台执行这两行代码，能快速确认数据类型：

console.log(typeof myArray); // 看是object还是array
console.log(Array.isArray(myArray)); // 直接判断是否为数组

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