javascript - If/Else/Switch 返回错误结果

Question

我正在使用 ReactJS 制作石头剪刀布蜥蜴史波克(《生活大爆炸》，电视节目)，但我面临着某种抽象问题。

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;

}

无论谁选，石头VS纸都会返回正确的结果，当P1:石头，P2:蜥蜴时，P1按预期获胜，但当P1:蜥蜴P2:石头时，返回P1获胜..

What it returns me when P1:Lizard P2:Rock

蜥蜴队在与摇滚队的比赛中没有任何地方可以获胜......

(当玩家选择武器时，playerOnePick 和playerTwoPick 会正确更新)

Answer 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 的布局，其中包含许多 bool 条件:

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，平局时返回 0，而 1 当第二个玩家获胜时。然后只需从与 UI 相关的 ReactJS 代码中调用它即可。