Javascript 如何使用模数反向循环数组项

我正在编写一个react组件，当单击forward

handleClickLeft

或backward

handleClickRight

按钮时，它会向前或向后循环一个数组。我使用模逻辑来实现这一点。我可以让前进按钮

手柄点击左

正常工作，但我不知道如何使反向按钮

手柄点击右

。下面是我的示例代码：

export default class Rooms extends React.Component {
   constructor(props, context) {
      super(props, context);
      this.state = {indexPos: [0, 1, 2]};
      this.state.itemArry = [{room1: 'this is room1'}, {room2: 'this is room2'}, {room3: 'this is room3'}, {room4: 'this is room4'}];

      this.handleClickLeft = this.handleClickLeft.bind(this);
      this.handleClickRight = this.handleClickRight.bind(this);
   }
   render() {   //Using index to show each item in the itemArry
      let firstItem = this.state.indexPos[0]
      let secondItem = this.state.indexPos[1]
      let thirdItem = this.state.indexPos[2]       
      <div>
         <ul>
           <li>this.state.itemArry[firstItem]</li>
           <li>this.state.itemArry[secondItem]</li>
           <li>this.state.itemArry[thirdItem]</li>
         </ul>
      </div>
   }

   handleClickLeft(){     // This one is working, it loops through the array in order and only shows three items at once. Ex: every time the forward button is clicked, indexPos changes >> [0, 1, 2] --> [1, 2, 3] --> [2, 3, 0]... 
      let vals = this.state.indexPos;
      let arryLength = this.state.itemArry.length;
      this.setState({
         indexPos: [(vals[0] + 1) % arryLength, (vals[1] + 1) % arryLength, (vals[2] + 1) % arryLength]
      });
   }

  handleClickRight(){  //This one is NOT working. It should be going in reverse 
     let vals = this.state.indexPos;
     let arryLength = this.state.itemArry.length;
     this.setState({
        indexPos: [(vals[0] - 1 % arryLength), (vals[1] - 1 % arryLength), (vals[2] - 1 % arryLength)]
     })
  }
}

保持每个值为正，但它给了我一个不同的结果，在其中一个indexPos值达到0后，它只循环2项

这就是使用Math.abs（）时发生的情况：

这就是我希望

handleClickRight

循环的方式：

indexPos: [0, 1, 2] --> [4, 0, 1] --> [3, 4, 0] --> [2, 3, 4] --> [1, 2, 3] --> [0, 1, 2]

---

我提前感谢你的帮助

我认为下面的代码片段可能有助于在数组中反向循环，而无需检查绑定

int len = arr.length;
int j = len - 1;
j = ( j - 1 + len ) % len

---

我想你可以通过以下方式实现：

   targetIndex = (arryLength + (index- x)% arryLength ) % arryLength 

其中：

• 索引：是您要从中回顾的位置

  explanation: 
   in Modulo arithmetic adding arryLength any number of times to an index and doing a mod % arryLength will not change the position of the index within the array
   -(index- x)% arryLength could result in a negative value
   -this value would lie between -arryLength and +arryLength (non inclusive)
   -now adding arryLength to the resulting value and taking the mod again we get a value between 0 and arryLength
  

• x:是您要回顾的项目数

  explanation: 
   in Modulo arithmetic adding arryLength any number of times to an index and doing a mod % arryLength will not change the position of the index within the array
   -(index- x)% arryLength could result in a negative value
   -this value would lie between -arryLength and +arryLength (non inclusive)
   -now adding arryLength to the resulting value and taking the mod again we get a value between 0 and arryLength
  

---

不能用模数来做，因为<代码> 1%长度>代码>返回代码> -1 ，而不是<代码>长度-1 /代码>。我认为这是JavaScript模数规范中的一个错误，但就是这样。您需要使用条件而不是模数。

explanation: 
 in Modulo arithmetic adding arryLength any number of times to an index and doing a mod % arryLength will not change the position of the index within the array
 -(index- x)% arryLength could result in a negative value
 -this value would lie between -arryLength and +arryLength (non inclusive)
 -now adding arryLength to the resulting value and taking the mod again we get a value between 0 and arryLength