JavaScript逻辑运算符有疑问吗？

Question

我只是不明白&&和||的方式 工作。 我写了一个小代码来帮助自己，对我来说这毫无意义。 您将单击一个按钮，然后将调用startGame（）。

var startGame = function() {
var quizAnswers = {
    name: prompt("What is your name?").toUpperCase(),
    age: prompt("What is your age?"),
    snack: prompt("What is your favorite type of snack out of the following: ice cream, apple, chips, cookies?").toUpperCase()
};

quizAnswers.confirmAge = function () {
        while (isNaN(this.age) === true) {
           this.age = prompt("The age that you entered- " + this.age + " -is not a number. Please enter a number.");
        };
};

quizAnswers.confirmAge();

quizAnswers.confirmSnack = function () {
        while ((this.snack !== "ICE CREAM") && (this.snack !== "APPLE") && (this.snack !== "CHIPS") && (this.snack !== "COOKIES")) {
            this.snack = prompt("The snack you entered- " + this.snack + " -is unrecognized. Please enter: ice cream, apple, chips, or cookies.").toUpperCase();
        };
};

quizAnswers.confirmSnack();

它会显示名称，年龄和最喜欢的小吃，然后检查年龄是否为数字，输入的小吃是否为所列选项之一。 在搞砸了ConfirmSnack函数中的while循环之后，我弄清楚了如何使其工作，如上所示。 但是为什么&&而不是||。 并有一种缩短它的方法，例如：

while (this.snack !== ("ICE CREAM" && "APPLE" && "CHIPS" && "COOKIES")) {
    this.snack = prompt("The snack you entered- " + this.snack + " -is invalid. Please enter: ice cream, apple, chips, or cookies.").toUpperCase();
        };

因此，问题是要解释为什么使用&&（and）而不是||（or），以及是否有一种方法可以缩短此代码，因此我不必四次输入“ this.snack！==“。 我不是专家，因此请尽量保持简单。

Answer 1

&&运算符工作正常。 这实际上是逻辑问题，而不是JavaScript。

您在询问问题时答案与所有​​可能的答案都不相同。

可以用||重写 如下：

while (!(this.snack == "ICE CREAM" || this.snack == "APPLE" || this.snack == "CHIPS" || this.snack == "COOKIES"))

注意! 运算符开头。

一个简短的形式是：

answers = ["ICE CREAM", "APPLE", "CHIPS", "COOKIES"];
while (answers.indexOf(this.snack) < 0) { ... }

在这里，您可以定义一个可能的答案列表，并且要接受，并检查答案是否在其中。

Answer 2

&&和|| 运算符比较布尔值。 （布尔值表示是/否）。 这意味着，如果执行5 == 5 && 6 + 1 == 7则解释器将执行以下操作：

1. 评估5 == 5 。 如果两边相等，则==运算符将返回true（您可能知道）。 由于5 == 5为true ，因此我们查看下一个值（如果为假，由于短路运算符，它将立即返回假）。

2. 评估6 + 1 == 7 。 这也是正确的，因此返回值是true 。

&&运算符不会比较"ICE CREAM"类的常规值（可以，但是会将其转换为布尔值）。

现在，让我们看一下您提供的代码：

this.snack !== ("ICE CREAM" && "APPLE" && "CHIPS" && "COOKIES")

首先，执行javascript解释器("ICE CREAM" && "APPLE" && "CHIPS" && "COOKIES") 。 由于所有这些值均为true，因此该表达式的值为true 。 因此，此比较实质上是检查this.snack !== true ，这不是您想要的。

为了解决您的问题，我建议使用indexOf 。 这将检查元素是否在数组中，如果没有元素，则返回-1 。 例如：

var validSnacks = ["ICE CREAM", "APPLE", "CHIPS", "COOKIES"];
while (validSnacks.indexOf(this.snack) === -1) {
    // Do something
}

Answer 3

如果使用or(||) ，则任何子语句（例如this.snack！==“ ICE CREAM”）的评估结果为true ，则整个语句将为true，从而显示提示。

另一方面，使用and(&&) ， 所有子语句必须为true，整个语句才能评估为true，这是您想要的行为-您只希望提示显示零食是否不是其中之一4个选项。

无法按照您建议的方式缩短代码。 您可以做的一件事是制作一个带有4个选项的阵列，并检查该阵列是否包含零食。