Per gli array, dovrei usare la prima posizione per memorizzare l'elemento selezionato, invece di variabile come "selectedIndex", se possibile?

Ad esempio, ho un pulsante di attivazione, che mostra l'elemento selezionato corrente e mostrerebbe l'elemento successivo quando viene cliccato, e può tornare al primo elemento. Ho 2 modi per memorizzare l'elemento selezionato corrente:

1.Usare una variabile i per memorizzare l'indice selezionato:

<button id="b" onclick="onButtonPressed()"/>
<button onclick="onSubmit()">Submit</button>
<script>
  let i=0;
  let arr=['Red','Yellow','Green','Blue'];
  function onButtonPressed(){
    i=i++%arr.length;
    document.getElementById('b').innerHTML=arr[i];
  }
  document.getElementById('b').innerHTML=arr[i]

  function onSubmit(){
    //call url:xxxxx.com/submit?value=arr[i]
  }
</script>

2.Usare la prima posizione come elemento selezionato

<button id="b" onclick="onButtonPressed()"/>
<button onclick="onSubmit()">Submit</button>
<script>
  let arr=['Red','Yellow','Green','Blue'];
  function onButtonPressed(){
    arr.push(arr.shift());
    document.getElementById('b').innerHTML=arr[0];
  }
  document.getElementById('b').innerHTML=arr[0]

  function onSubmit(){
    //call url:xxxxx.com/submit?value=arr[0]
  }
</script>

Se è possibile utilizzare entrambi i metodi e non mi interessa la posizione iniziale degli elementi, quale dovrei usare?