在不满足要求之前，如何使此函数递归/运行？

Question

到目前为止，我只能在每个if语句之后硬编码相同的代码段，该语句只需要更改getAdjacentCells(id)所使用的参数。我一直没能找到办法重复这部分。我认为这可以递归地完成，但是我不知道如何去做。

编辑:我最初输入的是一个对象数组：{ isCellEmpty : null}，{topCenter："cell-1-2"}，{topRight："cell-1-3"}，{middleLeft: null}，{middleRight："cell-2-3"}，实际上它是一个单独的对象：{topLeft: null，topCenter："cell-1-2"，topRight："cell-1-3"，middleLeft: null，middleRight："cell-2-3"}。

// Gets an object that looks like this: {topLeft: null, topCenter: "cell-1-2", topRight: "cell-1-3", middleLeft: null, middleRight: "cell-2-3"}
function isCellEmpty(adjacentCells) {
  Object.values(adjacentCells).forEach(id => {
    // Checks that the ids in stored in the object values do not equal null
    if (id !== null) {
      board[getBoardPosition(id)].opened = true;
      // getAdjacentCells() will return either an array of objects similar to the one the function takes as an argument or an integer
      // if getAdjacentCells(id) returns a number, add a div to the HTML element with that id
      if (typeof (getAdjacentCells(id)) === "number") {
        // Removes all other divs, this prevents repetition
        $("#" + id).empty();
        // Appends an empty div
        $("#" + id).append("<div></div>");
      // HERE'S WHERE IT STARTS: If getAdjacentCells(id) returns an object, do the same as above with every id in it
      } else if (typeof (getAdjacentCells(id)) === "object") {
        Object.values(getAdjacentCells(id)).forEach(id2 => {
          if (id2 !== null) {
            board[getBoardPosition(id2)].opened = true;
            if (typeof (getAdjacentCells(id2)) === "number") {
              $("#" + id2).empty();
              $("#" + id2).append("<div></div>");
            // HERE IT REPEATS: 
            } else if (typeof (getAdjacentCells(id2)) === "object") {
              ... 
            }
          }
        })
      }
    }
  });
}

Answer 1

您可以使用从getAdjacentCells获得的值进行递归调用。但是，要确保同一id只调用一次id。现在，当您重复相同的调用时，效率很低。

还请参阅代码中的其他一些建议。

function isCellEmpty(adjacentCells) {
    // I would move this check here, although not necessary if you prefer it in the loop.
    if (typeof adjacentCells === "number") {
        $("#" + id).empty().append("<div>"); // You can chain jQuery...
        return;
    } 
    for (let id of adjacentCells) { // Just use a for..of loop
        if (id === null) continue; // keep IF-ELSE nesting flat.
        let cell = board[getBoardPosition(id)];
        if (cell.opened) continue; // Add this to avoid circling around
        cell.opened = true;
        isCellEmpty(getAdjacentCells(id)); // recursive call
    }
}

Object.values

您在代码的注释中写道：

getAdjacentCells()将返回与函数作为参数的对象数组或整数

然而，你在这个答案下面的评论似乎表明，情况并不总是如此。它可能是一个简单的对象，可以解释为什么您使用Object.values来迭代它。如果是这样的话，我会敦促更改getAdjacentCells，以便它确实返回一个数组。或者，如果这是不可能的，那么就像您已经做的那样使用Object.values：

function isCellEmpty(adjacentCells) {
    // I would move this check here, although not necessary if you prefer it in the loop.
    if (typeof adjacentCells === "number") {
        $("#" + id).empty().append("<div>"); // You can chain jQuery...
        return;
    } 
    for (let id of Object.values(adjacentCells)) { // Just use a for..of loop
        if (id === null) continue; // keep IF-ELSE nesting flat.
        let cell = board[getBoardPosition(id)];
        if (cell.opened) continue; // Add this to avoid circling around
        cell.opened = true;
        isCellEmpty(getAdjacentCells(id)); // recursive call
    }
}

Answer 2

递归在这里应该工作得很好:最基本的情况是使用id2调用自己的方法。但是，假设getAdjacentCells可能返回您已经访问过的单元格，那么除非您能够跟踪您已经访问过的in并将其传入，否则您将以无限递归的方式结束。

function setCellState(id, visited) {
  if(id === null) {
    return;
  }
  if(visited === undefined) {
    visited = new Set();
  }
  if(visited.has(id)) {
    return;
  }
  visited.add(id);

  board[getBoardPosition(id)].opened = true;

  // getAdjacentCells() will return either an array of objects similar to the one the function takes as an argument or an integer
  let adjacentCells = getAdjacentCells(id);
  // if getAdjacentCells(id) returns a number, add a div to the HTML element with that id
  if (typeof (adjacentCells) === "number") {
        // Removes all other divs, this prevents repetition
        $("#" + id).empty()
          // Appends an empty div
          .append("<div></div>");
  } else if (typeof (adjacentCells) === "object") {
    Object.values(adjacentCells).forEach(id2 => setCellState(id2, visited));
  }

我冒昧地更改了方法名，以更好地代表该方法的实际操作。我还将其更改为从单个单元格的ID开始，因为这简化了递归，并允许围绕getAdjacentCells行为的注释提供更好的上下文。