上一個、下一個邏輯優化

在我們的項目中，經常有這一種場景，就是有上一個、下一個按鈕，點擊之後去跳轉選擇。比如在一個音樂播放器中，我們希望點擊下一首按鈕播放列表中下一首歌，點擊上一首按鈕播放上列表中上一首歌。在這種場景中，當歌曲播放到最後一首時，點擊下一首，我們希望重新播放第一首歌。播放到第一首歌時，點擊上一首，我們希望播放列表上最後一首歌。這個時候我們就要去做判斷了

 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   }

這種寫法代碼既簡潔，又很能體現我們的逼格，簡直一舉兩得！