javascript - 使条件函数更有效

Question

我想制作一个根据给定参数修改变量的函数。

该函数检查一个变量和该字符串中的数字。然后通过参数，我指定将数字增加或减少 1 (++1)。

还有一个数组，如果数字等于数组的长度，那么它就变成1，如果数字小于1，那么它就等于数组的大小。这是为了确保字符串的数量不会小于 1 或大于数组的长度。

带有数字的字符串是Music1。所以圆圈会是这样的:...., Music1, Music2, Music3, Music4, Music1, Music2, Music3, ....

var MyArray = ["Music1", "Music2", "Music3", "Music4"];
var currentMusic = "Music1";

$(".increase").on('click tap', nextMusic);
$(".decrease").on('click tap', previousMusic);

function nextMusic() {
  unaryChange('plus')
}

function previousMusic() {
  unaryChange('minus')
}

function unaryChange(operation) {
  if (currentMusic === "Music4") {
    currentMusic = "Music1"
  } else if (currentMusic === "Music0") {
    currentMusic = "Music4"
  }
  if (operation === "plus") {
    currentMusic = currentMusic.replace(/\d+$/, function(n) {
      return ++n
    });
  } else {
    currentMusic = currentMusic.replace(/\d+$/, function(n) {
      return --n
    });
  }

  console.log(currentMusic);
  $(".text").text(currentMusic);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="increase">increase</button>
<button class="decrease">decrease</button>
<p class="text">value</p>

上述方法几乎可以完成工作，但我正在寻找更简单、更专业的解决方案。它看起来效率不高。例如，必须有更好的方法来指定参数 operation 而不是 plus 之类的字符串或条件。

我需要以更好的方式、更专业的方式重写此功能，并按照描述的方式工作。

提前致谢。

Answer 1

最好使用数组索引而不是值

function unaryChange(operation) {
  var currentIndex = MyArray.findIndex(function(item) {
    return item === currentMusic;
  });

  if(operation === 'plus') {
    newIndex = currentIndex < MyArray.length - 1 && currentIndex + 1 || 0;
  } else {
    newIndex = currentIndex > 0 ? currentIndex -1 : MyArray.length -1;
  }

  currentMusic = MyArray[newIndex]
  $(".text").text(currentMusic);
}

在这种情况下，无论数组的大小如何，它都可以工作。

一个工作示例 https://jsbin.com/rahomorupa/4/edit?html,js,console,output