单击时，循环浏览每个对象键 [英] On click, loop through each object key

问题描述

我仍在学习JS，比其他东西更难理解.

I'm still learning JS and something is harder to understand than others.

像这样:

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

I am trying to change the theme of google maps by allowing users to click on a custom button.

我一直在使用其他是否可行，但是我想添加更多主题并使用循环.每次用户单击时，它都会选择:

I was using if else which works great but i wanted to add more themes and using a loop. Each time a user clicks, it selects:

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

在那之后，我可以获得对象的键和值.

I can get the object keys and values how I'm lost after that.

• 这是主题对象

• This is the theme object

让主题= {默认值:null，晚上:[具有嵌套数组的多个对象]，黑暗:[具有嵌套数组的多个对象]}

let theme = { default: null, night: [multiple objects with nested arrays], dark: [multiple objects with nested arrays] }

在Google地图中创建按钮，然后添加EventListener

creating button inside google maps then addEventListener

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

let themeToggle = document.createElement('button'); themeToggle.classList.add('controlUI'); themeToggle.innerHTML = ('Mode'); themeToggle.title = 'Change map theme';

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

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

let mode = true;themeToggle.addEventListener('click'，()=> {如果(模式){map.setOptions({styles:theme.night});} 别的 {map.setOptions({styles:theme.default});}模式=！模式;});

let mode = true; themeToggle.addEventListener('click', () => { if (mode) { map.setOptions({styles: theme.night}); } else { map.setOptions({styles: theme.default}); } mode = !mode; });

以上工作正常

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

Im struggling to convert the if else to a loop and select each object key and then adding that to:

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

然后单击它会循环浏览每个键并重复

and then on click it loops through each key and repeat

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

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

it selects the last one by default and i cant toggle.

任何帮助，只要尝试将所有难题加在一起，将是不胜感激的.

Any help would e really appreciated, just trying add all the puzzle together.

推荐答案

将对象值收集到数组中，然后在每次单击时以模为底递增索引:

Collect the object values into an array, then increment an index with modulo on every click:

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 ):

While most environments will result in an object's Object.values in ascending numeric followed by insertion order, it's not guaranteed. If you need a guaranteed predictable ordering, use Reflect.ownKeys (or Object.getOwnPropertyNames) instead:

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

这篇关于单击时，循环浏览每个对象键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！