Javascript If/Else/Switch返回错误的结果_Javascript_Reactjs_If Statement_Switch Statement_Conditional Statements

Javascript If/Else/Switch返回错误的结果

javascript reactjs if-statement

Javascript If/Else/Switch返回错误的结果,javascript,reactjs,if-statement,switch-statement,conditional-statements,Javascript,Reactjs,If Statement,Switch Statement,Conditional Statements,我正在用ReactJS制作一个石头剪刀蜥蜴Spock（大爆炸理论，电视节目），我面临着一些抽象的问题 switch (this.state.playerOnePick === 'Rock') { case((this.state.playerTwoPick === 'Scissors') || (this.state.playerTwoPick === 'Lizard')): return ( <div> <h1>P

我正在用ReactJS制作一个石头剪刀蜥蜴Spock（大爆炸理论，电视节目），我面临着一些抽象的问题

switch (this.state.playerOnePick === 'Rock') {
    case((this.state.playerTwoPick === 'Scissors') || (this.state.playerTwoPick === 'Lizard')):
    return (
        <div>
            <h1>Player One wins !</h1>
            <h2>P1: {this.state.playerOnePick} P2: {this.state.playerTwoPick}</h2>
        </div>
    );
        break;
    case((this.state.playerTwoPick === 'Paper') || (this.state.playerTwoPick === 'Spock')):
        return (
            <div>
                <h1>Player Two wins !</h1>
                <h2>P1: {this.state.playerOnePick}
                    P2: {this.state.playerTwoPick}</h2>
            </div>
        );
        break;

}

switch (this.state.playerOnePick === 'Lizard') {
    case((this.state.playerTwoPick === 'Spock') || (this.state.playerTwoPick === 'Paper')):
        return (
            <div>
                <h1>Player One wins !</h1>
                <h2>P1: {this.state.playerOnePick} P2: {this.state.playerTwoPick}</h2>
            </div>

        );
        break;
    case((this.state.playerTwoPick === 'Scissors') || (this.state.playerTwoPick === 'Rock')):
        return (
            <div>
                <h1>Player Two wins !</h1>
                <h2>P1: {this.state.playerOnePick} P2: {this.state.playerTwoPick}</h2>
            </div>
        );
        break;

}

开关（this.state.playerPick===='Rock'）{
大小写（（this.state.playerTwoPick=='Scissors'）| |（this.state.playerTwoPick==='Lizard'）：
返回(
一号玩家赢了！
P1:{this.state.playerPick}P2:{this.state.playerTwoPick}
);
打破
大小写（（this.state.playerTwoPick=='Paper'）| |（this.state.playerTwoPick==='Spock'）：
返回(
两个玩家赢了！
P1:{this.state.playerPick}
P2:{this.state.playerTwoPick}
);
打破
}
开关（this.state.playerPick==='Lizard'）{
大小写（（this.state.playerTwoPick=='Spock'）| |（this.state.playerTwoPick==='Paper'）：
返回(
一号玩家赢了！
P1:{this.state.playerPick}P2:{this.state.playerTwoPick}
);
打破
大小写（（this.state.playerTwoPick==“剪刀”）| |（this.state.playerTwoPick==“石头”）：
返回(
两个玩家赢了！
P1:{this.state.playerPick}P2:{this.state.playerTwoPick}
);
打破
}

当P1:Rock，P2:Lizard，P1如期获胜时，无论是谁挑选，Rock vs Paper都会返回正确的结果，但当P1:Lizard P2:Rock返回时，P1获胜

蜥蜴在任何地方都不可能战胜岩石

（玩家拾取武器时，PlayerPick和PlayerWoPick会正确更新）

开关盒不能这样工作。如果您想使用switch case，可以执行以下操作：

switch(playerOnePick) {
 case 'Rock':
   switch(playerTwoPick) {
    case 'Scissors':
    case 'Lizard':
      // Player 1 wins
      break;
    case 'Paper':
    case 'Spock':
    // Player 2 wins
    break;
   }
   break;
 case 'Lizard':
   switch(playerTwoPick) {
    case 'Spock':
    case 'Paper': 
      // Player 1 wins
     break;
    case 'Scissors':
    case 'Rock': 
    // Player 2 wins
    break;
 }
}

等等

编辑：这样编写的代码是为if语句构造的，如果用if替换switch和case，它将工作。

switch case不能这样工作。如果您想使用switch case，可以执行以下操作：

switch(playerOnePick) {
 case 'Rock':
   switch(playerTwoPick) {
    case 'Scissors':
    case 'Lizard':
      // Player 1 wins
      break;
    case 'Paper':
    case 'Spock':
    // Player 2 wins
    break;
   }
   break;
 case 'Lizard':
   switch(playerTwoPick) {
    case 'Spock':
    case 'Paper': 
      // Player 1 wins
     break;
    case 'Scissors':
    case 'Rock': 
    // Player 2 wins
    break;
 }
}

等等

编辑：这样编写的代码是为if语句构造的，如果用if替换开关和case，它将正常工作。

正确使用开关

switch (this.state.playerOnePick) {
    case 'Rock':
        switch (this.state.playerTwoPick) {
            case 'Scissors'):
            case 'Lizard':
                return "Player One wins!";
                break; // unnecessary after `return` but well
            case 'Paper':
            case 'Spock':
                return "Player Two wins!";
                break; // as above
        }
        break;
    case 'Lizard':
        switch (this.state.playerTwoPick) {
            case 'Spock':
            case 'Paper':
                return "Player One wins!"
            case 'Scissors':
            case 'Rock':
                return "Player Two wins!";
        }
        break;
}

您显示的是带有大量布尔条件的

if

else

的布局：

if (this.state.playerOnePick === 'Rock') {
    if ((this.state.playerTwoPick === 'Scissors') || (this.state.playerTwoPick === 'Lizard')) {
        return "Player One wins!";
    } else if ((this.state.playerTwoPick === 'Paper') || (this.state.playerTwoPick === 'Spock')) {
        return "Player Two wins!";
    }
} else if (this.state.playerOnePick === 'Lizard') {
    if ((this.state.playerTwoPick === 'Spock') || (this.state.playerTwoPick === 'Paper')) {
        return "Player One wins!";
    } else if ((this.state.playerTwoPick === 'Scissors') || (this.state.playerTwoPick === 'Rock')) {
        return "Player Two wins!";
    }
}

然而，实现石头剪刀蜥蜴斯波克的真正问题是所有的重复（这给错误留下了很大的空间）。实际的编程任务是找出如何减少这种情况。
提示：为每个可能的选项指定一个整数，然后进行一些数学运算。

编写一个单独的函数

winner（pick1，pick2）

，当第一个玩家赢时返回

-1

，当第二个玩家赢时返回

。然后，只需从与UI内容相关的ReactJS代码中调用它。

正确使用

switch

语句

switch (this.state.playerOnePick) {
    case 'Rock':
        switch (this.state.playerTwoPick) {
            case 'Scissors'):
            case 'Lizard':
                return "Player One wins!";
                break; // unnecessary after `return` but well
            case 'Paper':
            case 'Spock':
                return "Player Two wins!";
                break; // as above
        }
        break;
    case 'Lizard':
        switch (this.state.playerTwoPick) {
            case 'Spock':
            case 'Paper':
                return "Player One wins!"
            case 'Scissors':
            case 'Rock':
                return "Player Two wins!";
        }
        break;
}

