使用 Angular js 检查井字游戏中是否获胜者的逻辑

Question

我正在使用 Angular js 构建一个井字游戏，现在我需要看看是否有赢家。我正在使用两个嵌套的 for 循环来执行此操作，我知道这并不总是最佳实践，并且想知道是否有更简单的方法来设置此逻辑？

当有人选择一个正方形并传入他们的棋子（X 或 O）时，我调用此函数。

     function checkWinner(winningPiece){
      let i;
      let j;
      let winnerRows = [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9],
        [1, 5, 9],
        [3, 5, 7],
        [1, 4, 7],
        [2, 5, 8],
        [3, 6, 9]
        ];
      for (i=0; i < winnerRows.length; i++) {
        for (j=0; winnerRows[i].length; j++) {
         // code to check if their piece matches each element in the array
        }
      }
    }

我对其他逻辑思想持开放态度。这是代码：https://plnkr.co/edit/XGhX5zVWCjSnn3OaKNQ6?p=preview

Answer 1

为什么不直接使用数组的索引作为 ID，而不是使用具有 ID 的对象数组构建 vm.squares？您可以从您的获胜者行数组的每个值中减去 1，然后从您的获胜检查代码中删除对象访问权限。

尽管如此（并且是超级挑剔的），每次你的外循环迭代时，它都会检查winnerRows.length，而你的内循环将检查winnerRows[i].length。在此应用程序中，数组中的项目数量不会产生任何真正明显的差异，但是由于我们正在讨论最佳实践，因此与文字比较总是比与函数的结果或数组访问。由于我们知道外层循环总是要运行 8 次，我们可以用 8 替换winnerRows.length。由于winnerRows 中的每个数组都有3 个条目，我们可以用3 替换winnerRows[i].length。

我们可以通过完全去掉内部循环并使用传递属性（如果 a = b 和 b = c -> a = c）来宣布获胜者，从而更轻微地减少这一点。

如果您检查的第一个方块不是获胜棋子的类型，我们可以进一步挑剔并可能消除每个棋子的检查。如果第一个条件为假，循环将在 && 上短路，并且不会执行其余的逻辑表达式。

以下代码使用您当前的 vm.squares 实现来实现所有这些更改：

for (i=0; i < 8; i++) {
    if (vm.squares[winnerRows[i][0]].piece === winningPiece &&
        vm.squares[winnerRows[i][0]].piece === vm.squares[winnerRows[i][1]].piece &&
        vm.squares[winnerRows[i][1]].piece === vm.squares[winnerRows[i][2]].piece) {
        alert ('winner');
    }
}

当然，这些都只是次要优化，对于这种规模的应用程序，您可能不会看到巨大的回报。只要有一些好的做法，你就可以消除第二个循环。