如果不是这样的话，JavaScript将很长

我正在构建一个类似于“扫雷舰”的应用程序，用户将单击网格上的一个正方形，该应用程序将告诉用户周围有多少正方形包含“X”。当我只检查向上、向下、向左和向右时，我的代码就工作了。我的代码开始变得很长，因为有相当多的边缘案例需要解释。我将开始检查‘X’的对角线，我想想出一个更短的方法来检查这些情况

谁能帮我开发一个for循环或其他简捷的方法来编写这段代码。以下是我到目前为止对8x8网格的了解

这是我的沙箱：

showNumber=（）=>{
设Xcounter=0；
console.log（this.props.keys）
log（this.props.reduxState.reducer.board[this.props.keys]）
if（this.props.keys%8==0）{
if（this.props.reduxState.reducer.board[this.props.keys+1]=='X'）{
X计数器++
}
}
if（this.props.keys%8==7）{
if（this.props.reduxState.reducer.board[this.props.keys-1]='X'）{
X计数器++
}
}
如果（this.props.keys/8=7）{
if（this.props.reduxState.reducer.board[this.props.keys-8]='X'）{
X计数器++
}
}
if（this.props.keys%8！==0&&this.props.keys%8！==7）{
if（this.props.reduxState.reducer.board[this.props.keys+1]=='X'）{
X计数器++
}
if（this.props.reduxState.reducer.board[this.props.keys-1]='X'）{
X计数器++
}
}
if（Math.floor（this.props.keys）/8>0&&Math.floor（this.props.keys）/8<7）{
if（this.props.reduxState.reducer.board[this.props.keys+8]='X'）{
X计数器++
}
if（this.props.reduxState.reducer.board[this.props.keys-8]='X'）{
X计数器++
}
}
如果（this.props.id=='X'）{
this.setState（{…this.state，单击：true，计数器：'X'}）
返回此.state.counter；
}
this.setState（{…this.state，clicked:true，counter:Xcounter}）
返回此.state.counter；
} 

假设您有一个长度为64的数组

this.props.reduxState.reducer.board

，带有

'X'

s或非

'X'

s，您可以简单地在X和y方向循环，如下所示：

 let Xcounter = 0;
 //save the board for shorter and more readable code
 let board = this.props.reduxState.reducer.board;
 //the current index we've clicked on
 let c = this.props.keys;
 //we're going to check if we're at the edge of the board.
 //I'll explain these later.
 let minX = c%8 == 0 ? 0 : -1;
 let maxX = c%8 == 7 ? 0: 1;
 let minY = (c-minX)/8 == 0 ? 0 : -1;
 let maxY = (c-minY)/8 == 7 ? 0 : 1;
 for( let x = minX; x <= maxX; ++x ){
     for( let minY = -1; y <= maxY; ++y ){
         if( board[c+x+8*y)] == 'X' ){ Xcounter++; }
     }
 }
 //we also checked the square itself, but we didn't want to
 if( board[c] == 'X' ){ Xcounter--; }

设Xcounter=0；
//保存电路板以获得更短、更可读的代码
let board=this.props.reduxState.reducer.board；
//我们单击的当前索引
设c=this.props.keys；
//我们要检查一下我们是否在棋盘的边缘。
//我稍后会解释这些。
让minX=c%8==0？0 : -1;
让maxX=c%8==7？0: 1;
让minY=（c-minX）/8==0？0 : -1;
让maxY=（c-minY）/8==7？0 : 1;
对于（让x=minX；x假设您的检查已经正确，让我们使用您已经拥有的

