如何动态更改 foreach 循环内每个元素的输入值？

Question

我想更改 foreach 循环内每个 map 元素的坐标值。 例如，对于第一个 map 元素，我想分配坐标 [0] 等等。

function initMap() {    
var coordinates = [
        {
            "lat": 123,
            "lng": 123
        },
        {
            "lat": 123,
            "lng": 123
        },
        {
            "lat": 123,
            "lng": 123
        }
  ]
var mapElements = document.querySelectorAll('.map');
mapElements.forEach((element) => {
        const uluru = { lat:coordinates[0].lat, lng:coordinates[0].lng};// how do I dynamically change values here
        console.log(uluru);
        const map = new google.maps.Map(element, {  
            zoom: 4,
            center: uluru,
        });
  const marker = new google.maps.Marker({
        position: uluru,
        map: map,
    });
});
}

Answer 1

考虑这个例子。

function initMap() {
  var coordinates = [{
      "lat": 123,
      "lng": 123
    },
    {
      "lat": 123,
      "lng": 123
    },
    {
      "lat": 123,
      "lng": 123
    }
  ]
  var mapElements = document.querySelectorAll('.map');
  mapElements.forEach((element, index) => {
    const uluru = {
      lat: coordinates[index].lat,
      lng: coordinates[index].lng
    };
    console.log(uluru);
    const map = new google.maps.Map(element, {
      zoom: 4,
      center: uluru,
    });
    const marker = new google.maps.Marker({
      position: uluru,
      map: map,
    });
  });
}

这利用了index 。 查看更多： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

您也可以自己创建索引变量。

function initMap() {
  var coordinates = [{
      "lat": 123,
      "lng": 123
    },
    {
      "lat": 123,
      "lng": 123
    },
    {
      "lat": 123,
      "lng": 123
    }
  ]
  var mapElements = document.querySelectorAll('.map');
  var i = 0;
  mapElements.forEach((element, index) => {
    const uluru = {
      lat: coordinates[i].lat,
      lng: coordinates[i].lng
    };
    i++;
    console.log(uluru);
    const map = new google.maps.Map(element, {
      zoom: 4,
      center: uluru,
    });
    const marker = new google.maps.Marker({
      position: uluru,
      map: map,
    });
  });
}

这两者都有一些警告，因为forEach循环可能比你的数组有更多的元素。