jquery - Javascript: How can I simplify an if-statement with multiple OR conditions? - Stack Overflow

admin管理员组

文章数量:1421155

Sorry if I've made mistakes writing this post. I'm new here and I don't know how this works, hope I learn quick. I am also new at JavaScript.

So the question is: I have this on my code.elements.js file and I can't make it work.

Does putting this work?

if (codePrompt == (codeSwitch || codeSwitchBG || codeBlur || codeShowInfo)){};

Or do I have to make it by the normal way?, like

if (codePrompt == codeSwitch || codePrompt == codeSwitchBG || codePrompt == codeBlur || codePrompt == codeShowInfo){};


var codeSwitch = 'switch()';
var codeSwitchBG = 'switch(background)';
var codeBlur = 'blur()';
var codeShowInfo = 'showInfo()';

$(".code").on("click", function () {
var codePrompt = prompt("Set the code in the mand line.");
if (codePrompt == (codeSwitch || codeSwitchBG || codeBlur || codeShowInfo)) {
    if (codePrompt == codeSwitch) {
        alert("Switching background...");
        console.log("Used '" + codeSwitch + "' mand.");
    } else if(codePrompt == codeBlur) {
        alert("Blurring elements...");
        console.log("Used '" + codeBlur + "' mand.");
    } else if(codePrompt == codeSwitchBG) {
        alert("Switching background...");
        console.log("Used '"+ codeSwitchBG + "' mand.");
    }else if(codePrompt == codeShowInfo) {
        alert("Showing info...");
        console.log("Used '"+ codeShowInfo + "' mand.");
    }
} else {
    alert("Wrong mand, try again.");
    console.log("Wrong mand, try again.");
};
});

Sorry if I've made mistakes writing this post. I'm new here and I don't know how this works, hope I learn quick. I am also new at JavaScript.

So the question is: I have this on my code.elements.js file and I can't make it work.

Does putting this work?

if (codePrompt == (codeSwitch || codeSwitchBG || codeBlur || codeShowInfo)){};

Or do I have to make it by the normal way?, like

if (codePrompt == codeSwitch || codePrompt == codeSwitchBG || codePrompt == codeBlur || codePrompt == codeShowInfo){};


var codeSwitch = 'switch()';
var codeSwitchBG = 'switch(background)';
var codeBlur = 'blur()';
var codeShowInfo = 'showInfo()';

$(".code").on("click", function () {
var codePrompt = prompt("Set the code in the mand line.");
if (codePrompt == (codeSwitch || codeSwitchBG || codeBlur || codeShowInfo)) {
    if (codePrompt == codeSwitch) {
        alert("Switching background...");
        console.log("Used '" + codeSwitch + "' mand.");
    } else if(codePrompt == codeBlur) {
        alert("Blurring elements...");
        console.log("Used '" + codeBlur + "' mand.");
    } else if(codePrompt == codeSwitchBG) {
        alert("Switching background...");
        console.log("Used '"+ codeSwitchBG + "' mand.");
    }else if(codePrompt == codeShowInfo) {
        alert("Showing info...");
        console.log("Used '"+ codeShowInfo + "' mand.");
    }
} else {
    alert("Wrong mand, try again.");
    console.log("Wrong mand, try again.");
};
});

• javascript
• jquery

Share Improve this question Follow edited May 30, 2014 at 17:33 RacerNerd 1,57711 gold badge1313 silver badges3131 bronze badges asked May 30, 2014 at 17:08 PauloNunesPauloNunes 911 silver badge77 bronze badges 4

• 1 you need to make it the normal way. Or you could use switch: stackoverflow./questions/13207927/… – juvian Commented May 30, 2014 at 17:11
• 2 You need to be more specific than "doesn't work". Can you explain the issue you're having? – Sam Hanley Commented May 30, 2014 at 17:11
• What are you trying to do? What is your expected oute? – cr0ss Commented May 30, 2014 at 17:11
• How about using a switch statement? – Ballbin Commented May 30, 2014 at 17:15

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

The "normal" way works the way you probably expect.

However, that if statement is redundant, anyway. You can just skip it:

