Question

为了计算Tic Tac Toe游戏的获胜者（我按照反应的tutorial），我创建/修改了calculateWinner功能。此函数接受一个对象数组，而这些对象中的每一个都有2个属性：

value（可以设置为'X'或'O'，默认为null）;和
isWinner（布尔值，默认为false）。

这个函数的作用是检查3个方块的某个组合（由它们在数组中的索引区分）是否具有相同的value，并将这些方块的“isWinner值更改为{{1 }}

问题是，在某些获胜组合中，当您检查整个数组本身时，一个或多个isWinner属性仍以某种方式设置为false。为了解决问题问题，这只发生在codepen上（到目前为止），但在StackOverflow的代码段中没有。 ~~（我会尽快在本地尝试。）~~在本地也是错误的。

true

doTheTest();

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];

  let winner = null;

  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];

    let squareA = squares[a];
    let squareB = squares[b];
    let squareC = squares[c];

    if (squareA.value && squareA.value === squareB.value && squareA.value === squareC.value) {
      squareA.isWinner = true;
      squareB.isWinner = true;
      squareC.isWinner = true;

      winner = squareA.value;

      console.log('squares to check:', a, b, c);

      // this returns three trues as expected
      console.log('The three winning values just after setting them:', squares[a].isWinner, squares[b].isWinner, squares[c].isWinner);

      // but if you'll check the three winning square objects in the array,
      // one or more isWinner property is still set to false
      // and for some reason, this only happens in certain winning combinations
      // e.g. it works just fine with [2, 4, 6] but produces this issue with [0, 4, 8]
      console.log('But the squares array itself still just after setting them', squares);
    } else {
      squareA.isWinner = false;
      squareB.isWinner = false;
      squareC.isWinner = false;
    }
  }

  return {
    winner: winner,
    squares: squares
  };
}


function doTheTest() {
	const squaresJSONString = '[{"index":0,"value":"X","coordinates":"1, 1","isWinner":false},{"index":1,"value":"O","coordinates":"2, 1","isWinner":false},{"index":2,"value":"X","coordinates":"3, 1","isWinner":false},{"index":3,"value":"O","coordinates":"1, 2","isWinner":false},{"index":4,"value":"X","coordinates":"2, 2","isWinner":false},{"index":5,"value":"O","coordinates":"3, 2","isWinner":false},{"index":6,"value":null,"coordinates":"1, 3","isWinner":false},{"index":7,"value":null,"coordinates":"2, 3","isWinner":false},{"index":8,"value":"X","coordinates":"3, 3","isWinner":false}]';

	/* The JSON string above in more readable format:
[
	{"value":"X","coordinates":"1, 1","isWinner":false},
	{"value":"O","coordinates":"2, 1","isWinner":false},
	{"value":"X","coordinates":"3, 1","isWinner":false},
	{"value":"O","coordinates":"1, 2","isWinner":false},
	{"value":"X","coordinates":"2, 2","isWinner":false},
	{"value":"O","coordinates":"3, 2","isWinner":false},
	{"value":null,"coordinates":"1, 3","isWinner":false},
	{"value":null,"coordinates":"2, 3","isWinner":false},
	{"value":"X","coordinates":"3, 3","isWinner":false}
]
	*/

	const squaresParsed = JSON.parse(squaresJSONString);

	calculateWinner(squaresParsed);
}

Answer 1

当你找到获胜线时，你需要突破循环。否则，您将继续测试其他行，并且由于它们不匹配，因此会为这些正方形设置isWinner = false;，这会在测试成功时取消分配。因此，在找到获胜行的break块的末尾添加if语句。

或者，如果您希望能够找到所有获胜线路，请忽略设置else的{{1}}块。这应该是所有对象的初始状态，每次循环都不需要这样做。循环完成后，作为获胜线一部分的所有方格都将具有isWinner = false。

我的函数以某种方式撤消对象属性更改

1 个答案: