Question

在ReactJS tutorial中有一个关于用React构建一个tic tac toe游戏的教程。有这个功能可以检查是否有获胜动作。

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],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

它可以工作，但for循环可以改进使用for x in lines，如此

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],
  ];
  for (let line in lines) {
    const [a, b, c] = line;
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

但是当我尝试它并没有找到获胜时所以我使用了旧代码。

我不确定为什么虽然第二次编辑失败了。

Answer 1

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]];
    for (let line in lines) {
        console.log(line);
        const [a, b, c] = line;
        if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
            return squares[a];
        }
    }
    return null;
}

运行此代码。您的line变量是数组的索引，而不是内部数组（例如[0,1,2]）。

编辑：

正如kristaps在评论中提到的，正确的解决方案是let line of lines（而非）。

Answer 2

这里是您使用for循环的第一个代码，它可以以适当的方式超出2d数组以下示例程序将产生类似

的输出

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],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    console.log(lines[i]);
    }

并且每个循环也用于每次超出每个元素，例如下面的程序将产生类似

的输出

    1
    2
    3

因为它

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],
  ];
  for (let line in lines) {
    const [a, b, c] = line;
    console.log(line)
    }

我想你可以理解这里发生了什么

ReactJS教程代码移植ES6代码无法正常工作

2 个答案: