单击时，循环遍历每个对象键

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

就像这样：

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

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

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

我可以获取对象键和值，然后我就迷失了。

• 这是主题对象

  让主题= { 默认值：空， night: [具有嵌套数组的多个对象], dark: [具有嵌套数组的多个对象] }

• 在谷歌地图内创建按钮然后添加EventListener

  让 themeToggle = document.createElement('button'); themeToggle.classList.add('controlUI'); themeToggle.innerHTML = ('模式'); themeToggle.title = '更改地图主题';

  map.controls[google.maps.ControlPosition.TOP_LEFT].push(themeToggle);

  让模式=真； themeToggle.addEventListener('点击', () => { 如果（模式）{ map.setOptions({styles: theme.night}); } 别的 { map.setOptions({样式: 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 (or Object.getOwnPropertyNames） 反而：

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