Javascript - 在此示例中使用 If Else 的最佳实践

Question

我目前正在学习 Javascript，并且正在学习石头、剪刀、纸教程。基于 Codeacademy 的相同教程，该站点上已经有几个查询。但是，我的查询是基于我的观点，因此我希望从 SO 社区获得一些反馈。

我的代码如下：-

var userChoice = prompt("Are you picking rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
    computerChoice = "rock";
} else if(computerChoice <= 0.67) {
    computerChoice = "paper";
} else {
    computerChoice = "scissors";
}

console.log ("Computer picks" + " " +computerChoice);
var compare = function (choice1, choice2) {
    if (choice1 === choice2) {
        console.log ("You're both psychic. It's a tie!");
    }    


    if (choice1=="rock") {
        if (choice2 =="scissors") {
            console.log ("Rock wins. You bad boy, you.");
        }
        if (choice2=="paper") {
         console.log ("Paper wins. You noob") ;
        }
    }

    if (choice1=="paper") {
        if (choice2=="rock") {
            console.log ("Paper wins. You bad boy, you.");
        }
        if (choice2=="scissors") {
            console.log ("Scissors wins. You noob.") ;
        }
    }

    if (choice1=="scissors") {
        if (choice2=="rock") {
            console.log ("Rock wins, you noob");
            }
        if (choice2=="paper") {
            console.log ("Scissors wins. You bad boy, you.");
        }
    }

    };

    compare (userChoice,computerChoice);

我一直认为，在使用条件句时，应该只有以下两种情况：

1. 单一条件，那么只需if 就可以了。
2. 多个条件，则它必须是 if 并以 else 或 if 、else if 等以 else 结尾。

因此，我最初在 if (choice2=="paper") 的第二个嵌套条件语句中使用了 else。然后意识到逻辑是错误的，因为如果它是平局，它也会打印该字符串。

所以我考虑了一下，意识到如果我使用 if 而不是 else，它会起作用。它确实有效。但是，我只是不确定我的代码是错误的……还是不够理想。是吗？

此外，为了让它看起来更好（而不仅仅是充满if），我正在考虑用else if 替换if (choice1=="paper") 中的if。但是，我不知道如何结束下一个条件 - if (choice1=="scissors") { 。你会怎么做？

请原谅冗长的查询 - 我只是想确保我能很好地理解它。

谢谢

Answer 1

这完全是代码风格，所以你应该争取“干净的代码”。

最幼稚的选择是使用开关。例如：

var compare = function (choice1, choice2) {

    switch(true){
        case choice1 === choice2:
            console.log ("You're both psychic. It's a tie!");
            break;
        case choice1 ===  "rock":
            if(choice2 === "scissors"){
                console.log ("Rock wins. You bad boy, you.");
            } else{
                console.log ("Paper wins. You noob") ;
            }
            break;
        case choice1 === "paper":
                if (choice2=="rock") {
                    console.log ("Paper wins. You bad boy, you.");
                } else{
                    console.log ("Scissors wins. You noob.") ;
                }
            break;
        case choice1 === "scissors":
            if (choice2=="rock") {
                console.log ("Rock wins, you noob");
            } else{
                console.log ("Scissors wins. You bad boy, you.");
            }
            break;
    }
};

不过，这只是一种方法。无论您选择什么，您都应该尝试让代码更简洁、更优雅。

这个版本可能更好看：

var compare = function(choice1, choice2){
    var options = ['rock','paper','scissors'];
    var result = options.indexOf(choice1) - options.indexOf(choice2);
    switch(result){
        case 1:
        case -2:
            //choice1 wins
            break;
        case 0: 
            //tie
            break;
        case -1:
        case 2:
            //choice2 wins
            break;
    }
}

但是这个版本并没有那么容易被理解 - 所以有一个比这个和第一个更好的解决方案 - 一个更清晰并且更容易让读者理解的解决方案 - 你应该尝试找到一个。

Answer 2

一定要使用 else if，这样第二个条件测试只会在第一个条件为假时运行

if ('hi' === 'hi) {
    console.log('true');
} else{
    console.log('this will never log')
}

也可以写成三元运算符：

'hi' === 'hi' ? console.log('true') : console.log('this will never log');

替代三元选项--

console.log('hi' === 'hi' ? 'true' : 'this will never log');

Answer 3

if(choice1 == choice2){
    console.log ("You're both psychic. It's a tie!");
}
if(choice1 == "rock"){
    if(choice2 == "scissors"){
        console.log ("Rock wins. You bad boy, you.");
    }
    else {
        console.log ("Paper wins. You noob") ;
    }
}
...

假设choice1 和choice2 都是"rock"，函数检查if(choice1 == choice2)。这是真的，所以它会打印 'tie' 消息。

因为下一个条件也是一个 if，所以它会检查 choice1 是否为 "rock"。是，所以它进入嵌套块，检查 choice2 是否是“剪刀”——不是，所以它移动到 else 块，并打印“纸赢”消息。

如果是平局，choice1 == choice2 你真的不需要进一步检查。 else if 和 else 条件仅在不满足之前的条件时检查。

所以你可以把它改成：

if(choice1 == choice2){
    console.log ("You're both psychic. It's a tie!");
}
else if(choice1 == "rock"){
    if(choice2 == "scissors"){
        console.log ("Rock wins. You bad boy, you.");
    }
    else {
        console.log ("Paper wins. You noob") ;
    }
}
else if(choice1 == "paper"){
    ...
}
else{ //choice1 == "scissors"
    ...
}

您还可以使用return 语句提前中断函数。或者，正如Etai 建议的那样，您可以使用switch 来检查条件。