编写if else语句的更好方法

Question

First time writing Javascript. I just would like know if there is a shorter way of writing this:

<p id="demo"></p>

<script>
    function myFunction() {
    var letter = document.getElementById("myInput").value;
    var text;

    if (letter === "5544") {
        text = "Abar, Marlon 1,800";

    } else if (letter === "5545") {
        text = "Pia, Darla 1,800";  

    } else if (letter === "5546") {
        text = "Salazar, Alex 1,500";   

//etc...

    } else {
        text = "Incorrect Account Number";
    }
document.getElementById("demo").innerHTML = text;
}
</script>

Tried map but I couldn't get it to work.

Answer 1

There isn't really a shorter way to write an if statement in that way (which I will assume is what you're asking). However, there could be a few different ways to write this depending on how many things you want to check.

Use a Switch statement

There is a cleaner way when dealing with multiple cases that letter could be.

This would be a switch statement and it would look like this:

var text;

switch (letter) {
    case "5544":
        text = "Abar, Marlon 1,800";
    break;
    case "5545":
        text = "Pia, Darla 1,800"; 
    break;

    // more cases

    default:
        text = "Incorrect Account Number";
    break;
}

This reads a little better than an if else statement in some cases. The default keyword here acts as your else clause in an if else statement. The case acts as your different if statements if you will.

Essentially, the switch statement above will fall through each of the cases it defines until it finds a case that matches letter (such as "5544" ). If none matches, it hits the default case. The break keyword at the end of each case stops things from falling through to the next defined case once a match is found.

This method could get cumbersome with more than 6 or 7 cases.

Create an object and look up the value

Now, a shorter way to get the value you want could be to define an object and get the value based on what has been entered like so:

var letter = document.getElementById('selector').value;
var obj = {
    '5544': 'Abar, Marlon 1,800'
};

if (letter in obj) {
   // do something if found
}
else {
   // do something if not found
}

This could be an easy way to get a value if you have many values to check.

Other thoughts

As a side note to all of this, there are short hand if statements called ternary statements which you can find here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator ... However, I would not recommend nesting these as it becomes very complicated and not very readable.

Conclusion

So, to reiterate the answer to your question: No, there isn't really a shorter way to write an if else statement with many values. You can use a switch statement to make it cleaner. Use the object lookup method if you have many values you would like to check.

Answer 2

JavaScript has object (map) literals. Use them for terse code. In your final application you'll get the data for the map from someplace else and not code it directly into your website, but if you did, it would look like this:

document.getElementById( "demo" ).innerHTML = {
    "5544" : "Abar, Marlon 1,800",
    "5445" : "Pia, Darla 1,800",
    ...
}[ document.getElementById( "myInput" ).value ];

Answer 3

you can use switch for a long if - else -if ladder:

switch(expression) {
case n:
    code block
    break;
case n:
    code block
    break;
default:
    default code block
}

This is how it works:
1)The switch expression is evaluated once.
2)The value of the expression is compared with the values of each case.
3)If there is a match, the associated block of code is executed.

if you need basic tutorials in java script then you should try w3 schools.