javascript - 使用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 的对象数组构建 vm.squares，为什么不直接使用数组的索引作为 ID？您可以从 winnerRows 数组的每个值中减去 1，并从您的获胜检查代码中删除对象访问。

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

我们可以通过完全取出内部循环并使用传递属性(如果 a = b 和 b = c -> a = c)来宣布获胜者，从而进一步减少它。

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

以下代码使用您当前的 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');
    }
}

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