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個選項的陣列，並檢查該陣列是否包含零食。