if / Else / Switch 返回错误结果答案

【问题标题】：If / Else / Switch returning the wrong resultsif / Else / Switch 返回错误结果
【发布时间】：2017-07-20 03:31:17
【问题描述】：

我正在使用 ReactJS 制作 Rock-Paper-Scissors-Lizard-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;

}

Rock vs Paper 正在返回正确的结果，无论谁选择它，当 P1：Rock，P2：Lizard，P1 按预期获胜，但当 P1：Lizard P2：Rock 时，它返回 P1 获胜..

What it returns me when P1:Lizard P2:Rock

蜥蜴在与洛克的比赛中无处可取...

（玩家选择武器时，playerOnePick 和 playerTwoPick 会正确更新）

【问题讨论】：

嗯，这就是你在第 22 行和第 23 行设置的内容。根据this，你的规则是正确的。
玩家二胜，因为你已经这样设置了。看看<h1> 在最后的case 声明中说了什么。
switch (this.state.playerOnePick === 'Rock') 没有意义。你在那里匹配一个布尔值。听起来你真正想要的是简单的if/else。
好吧，玩家 2 应该会赢，但实际上玩家 1 赢了。

标签： javascript reactjs if-statement switch-statement conditional-statements

【解决方案1】：

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

但是，实施 Rock-Paper-Scissors-Lizard-Spock 的真正问题在于所有重复（这留下了很大的错误空间）。实际的编程任务是弄清楚如何减少这种情况。
提示：为每个可能的选择分配一个整数，然后玩一些数学题。
编写一个单独的函数winner(pick1, pick2)，它在第一个玩家获胜时返回-1，在平局时返回0，在第二个玩家获胜时返回1。然后简单地从与 UI 相关的 ReactJS 代码中调用它。

【讨论】：

好吧，它工作得很好！我会尽力节省一些重复和数学，我很少使用 switch 语句，我不是特别熟悉它，非常感谢！
听起来很有趣，所以我做了一个实现。看this codepen。这个想法是将规则写成数组。然后将其中一个玩家作为对象的键，数组过滤器检查玩家 2 是否输了，一个简单的三元运算返回赢家。
@Mike 是的，没问题。 switch 语句是您在常规编程中不会错过的任何东西。只需使用嵌套的 if/else，如果这还不够，请直接使用查找表（例如 Map）。
@SumiStraessle 是的，win_rules 看起来很完美。当然，你可以通过更多的数学来提高效率和通用性，但这是以牺牲可读性为代价的。
感谢您的反馈！我真的很感激。

【解决方案2】：

因为你是这样设置的。最后看<h1>。

比如说，您可以编写更好的switch/case 语句来评估条件。您正在高度重复自己，这违反了 DRY(Don't Repeat Yourself) 原则。

您可以将<h2>P1: {this.state.playerOnePick} P2: {this.state.playerTwoPick}</h2> 完全拉出switch 块并在开关关闭} 后立即将其放置。或者，您最好在每个案例中只放置一个值，而不是在一个案例中组合几个值。这使得遵循代码变得更加困难。这是我对这个特定开关盒的选择：

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>

【讨论】：

【解决方案3】：

开关盒不能这样工作。如果你想使用 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 语句构造的，如果您将 switch 和 case 替换为 if，它将起作用。

【讨论】：