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

Question

为了计算井字游戏的获胜者(我按照反应的教程(，我创建/修改了calculateWinner函数。此函数接受对象数组，而每个对象都有 2 个属性：

• value(可以设置为"X"或"O"，默认为空(;和
• isWinner(布尔值，默认为false(。

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

问题是，在某些获胜组合上，当您检查整个数组本身时，一个或多个 isWinner 属性仍然以某种方式设置为 false。为了使问题更奇怪，这(到目前为止(只发生在代码笔上，而不是在StackOverflow的代码片段中。

(我很快就会在本地尝试。在本地也有误。

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);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>

Answer 1

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

或者，如果您希望能够找到所有获胜线，只需省略设置isWinner = false的else块即可。这应该是所有对象的初始状态，您不需要每次通过循环都这样做。循环完成后，作为获胜线一部分的所有方块都将具有isWinner: true。