Question

我有以下 JavaScript ，其目的是使用户能够使用array执行的eventListener功能在多个菜单之间来回循环切换...

var i = 0;
var steps = [
  function one() {do something},
  function two() {do something},
  function three() {do something},
  function four() {do something},
  function five() {do something}
]
//loops forward through array *successfully*
document.getElementById('forward').addEventListener("click", function() {
  steps[i]();
}
//loops backwards through array *unsuccessfully*
document.getElementById('backward').addEventListener("click", function() {
  steps[i]().reverse();
}

第一个eventListener函数成功地循环通过array，但是第二个eventListener函数 backward 无法反向循环遍历数组（有点惊讶）。

首先，我不确定如何反向循环包含功能的array。

其次，我想知道是否有可能从array的特定点开始反向循环array；本质上，如果array已经遍历并且没有超出 function three（）的范围，是否有一个脚本可以使用户向后循环到 two（），然后 one（），然后再次转发？

我在StackOverflow上阅读了许多有关array.reverse（）的问题，但是我发现似乎没有一个问题涉及函数的存在和/或反转循环中间数组。

因此，感谢您的任何回答，我们将不胜感激！

Answer 1

我认为您不需要遍历数组。您需要“管理状态”，这意味着您要递增和递减i。更新状态后，您可以使用steps[i]找到正确的函数并调用它。

var activeMenuIndex = 0;

var steps = [
  function one() {console.log("activate menu 1") },
  function two() {console.log("activate menu 2") },
  function three() {console.log("activate menu 3") },
  function four() {console.log("activate menu 4") },
  function five() {console.log("activate menu 5") }
];

var activateCurrentMenu = function() {
  var activator = steps[activeMenuIndex];
  
  if (activator) {
    activator();
  } else {
    console.log("Out of bounds!");
  }
};

var nextMenu = function() {
  // TODO: Check for out of bounds
  activeMenuIndex += 1;
  activateCurrentMenu();
};

var prevMenu = function() {
  // TODO: Check for out of bounds
  activeMenuIndex -= 1;
  activateCurrentMenu();
};


document.getElementById('forward').addEventListener("click", nextMenu);
document.getElementById('backward').addEventListener("click", prevMenu);

<button id="backward">back</button>
<button id="forward">next</button>

尽管要回答这个问题：遍历一个函数数组与遍历任何其他数组没有什么不同。您可以使用for块，也可以使用foreach。

如果要反向循环遍历数组，可以调用.reverse().foreach（这会使原始数组发生变化）。

Answer 2

这是您要找的吗？遍历数组

   var steps = [
    function one() { console.log("1") },
    function two() { console.log("2") },
    function three(){ console.log("3") },
    function four() { console.log("4") },
    function five() { console.log("5") }
    ]
    //loops forward through array
    function forward(i){
      steps.slice(0,i).forEach(function(el){ el(); });
    }
    //loops backwards through a the reversed aarray
    function backward(i) {
      steps.reverse().slice(0,i).forEach(function(el){ el(); });
    }

    forward(3);
    backward(3);

在没有jQuery的情况下通过包含函数的数组的循环的反向方向

2 个答案: