尝试使用 $.each jquery 迭代器。这两者有什么区别？

Question

vertices 是 google.maps.LatLng 对象的数组，因此它们应该返回 latlng 点。它对于第一个代码片段来说效果很好。我在使用第二个时遇到问题。

// Iterate over the vertices.
for (var index =0; index < vertices.length; index++) {
  var value = vertices.getAt(index);
  contentString += "<br />" + "Coordinate: " + index + "<br />" + value.lat() +"," + value.lng();
      }

我觉得这段代码应该意味着完全相同的事情，但是当我使用每个迭代器时，我收到一个 javascript 错误：Uncaught TypeError: Cannot call method 'lat' of undefined

  $.each(vertices, function(index, value){
    contentString += "<br />" + "Coordinate: " + index + "<br />" + value.lat() +"," + value.lng();
  });

Answer 1

它会抛出错误，因为 vertices 不是普通的 javascript 数组（Javascript 中的 Array 对象没有 getAt 方法）。根据谷歌文档：

折线将一系列坐标指定为 LatLng 对象数组。要检索这些坐标，请调用 Polyline 的 getPath()，它将返回 MVCArray 类型的数组。
注意：您不能使用语法 mvcArray[i]; 简单地检索数组的第 i 个元素；您必须使用 mvcArray.getAt(i)。

所以你应该仍然有：

$.each(vertices, function(i) { var value = vertices.getAt(i); ... });

Answer 2

如果您正在迭代普通数组，那么它们在功能上非常相似，并且您的第二个版本可以工作。但看起来您正在迭代 MVCArray ，可能来自polyline.getPath，并且它不是一个数组。

从文档看来，您可以调用 .getArray() 来获取顶点的基本数组：

$.each(vertices.getArray(), function(index, value){
    contentString += "<br />" + "Coordinate: " + index + "<br />" + value.lat() +"," + value.lng();
});

Answer 3

后者运行的函数也为您提供了新的范围。

您可能不知道这一点，但您在 for 中声明的 var value 实际上是在与 for 本身（它的父级）相同的范围内声明的。

JavaScript 没有块作用域，只有函数作用域。因此，任何未在函数开头附近声明的 var 实际上都是为整个函数声明的，即使它嵌套在 if 或循环内。

另外，您无法获得 jQuery 提供的浏览器抽象。 jQuery 将检测您运行的浏览器，并可能选择一个性能更高的路径来执行 foreach，而另一个将始终使用 Array.getAt - 即使可能有更好的方法来做到这一点（假设浏览器开始提供本机函数例如 - 总是假设您更新 jQuery）

简而言之：jQuery 的人比您更了解浏览器及其怪癖，并且他们的方式免费为您提供循环范围。自己编写更容易出错，而且效率也会降低。

Answer 4

您首先需要确定 google api 返回的是什么。意味着当您使用它时

$.each(vertices, function(index, value){
    for(var i in value){
           alert('key =>'+i+' value=>'+value[i]);
    }
  });

这将使您正确理解 google api 返回的内容以及您是否能够调用 .lng() 和 .lat() 函数