上一个、下一个逻辑优化

 

在我们的项目中，经常有这一种场景，就是有上一个、下一个按钮，点击之后去跳转选择。比如在一个音乐播放器中，我们希望点击下一首按钮播放列表中下一首歌，点击上一首按钮播放上列表中上一首歌。在这种场景中，当歌曲播放到最后一首时，点击下一首，我们希望重新播放第一首歌。播放到第一首歌时，点击上一首，我们希望播放列表上最后一首歌。这个时候我们就要去做判断了

 1   function play (prevOrNext) {
 2     if (prevOrNext === 'NEXT') {
 3       if (index >= len - 1) {
 4         index = 0
 5       } else {
 6         index++
 7       }
 8     } else {
 9       if (index <= 0) {
10         index = len - 1
11       } else {
12         index--
13       }
14     }
15     indexBox.innerHTML = index
16   }

这种逻辑我们可以稍微优化一下

1   function play (prevOrNext) {
2     if (prevOrNext === 'NEXT') {
3       index = (index + 1) % len
4     } else {
5       index = (index - 1 + len) % len
6     }
7     indexBox.innerHTML = index
8   }

这种写法代码既简洁，又很能体现我们的逼格，简直一举两得！