关于React官网教程游戏源码的问题

Question

首先，源码地址如下：
https://codepen.io/gaearon/pe...
目前对于判断成功者这部有所疑问

……
function calculateWinner(squares) {
  // console.log(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]; // 遍历数组 lines ，结构其中每一项进行匹配
    // console.log(a, b, c, lines[i], lines)
    // console.log(squares[a], squares[b], squares[c])
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}
……

代码中，squares传递进来的是一个数组，分别为
赋值前：[null, null, null, null, null, null, null, null, null]
赋值后：[null, null, null, null, "X", null, null, null, null]
const [a, b, c] = lines[i]解构除了lines数组中的每一个三项数组

最后if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c])这里面就不是太明白了
我的理解squares[a]、squares[a]、squares[c]这三个值可能是：
squares[0]、squares[1]、squares[2]
squares[3]、squares[4]、squares[5]
squares[0]、squares[4]、squares[8]
……

请问它是如何将编squares数组中变化的值的位置与lines做匹配的？
不确定我叙述的是否明白

Answer 1

这个东西炒鸡简单呀！
首先你得知道赢的规则：横三，竖三或者斜三。
有了规则就好操作了。首先有一个表格，这部分你应该已经懂了，不过要注意，落子的过程是把3X3的表格对应到一维数组squares中的元素，第一行对应 0,1,2，第二行对应3,4,5，第三行对应6,7,8。再看lines数组，列出了所有赢的情况。如图，第一种竖着三个棋子颜色相同的情况下，squares数组0，3，6三个位置中存的值相同。以此类推，相同的都是获胜的，正好对应lines中的把个数组元素。