在条件中使用逻辑运算符和比较运算符 (javascript)

Question

我希望用户在下面的代码行中输入剪刀石头布游戏的答案。

userChoice = prompt("Do you choose rock, paper or scissors?");

但是，如果用户写的不是完全 "rock"、"paper" 或 "scissors"，他应该再次选择，我试图用这篇文章来做代码：

while (userChoice !== "rock" || "paper" || "scissors") {
    userChoice = prompt("Invalid choice. Please change your answer.");
};

我遇到的问题是程序一直将给定的输入识别为无效，即使它是 "rock"、"paper" 或 "scissors"。

在打字时，我设法自己找到了解决方案。

while (userChoice !== "rock" && userChoice !== "paper" && userChoice !== "scissors") {
    userChoice = prompt("Invalid choice. Please change your answer.");
};

这种方式确实有意义，第一个条件可能不起作用，因为即使您输入了正确的答案（例如 "paper"），它仍然不等于其他两个答案（在本例中为 "rock" 和 "scissors"），这就是程序一直说答案无效的原因，对吧？还是语法错误？现在（在工作条件下），用户的选择既不是 "rock" 也不是 "paper" 也不是 "scissors" 因此它可以正常工作。

此外，是否有更简单、更简短的方式来编写该条件？

_{^{注意：我希望解决方案的部分内容已经包括在内，因为它们可以帮助其他编码人员。}}

Answer 1

使用indexOf

while (["rock", "paper", "scissors"].indexOf(userChoice) > -1) {

你的第一次尝试

while (userChoice !== "rock" || "paper" || "scissors") {

在技术上是一个无限循环，因为

|| "paper"

例如，技术上评估为 true 或 truthy 值

Answer 2

两个例子

一个数组和 Array.prototype.indexOf():

var userChoice;
while (!~['rock', 'paper', 'scissors'].indexOf(userChoice)) {
    userChoice = prompt("Invalid choice. Please change your answer.");
};

另一个带有对象和 in 运算符：

The in operator returns true if the specified property is in the specified object.

var userChoice;
while (!(userChoice in {rock: 1, paper: 1, scissors: 1})) {
    userChoice = prompt("Invalid choice. Please change your answer.");
};

Answer 3

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Rock Papper Scissors Game</title>
    </head>
    <body>
        <h1>Play Rock Papper Scissors?</h1>
        <button id="start">Play?</button>
        <script> 
            function rpsGame() {
                var computerChoice = Math.random(),
                    userChoice = prompt('Do you choose rock, paper, or scissors');
                function getComputerChoice() {
                    if (computerChoice <= 0.33) {
                        computerChoice = 'rock';
                    } else if (computerChoice <= 0.66 && computerChoice >= 0.33) {
                        computerChoice = 'paper';
                    } else {
                        computerChoice = 'scissors';
                    }
                }
                function playAgain() {
                    var restart = prompt('Would you like to play again, yes or no?').toLowerCase();
                    switch(restart) {
                    case 'yes':
                        rpsGame();
                        break;
                    default:
                        alert('Okay, see you later!');
                    }
                }
                function compare() {
                    var choice1 = userChoice.toLowerCase(),
                        choice2 = computerChoice,
                        tie = "The computer chose " + choice2 + ", and you chose " + choice1 + ". The result is a tie!",
                        win = "The computer chose " + choice2 + ", and you chose " + choice1 + ". You win!",
                        lose = "The computer chose " + choice2 + ", and you chose " + choice1 + ". The computer wins!";

                    switch (choice1) {
                    case "":
                        alert("You didn't enter anything. Maybe we can play later!");
                        break;
                    case 'rock':
                        if (choice2 === 'scissors') {
                            alert(win);
                        } else if (choice2 === 'rock') {
                            alert(tie);
                        } else {
                            alert(lose);
                        }
                        playAgain();
                        break;
                    case 'paper':
                        if (choice2 === 'rock') {
                            alert(win);
                        } else if (choice2 === 'paper') {
                            alert(tie);
                        } else {
                            alert(lose);
                        }
                        playAgain();
                        break;
                    case 'scissors':
                        if (choice2 === 'paper') {
                            alert(win);
                        } else if (choice2 === 'scissors') {
                            alert(tie);
                        } else {
                            alert(lose);
                        }
                        playAgain();
                        break;
                    default:
                        alert(choice1.substring(0,1).toUpperCase() + choice1.substring(1, choice1.length).toLowerCase() + " is an invalid choice. Please change your answer.");
                        rpsGame();
                    }
                }
                getComputerChoice();
                compare();
            }
            document.getElementById('start').addEventListener('click', rpsGame);
        </script>
    </body>
</html>

在条件中使用逻辑运算符和比较运算符 (javascript)

Use of logical and comparison operators in conditions (javascript)

javascript

comparison

conditional

logical-operators

comparison-operators