能否用数学函数简化带循环效果的分页逻辑实现？

在实现分页功能时，想必大家都遇到过这样的场景：处于首项或末项时，用户点击上一页或下一页会触发循环跳转。我的基础实现代码如下：

基础实现代码 #

JavaScript #

let total = 3;
let index = 0;

const goto = (where) => {
  index += where === 'prev' ? -1 : 1;

  if (index < 0) index = total - 1;
  if (index >= total) index = 0;
  
  document.getElementById('b').textContent = index;
}

document.getElementById('a').addEventListener('click', () => goto('prev'));
document.getElementById('c').addEventListener('click', () => goto('next'));

HTML #

<button id="a" type="button">Prev</button>
<span id="b">0</span>
<button id="c" type="button">Next</button>

请问能否借助巧妙的数学方法简化这些繁琐的if判断？同时，替代方案是否具备良好的可读性，便于其他开发者理解？

简化方案：用取模运算替代条件判断 #

完全可以通过取模运算简化这两个if判断，用数学计算直接处理循环边界，无需分支判断。

简化后的代码 #

let total = 3;
let index = 0;

const goto = (where) => {
  const step = where === 'prev' ? -1 : 1;
  // 取模运算实现循环分页：负数加total确保为正，再取模得到正确索引
  index = (index + step + total) % total;
  
  document.getElementById('b').textContent = index;
}

document.getElementById('a').addEventListener('click', () => goto('prev'));
document.getElementById('c').addEventListener('click', () => goto('next'));

逻辑原理 #

• 当点击Prev导致index变为负数时，加上total能让数值先转为正数，再对total取模就会得到最后一项的索引（比如total=3时，index=-1计算后是2）。
• 当点击Next导致index超出total-1时，直接取模会自动回到起始索引0（比如index=3时，3%3=0）。

可读性说明 #

• 熟悉取模运算的开发者一眼就能看出这是循环分页的实现，代码更紧凑简洁。
• 要是担心团队里有人不理解，可以加一行注释说明逻辑，就像上面代码里那样，这样既能简化代码，又不会牺牲可读性。
• 对比原代码的两个分支判断，这种写法减少了逻辑分支，也避免了因边界判断遗漏引发的潜在bug。

内容的提问来源于stack exchange，提问作者lampshade