我正在嘗試理解React TicTacToe教程。 他們的calculateWinner幫助程序功能如何運行？

Question

首先，這不是對React教程功能的computeWinner（squares）不了解的偽裝 。

查看https://reactjs.org/tutorial/tutorial.html#declaring-a-winner ：

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

const[a, b, c] = lines[i]; 做？ 什么是方格[a]，方格[b]和方格[c]？ 我知道lines數組包含導致獲勝的所有正方形位置組合，但是我不明白它們是如何定義和比較的，並且本教程實際上沒有提供任何解釋，只是“這是一個輔助函數這樣就可以了。”

Answer 1

lines[i]表示三個值（ [0, 1, 2] ， [3, 4, 5]等）的八個組合之一。 const[a, b, c] = lines[i]; 將這三個值分配給變量a ， b和c 。 這使得下面的if語句中的條件更加簡潔，因為這三個變量用作squares數組的索引。

Answer 2

const[a, b, c] = lines[i];

相當於

const a = lines[i][0];
const b = lines[i][1];
const c = lines[i][2];

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

井字代碼https://codepen.io/gaearon/pen/LyyXgK?editors=0010

squares是來自網格的squares slice