基本 JavaScript if 与 else if

Question

我的问题是：我是 JavaScript 新手，我想了解“ if { ”和“ else if { ”语句之间的区别。到目前为止，我找到的唯一答案与后来继承我的代码的人有关，显然没有人会继承我的课程项目！我的问题具体是这样的：

我正在 codecademy 上做石头剪刀布游戏项目。我的 Math.random() 方法产生一个随机数。我首先实现了我的代码 if (computerChoice

及其替代方法：

if (computerChoice > 0.67){......    Which checked out and produced a viable answer. 

在它的建议中，它使用了 else if 语句。我的具体问题是在任何一种情况下，我基本上都设置了一个低范围和一个高范围，剩下的代表中间。 Else 表示不是先前的条件。但是，如果我的条件一秒钟 if 已经在逻辑上排除了先前的答案（无论如何都必须在 else if 替代方案中在逻辑上排除）到底有什么区别，为什么要使用 else if/when would else if 是必要的？

我的代码如下：

选项一（否则）：

var userChoice = prompt("do you want rock paper or scissors?");
var computerChoice = Math.random();

if (computerChoice <= 0.33){
  computerChoice = "rock";
}
else if (computerChoice >= 0.67){
 computerChoice = "scissors";
}
else {
 computerChoice = "paper";
}

console.log(computerChoice);

选项二（2 if's）：

var userChoice = prompt("do you want rock paper or scissors?");
var computerChoice = Math.random();

if (computerChoice <= 0.33){
 computerChoice = "rock";
}
if (computerChoice >= 0.67){
 computerChoice = "scissors";
}
else {
 computerChoice = "paper";
}

console.log(computerChoice);

Answer 1

但是，如果我的条件一秒钟 if 已经在逻辑上排除了先前的答案（无论如何都必须在 else if 替代方案中逻辑上排除），那么到底有什么区别，为什么要使用 else if/when would else if 是必要的？

=> 无，但是 else 语句会强制执行它，以防您在“逻辑排除”中犯了错误。

即使它有点超出您的问题范围，也值得注意的是 JavaScript 中没有“else if”构造。当你写：

if (...) {

} else if (...) {

}

你基本上在做的是：

if (...) {

} else {
  if (...) {

  }
}

它之所以有效，是因为您可以在 else 关键字之后传递任何语句。见http://www.ecma-international.org/ecma-262/5.1/#sec-12.5 :-)

更新 1

if (weight <= 130) {
  fighter = "lightweight";
} else if (weight >= 205) {
  fighter = "heavyweight";
} else {
  fighter = "middleweight";
}

在javascript中相当于：

if (weight <= 130) {
  fighter = "lightweight";
} else {
  if (weight >= 205) {
    fighter = "heavyweight";
  } else {
    fighter = "middleweight";
  }
}

更新 2

在您原来的帖子中，选项 2，您这样做：

if (computerChoice <= 0.33){
  computerChoice = "rock";
}

if (computerChoice >= 0.67){
 computerChoice = "scissors";
}
else {
  computerChoice = "paper";
}

如果computerChoice

if (0.33 <= 0.33) ... // => computerChoice = "rock"

if ("rock" >= 0.67) ... else [THE ELSE PART IS EXECUTED!]

所以基本上computerChoice 将是“纸”，只要它应该是“摇滚”。你会有 67% 的时间有“纸”，有 33% 的时间有“剪刀”！发生这种情况是因为当您尝试比较不同类型的值时 Javascript 不会抛出错误（例如，这里是一个字符串“rock”和一个数字“0.67”；相反，它会尝试通过某种神奇的方式转换相同类型的值强制规则 (http://webreflection.blogspot.be/2010/10/javascript-coercion-demystified.html)，然后愉快地回答“假！”。作为一名数学专业的学生，​​我可能会吓到你说，由于这些强制规则，你可以在 javascript 中证明真 = 假...

PS：我刚刚注意到 Kevin Nielsen 在上面的解释比我做得更好。给你！

Answer 2

If-else if-else 逻辑比您的第二个示例更优雅，因为它会在进行正确分配后停止评估条件。

考虑如果 computerChoice 为 0.25，您的第二种情况（没有 else if）将如何工作。第一个 if 条件将评估为 true，并且 computerChoice 将重新分配给“rock”。然而，逻辑将继续进行，而不是认为自己已完成，并检查computerChoice >= 0.67。由于computerChoice 现在是“摇滚”，解释器将尝试将其转换为数值。由于rock不会转换，我猜你的逻辑现在可以按预期工作。

但是，考虑一种情况，您决定将实体（石头、纸和剪刀）定义为对象，并使用该对象的索引作为处理的输出。例如：

var myentities = 
{
    1: { name: "rock", image_url: "..." },
    2: { name: "paper", image_url: "..." },
    3: { name: "scissors", image_url: "..." }
};

假设您还决定停止使用对象的名称，而是使用其 ID。在这种情况下，您的第一个 if 会将值 1 分配给 computerChoice - 然后第二个 if 将检查是否 1 >= 0.67。因此，您的代码会（非常天真地）100% 地选择纸张，让您在短时间内感到非常困惑。

故事的寓意：不必要的评估永远不会帮助你，可能会伤害你。

Answer 3

如果您要检查同一变量（或类似变量）的不同条件，则 else if 更快。如果它匹配一个条件，它就会执行，然后你就完成了语句。一大堆 if 语句意味着代码必须遍历其中的每一个，无论它是否发现第一个为真。但请注意，使用“else if”时，您必须只寻找要匹配的条件之一。如果您希望它在此之后仍然检查任何内容，则必须是另一个“if”语句。