第一步，尝试用更简洁的风格重写您实际拥有的内容，以获得概述，第二步，引入板端常数：

  showNumber = () => {
    const BOARD_SIDE = 8;
    let Xcounter = 0;
    let keys = this.props.keys;
    let board = this.props.reduxState.reducer.board;
    console.log(keys);
    console.log(board[this.props.keys]);

    for (let edge = BOARD_SIDE; edge < BOARD_SIDE * BOARD_SIDE; edge += BOARD_SIDE) {
      if (keys % edge === 0 && board[keys + 1] === "X") Xcounter++;
      if (keys % edge === (edge - 1) && board[keys - 1] === "X") Xcounter++;
      if (keys / edge < 1 && board[keys + edge] === "X") Xcounter++;
      if (keys / edge >= (edge - 1) && board[keys - edge] === "X") Xcounter++;
      if (keys % edge !== 0 && keys % edge !== (edge - 1)) {
        if (board[keys + 1] === "X") Xcounter++;
        if (board[keys - 1] === "X") Xcounter++;
      }
      if (Math.floor(keys) / edge > 0 && Math.floor(keys) / edge < (edge - 1)) {
        if (board[keys + edge] === "X") Xcounter++;
        if (board[keys - edge] === "X") Xcounter++;
      }
    }

    if (this.props.id === "X") {
      this.setState({ ...this.state, clicked: true, counter: "X" });
      return this.state.counter;
    }

    this.setState({ ...this.state, clicked: true, counter: Xcounter });
    return this.state.counter;
  };

showNumber=（）=>{
const BOARD_SIDE=8；
设Xcounter=0；
让keys=this.props.keys；
let board=this.props.reduxState.reducer.board；
控制台日志（键）；
log（board[this.props.keys]）；
用于（让边缘=板侧；边缘<板侧*板侧；边缘+=板侧）{
如果（键%edge==0&&board[keys+1]==“X”）Xcounter++；
如果（键%edge==（边-1）和板[keys-1]==“X”）Xcounter++；
如果（键/边<1&&board[键+边]==“X”）Xcounter++；
if（键/边缘>=（边缘-1）和&board[键-边缘]==“X”）Xcounter++；
如果（关键点%edge！==0&&关键点%edge！==（边-1））{
如果（电路板[按键+1]=“X”）计数++；
如果（电路板[按键-1]=“X”）Xcounter++；
}
如果（数学地板（关键点）/边>0和&数学地板（关键点）/边<（边-1））{
如果（电路板[键+边缘]==“X”）X计数器++；
如果（电路板[键-边缘]==“X”）Xcounter++；
}
}
如果（this.props.id==“X”）{
this.setState（{…this.state，单击：true，计数器：“X”}）；
返回此.state.counter；
}
this.setState（{…this.state，clicked:true，counter:Xcounter}）；
返回此.state.counter；
};
大约一年前，我在Vue.js中编写了一个扫雷器的实现：也许它对你有帮助！@connexo谢谢，我会查看它。也许使用开关而不是ifs-这里的问题是，当一个正方形位于左边缘时，（键=0,8,16…）我们不想在上一个索引中检查棋盘，因为这些方块实际上不是相邻的。是的，我想。我现在考虑了：）
  showNumber = () => {
    const BOARD_SIDE = 8;
    let Xcounter = 0;
    let keys = this.props.keys;
    let board = this.props.reduxState.reducer.board;
    console.log(keys);
    console.log(board[this.props.keys]);

    for (let edge = BOARD_SIDE; edge < BOARD_SIDE * BOARD_SIDE; edge += BOARD_SIDE) {
      if (keys % edge === 0 && board[keys + 1] === "X") Xcounter++;
      if (keys % edge === (edge - 1) && board[keys - 1] === "X") Xcounter++;
      if (keys / edge < 1 && board[keys + edge] === "X") Xcounter++;
      if (keys / edge >= (edge - 1) && board[keys - edge] === "X") Xcounter++;
      if (keys % edge !== 0 && keys % edge !== (edge - 1)) {
        if (board[keys + 1] === "X") Xcounter++;
        if (board[keys - 1] === "X") Xcounter++;
      }
      if (Math.floor(keys) / edge > 0 && Math.floor(keys) / edge < (edge - 1)) {
        if (board[keys + edge] === "X") Xcounter++;
        if (board[keys - edge] === "X") Xcounter++;
      }
    }

    if (this.props.id === "X") {
      this.setState({ ...this.state, clicked: true, counter: "X" });
      return this.state.counter;
    }

    this.setState({ ...this.state, clicked: true, counter: Xcounter });
    return this.state.counter;
  };