如何動態更改 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循環可能比你的數組有更多的元素。