JavaScript 逻辑运算符问题？答案

【问题标题】：JavaScript logical operators questions?JavaScript 逻辑运算符问题？
【发布时间】：2014-07-01 23:03:13
【问题描述】：

我只是不明白 && 和 || 是怎么回事工作。我写了一个小代码来帮助自己，这对我来说没有任何意义。您将单击一个按钮，然后将调用 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！==”四个次。我不是专家，所以请尽量保持简单。

【问题讨论】：

尝试大声朗读这些表达式，对“!==”使用“is different from”。很明显，“a 与 b 不同，或 a 与 c 不同”不是您想要的逻辑，因为只要它与 c 不同，a 就可以与 b 相同。
这与 JavaScript 无关，更像是数学和逻辑。

标签： javascript logical-operators

【解决方案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) { ... }

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

【讨论】：

【解决方案2】：

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

评估5 == 5。如果双方相等（您可能知道），== 运算符将返回 true。因为5 == 5是true，我们看下一个值（如果是假的，因为短路操作，会立即返回假）。
评估6 + 1 == 7。这也是如此，所以返回值为true。

&& 运算符不比较常规值，例如 "ICE CREAM"（确实如此，但它将其转换为布尔值）。

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

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

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

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

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

【讨论】：

【解决方案3】：

如果您使用 or(||)，如果任何子语句（例如 this.snack !== "ICE CREAM"）评估为 true，则整个语句将为真，导致显示提示。

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

没有办法按照您建议的方式缩短代码。您可以做的一件事是创建一个包含 4 个选项的数组，并检查该数组是否包含零食。

【讨论】：