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

【问题标题】：On click, loop through each object key单击时，循环遍历每个对象键
【发布时间】：2019-12-29 23:08:35
【问题描述】：

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

像这样：

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

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

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

我可以得到对象的键和值，然后我就迷路了。

这是主题对象

让主题 = { 默认值：空，晚上：[具有嵌套数组的多个对象]，黑暗：[具有嵌套数组的多个对象] }
在谷歌地图中创建按钮然后添加事件监听器

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

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

让模式=真； themeToggle.addEventListener('click', () => { 如果（模式）{ map.setOptions({styles: theme.night}); } 别的 { map.setOptions({styles: 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])
    }
  });

它默认选择最后一个，我无法切换。

任何帮助都将不胜感激，只需尝试将所有拼图加在一起即可。

【问题讨论】：

对象键是无序的，所以这绝对不可靠。

标签： javascript arrays loops object

【解决方案1】：

将对象值收集到一个数组中，然后在每次点击时以模数递增一个索引：

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）：

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

【讨论】：

感谢您的解释。在进行了测试和使用控制台日志之后，它真的帮助我理解了它是如何工作的。 :D

【解决方案2】：

你可以像这样遍历一个对象

var invoice = {
  name: 'anik',
  age: 29,
  designation: 'Full Stack Developer'
}

Object.keys(invoice).map((d,i)=>{                 
  console.log(d +' : '+invoice[d]);
})

【讨论】：