如何使这个 function 递归/运行直到不满足要求？

Question

As of now, I can only hardcode the same snippet after every if statement, which only needs to have the argument that getAdjacentCells(id) takes changed. I haven't been able to find a way to repeat this part. I think this can be done recursively, but I don't know how to do it.

Edit: I initially typed that isCellEmpty got an array of objects: [{topLeft: null}, {topCenter: "cell-1-2"}, {topRight: "cell-1-3"}, {middleLeft: null}, {middleRight: "cell-2-3"}], when in reality it is a single object: {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

You can make the recursive call with the value you get from getAdjacentCells . Make sure however to call getAdjacentCells only once for the same id . Now it is quite inefficient as you repeat the same call.

See also some other suggestions in the code.

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

You write in the comments of your code that:

getAdjacentCells() will return either an array of objects similar to the one the function takes as an argument or an integer

However, your comments below this answer seem to suggest that this is not (always) the case. It maybe a plain object which would explain why you used Object.values to iterate it. If this is the case I would urge to change getAdjacentCells so that it really does return an array. Or if that is not possible then use Object.values like you already did:

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

Recursion should work just fine here: at its most basic you'd call your own method with id2 . However, assuming getAdjacentCells may return cells that you've already visited, you'll end up recursing infinitely unless you're able to track which IDs you've already visited, and pass that 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));
  }

I took the liberty of changing the method name to be more representative of what the method actually does. I also changed it to start with a single cell's ID, since that simplifies the recursion and that allows the comment around the behavior of getAdjacentCells to provide better context.