数组错误解释

时间:2018-08-30 11:17:03

标签: javascript

我正在用javascript在php上编码,并且确实发生了一些奇怪的事情。

我有此代码:

   var lat = [];
   var lng = [];
    downloadUrl('db.php', function (data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(markers, function (markerElem) {

          lat.push(markerElem.getAttribute('lat'));
          lng.push(markerElem.getAttribute('lng'));


          var icon = customLabel[type] || {};

          var marker = new google.maps.Marker({
            map: map,
            position: point,
            label: icon.label
          });      
        });
      });

当我运行console.log(lat)lng时,我看到该数组包含一些条目(准确地说是9个),但是随后我打印了console.log(lat.length),并说长度为0。< / p>

但是如果在该代码下,我手动添加了更多条目lat.push("new entry");,我看到它已添加到先前的内容中,并且长度更改为1.。在我添加新条目后的图片上,您可以看到长度为10,但是控制台报告1.有任何想法吗?

enter image description here

------编辑----

function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(47.401775, 8.772933),
        zoom: 5
      });

      var infoWindow = new google.maps.InfoWindow;
      // Change this depending on the name of your PHP or XML file



      var lat = [];
      var lng = [];


      downloadUrl('db.php', function (data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(markers, function (markerElem) {
          var id = markerElem.getAttribute('id');
          var name = markerElem.getAttribute('name');
          var address = markerElem.getAttribute('address');
          var type = markerElem.getAttribute('type');
          lat.push(markerElem.getAttribute('lat'));
          lng.push(markerElem.getAttribute('lng'));


          var infowincontent = document.createElement('div');
          var strong = document.createElement('strong');
          strong.textContent = name
          infowincontent.appendChild(strong);
          infowincontent.appendChild(document.createElement('br'));
          var text = document.createElement('text');
          text.textContent = address
          infowincontent.appendChild(text);

          var icon = customLabel[type] || {};

          var marker = new google.maps.Marker({
            map: map,
            position: point,
            label: icon.label
          });

          marker.addListener('click', function () {
            infoWindow.setContent(infowincontent);
            infoWindow.open(map, marker);
          });
        });
      });

      lat.push("new entry");

      console.log(lat);

}

1 个答案:

答案 0 :(得分:1)

这在异步操作中很常见。浏览器中数组旁边的小警告i表示该数组的内容已被评估。当扩展数组时,浏览器控制台会延迟评估该数组。

另一方面,当您使用时:

console.log(array.length)

打印的长度与执行指令时的长度完全相同。

如果您希望在没有浏览器评估能力的情况下获得阵列的确切内容,请使用:

console.log(JSON.stringify(array))

您的代码在进行以下更改后应该可以工作:

function initMap() {

    downloadUrl('db.php', function (data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(markers, function (markerElem) {
            var id = markerElem.getAttribute('id');
            var name = markerElem.getAttribute('name');
            var address = markerElem.getAttribute('address');
            var type = markerElem.getAttribute('type');
            lat.push(markerElem.getAttribute('lat'));
            lng.push(markerElem.getAttribute('lng'));


            var infowincontent = document.createElement('div');
            var strong = document.createElement('strong');
            strong.textContent = name
            infowincontent.appendChild(strong);
            infowincontent.appendChild(document.createElement('br'));
            var text = document.createElement('text');
            text.textContent = address
            infowincontent.appendChild(text);

            var icon = customLabel[type] || {};

            var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
            });

            marker.addListener('click', function () {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
            });
        });
        //log the array here
        console.log(lat);
    });

}