您显示的是带有大量布尔条件的

if

else

的布局：

if (this.state.playerOnePick === 'Rock') {
    if ((this.state.playerTwoPick === 'Scissors') || (this.state.playerTwoPick === 'Lizard')) {
        return "Player One wins!";
    } else if ((this.state.playerTwoPick === 'Paper') || (this.state.playerTwoPick === 'Spock')) {
        return "Player Two wins!";
    }
} else if (this.state.playerOnePick === 'Lizard') {
    if ((this.state.playerTwoPick === 'Spock') || (this.state.playerTwoPick === 'Paper')) {
        return "Player One wins!";
    } else if ((this.state.playerTwoPick === 'Scissors') || (this.state.playerTwoPick === 'Rock')) {
        return "Player Two wins!";
    }
}

编写一个单独的函数

winner（pick1，pick2）

，当第一个玩家赢时返回

-1

，当第二个玩家赢时返回

。然后从与UI相关的ReactJS代码中调用它。

这是因为您已经这样设置了它。看最后一个

比如说，您可以编写一个更好的

switch/case

语句来评估条件。你在高度重复自己，这违背了DRY（不要重复自己）的原则

您可以将

P1:{this.state.playerOptick}P2:{this.state.playerTwoPick}

完全拉出

开关

块，并在开关关闭后立即将其放置

。或者，您最好在每个案例中只放一个值，而不是在一个案例中组合两个值。这使得遵循代码变得更加困难。这是我为这个特殊的开关箱所做的选择：

switch (this.state.playerOnePick === 'Rock') {
    case(this.state.playerTwoPick === 'Scissors'):
         return ( <div> <h1>Player One wins !</h1> </div>);
         break;
    case(this.state.playerTwoPick === 'Lizard')):
         return ( <div> <h1>Player One wins !</h1> </div>);
         break;
    case(this.state.playerTwoPick === 'Paper'):
         return ( <div> <h1>Player Two wins !</h1> </div>);          
         break;
    case(this.state.playerTwoPick === 'Spock'):
         return ( <div> <h1>Player Twi wins !</h1> </div>);        
         break;
    }
// The same goes for second switch
<div><h2>P1: {this.state.playerOnePick} P2:{this.state.playerTwoPick}</h2><div>

开关（this.state.playerPick===='Rock'）{
案例（this.state.playerTwoPick==='Scissors'）：
返回（玩家一赢！）；
打破
case（this.state.playerTwoPick==='Lizard'）：
返回（玩家一赢！）；
打破
案例（this.state.playerTwoPick==='Paper'）：
返回（玩家两胜！）；
打破
案例（this.state.playerTwoPick==='Spock'）：
返回（玩家Twi获胜！）；
打破
}
//第二个开关也是如此
P1:{this.state.playerPick}P2:{this.state.playerTwoPick}

这是因为您已将其设置为那样。看最后一个