if (codePrompt === codeSwitch) {
    alert("Switching background...");
    console.log("Used '" + codeSwitch + "' mand.");
} else if (codePrompt === codeBlur) {
    alert("Blurring elements...");
    console.log("Used '" + codeBlur + "' mand.");
} else if (codePrompt === codeSwitchBG) {
    alert("Switching background...");
    console.log("Used '" + codeSwitchBG + "' mand.");
} else if (codePrompt === codeShowInfo) {
    alert("Showing info...");
    console.log("Used '" + codeShowInfo + "' mand.");
} else {
    alert("Wrong mand, try again.");
    console.log("Wrong mand, try again.");
}

This is a good use case for a switch, and I would refactor it this way:

var alertMessage = "",
    consoleMessage = "Used '" + codePrompt + "' mand.";
switch (codePrompt) {
    case codeSwitch:
        alertMessage = "Switching background...";
        break;
    case codeBlur:
        alertMessage = "Blurring elements...";
        break;
    case codeSwitchBG:
        alertMessage = "Switching background...";
        break;
    case codeShowInfo:
        alertMessage = "Showing info...";
        break;
    default:
        alertMessage = consoleMessage = "Wrong mand, try again.";
        break;
}
alert(alertMessage);
console.log(consoleMessage);

Because JavaScript has short circuit evaluation and your strings are truthy then you need to use the second approach or what you referred to as "the normal way".

The first way does not work because you end up evaluating the wrong thing. Evaluation works like this:

var result = 0 || "zero" ;

• 0 is evaluated and determined to be falsy.
• "zero" is evaluated as truthy and bees the result.

var result = "zero" || 0 ;

• "zero" is evaluated and determined to be truthy and returned as the result.
• 0 is not evaluated because short circuit evaluation.

In your original code:

if (codePrompt == (codeSwitch || codeSwitchBG || codeBlur || codeShowInfo)){};

The operator associativity of || is left to right. Parenthesis are evaluated inner to outer.

(codeSwitch || codeSwitchBG || codeBlur || codeShowInfo) is evaluated first. Because of the rules we already discussed the result bees codeSwitch:

• codeSwitch || codeSwitchBG bees codeSwitch
• codeSwitch || codeBlur bees codeSwitch
• codeSwitch || codeShowInfo bees codeSwitch

So you end up evaluating:

if(codePrompt == codeSwitch)

Which of course is wrong.

You must do it the second way you mentioned:

if (codePrompt == codeSwitch ||
codePrompt == codeSwitchBG || codePrompt == codeBlur || codePrompt == codeShowInfo){};

The way you are implementing this logic I would suggest a switch statement for readability like such:

switch (codePrompt){
case "switch()": 
{
    //Handle case
    break;
}
case "switch(background)": 
{  
   //Handle Case
   break;
}
case "blur()":
{
    //Handle Case
    break;
}
default :
{
  alert("Wrong mand, try again.");
  console.log("Wrong mand, try again.");
}

You could also refactor as follows to cut out the if/switch:

var mands = {
    'switch()': 'Switching background',
    'switch(background)': 'Switching background',
    'blur()': 'Blurring elements',
    'showInfo()': 'Showing info'
};

$(".code").on("click", function () {
    var codePrompt = prompt("Set the code in the mand line.");
    if (mands.hasOwnProperty(codePrompt)) {
        alert(mands[codePrompt] + '...');
        console.log("Used '" + codePrompt + "' mand.");
    } else {
        alert("Wrong mand, try again.");
        console.log("Wrong mand, try again.");
    }
});

Yes, you have to make it the 'normal' way.

What

if (codePrompt == (codeSwitch || codeSwitchBG || codeBlur || codeShowInfo)){};

does is

1) test all the switches -- returns TRUE if any are TRUE

2) test if codePrompt == TRUE or FALSE.

Based on your code, you can remove that test altogether and simply drop through to your final ELSE.

Another option is use a SWITCH statement, the last ELSE being the DEFAULT clause.

本文标签： jqueryJavascript How can I simplify an ifstatement with multiple OR conditionsStack Overflow