Javascript 单击后，循环遍历每个对象关键点

我还在学习JS，有些东西比别人更难理解

像这样：

我试图通过允许用户点击自定义按钮来改变谷歌地图的主题

我使用了if-else，这很好，但我想添加更多主题并使用循环。用户每次单击时，都会选择：

object key 0, 
then click again object key 2 
and object key 3 
and repeat 

我可以得到对象键和值，在那之后我是如何迷路的

• 这是主题对象
  让主题={ 默认值：null， night:[具有嵌套数组的多个对象]， 深色：[具有嵌套数组的多个对象] }

• 在谷歌地图中创建按钮，然后添加VentListener
  让themeToggle=document.createElement（'button'）； 添加（'controlUI'）； themeToggle.innerHTML=（'Mode'）； themeToggle.title='更改地图主题'
  map.controls[google.maps.ControlPosition.TOP_LEFT].push（主题切换）
  让mode=true； themeToggle.addEventListener（'单击'，（）=>{ 如果（模式）{ setOptions（{style:theme.night}）； }否则{ setOptions（{style:theme.default}）； } 模式=！模式； });

以上工作正常

我正在努力将if-else转换为循环，选择每个对象键，然后将其添加到：

map.setOptions({styles: theme.night})

然后单击它，循环遍历每个键并重复

themeToggle.addEventListener('click', () => {
    for ( let key  in theme) {
      map.setOptions({styles: theme[key]});
      console.log(theme[key])
    }
  });

默认情况下，它会选择最后一个，我无法切换

---

任何帮助都将不胜感激，只需尝试将所有谜题添加到一起。

将对象值收集到一个数组中，然后在每次单击时使用模增加索引：

const vals = Object.values(theme);
let i = 0;
themeToggle.addEventListener('click', () => {
  map.setOptions({styles: vals[i]});
  i = (i + 1) % vals.length;
});

虽然大多数环境都会导致对象的

object.values

以升序数字后跟插入顺序，但这并不能保证。如果需要有保证的可预测排序，请改用

Reflect.ownKeys

（或

Object.getOwnPropertyNames

）：

---

您可以通过这样的对象循环

var发票={
姓名：“anik”，
年龄:29,，
名称：“全堆栈开发人员”
}
Object.keys（invoice）.map（（d，i）=>{
console.log（d+'：'+发票[d]）；
})

对象键是无序的，因此这绝对不可靠。感谢您的解释。在完成测试和使用控制台日志之后，它确实帮助我了解了它是如何工作的：D

const vals = Reflect.ownKeys(theme)
  .map(key => theme[key]);