javascript - 如何通过对象名称动态检索对象属性？

Question

<分区>

Answer 1

全局变量是 window 对象的属性，您可以使用方括号 ([]) 表示法动态访问它们:

var wpmaps = document.querySelectorAll('.wpmaps');

for (var i = 0; i < wpmaps.length; ++i) {

  // this gives me "googlemaps_165" which is correct
  var dataName = wpmaps[i].getAttribute('data-id');

  // But I can't do this since dataName in this case is only a name, I can't access it this way
  var markers = window[dataName].markers;

  console.log(markers);
}

<script type='text/javascript'>
  /* <![CDATA[ */
  var googlemaps_165 = {
    "markers": [
      [1]
    ],
    "zoom": ""
  };
  var googlemaps_169 = {
    "markers": [
      [2]
    ],
    "zoom": ""
  };
  /* ]]> */
</script>
In HTML I have this

<div class="wpmaps wpmaps--165" data-id="googlemaps_165"></div>
<div class="wpmaps wpmaps--169" data-id="googlemaps_169"></div>

您还可以使用 NodeList.forEach()迭代节点而不是 for 循环，并通过元素 dataset 访问 data-id :

document.querySelectorAll('.wpmaps')
  .forEach(function(wpmap) {
    var dataName = wpmap.dataset.id;
    
    var markers = window[dataName].markers;
    
    console.log(markers);
  });

<script type='text/javascript'>
  /* <![CDATA[ */
  var googlemaps_165 = {
    "markers": [
      [1]
    ],
    "zoom": ""
  };
  var googlemaps_169 = {
    "markers": [
      [2]
    ],
    "zoom": ""
  };
  /* ]]> */
</script>
In HTML I have this

<div class="wpmaps wpmaps--165" data-id="googlemaps_165"></div>
<div class="wpmaps wpmaps--169" data-id="googlemaps_169"></div>