javascript:评估多个 if 语句而不运行 else

Question

我正在尝试将一个简单的 javascript 页面与多个 if 语句组合在一起。这个想法是根据一堆 if 语句的评估追加到列表中。问题是如果其中任何一个失败，就会触发 else 语句。我只希望它在所有失败的情况下触发 else。

<p id="fruit">My fruit basket has: </p>

if (apples) {
        document.getElementById("fruit").innerHTML += "apples";
    }
if (oranges) {
        document.getElementById("fruit").innerHTML += "oranges";
    }
if (bananas) {
        document.getElementById("fruit").innerHTML += "bananas";
    }
else {
        document.getElementById("fruit").innerHTML += "nothing";
}

当我运行这个并且满足所有条件时，我会得到:

My fruit basket has: apples oranges bananas

当我运行这个并且不满足任何条件时，我会得到:

My fruit basket has: nothing

但如果不满足任何一个条件，我会得到:

My fruit basket has: apples nothing

或

My fruit basket has: apples bananas nothing

我尝试过使用if else，但它在第一个“匹配”后退出。所以在上面的例子中，如果我有两个苹果和香蕉，使用if else将返回

My fruit basket has: apples

别告诉我我也有香蕉。

问题:我该如何执行此操作，以便仅在所有 if 语句都失败的情况下才运行 else 语句？

编辑我试图让它尽可能简单，但似乎我过度简化了它。

在运行所有 if 语句之前，什么都不知道。这就是字面上的条件:如果所有的 if 都失败。

我尝试使用 OR 运算符，但它破坏了一切。在我的代码中，if (apples) 实际发生的情况是检查今天的日期，看看它是否在某个日期范围内。它需要根据相当复杂的时间表对一大堆不同的水果执行此操作，即准确地计算出特定日期篮子里有哪些水果比仅根据这些“规则”运行时间表更困难。

	var isSunday = new Date().getDay();
	var apples1Start = new Date(2018,8,4); // sept 4, 0 == jan.
	var apples1Stop = new Date(2018,8,23); // sept 22, stop dates need to be day after.
	var apples2Start = new Date(2018,10,5); // nov 5
	var apples2Stop = new Date(2018,10,25); // nov 24
	var apples3Start = new Date(2018,10,26); // nov 26
	var apples3Stop = new Date(2018,11,9); // dec 8
	var oranges1Start = new Date(2018,3,30); // april 30
	var oranges1Stop = new Date(2018,4,27); // may 26
	var oranges2Start = new Date(2018,9,22); // oct 22
	var oranges2Stop = new Date(2018,10,4); // nov 3
	var oranges3Start = new Date(2018,3,28); // april 28
	var oranges3Stop = new Date(2018,3,29); // april 28
	var bananas1Start = new Date(2018,0,1); // jan 1
	var bananas1Stop = new Date(2018,3,10); // april 9
	var bananas2Start = new Date(2018,6,2); // july 2
	var bananas2Stop = new Date(2019,3,11); // april 10
	var kiwi1Start = new Date(2018,9,13); // oct 13
	var kiwi1Stop = new Date(2018,10,25); // nov 24
	var papaya1Start = new Date(2018,8,29); // sept 29
	var papaya1Stop = new Date(2018,8,30); // sept 29
	var papaya2Start = new Date(2018,10,1); // nov 1
	var papaya2Stop = new Date(2018,10,4); // nov 3
	var papaya3Start = new Date(2018,9,15); // oct 15
	var papaya3Stop = new Date(2018,10,25); // nov 24
	var papaya4Start = new Date(2018,10,26); // nov 26
	var papaya4Stop = new Date(2018,11,9); // dec 8
	var papaya5Start = new Date(2018,11,10); // dec 10
	var papaya5Stop = new Date(2019,1,1); // dec 31
	var clemantines1Start = new Date(2018,0,1); // jan 1
	var clemantines1Stop = new Date(2018,2,1); // feb 28
	var clemantines2Start = new Date(2018,9,13); // oct 13
	var clemantines2Stop = new Date(2019,1,29); // feb 28
	var pears1Start = new Date(2018,8,10); // sept 10
	var pears1Stop = new Date(2019,0,3); // jan 2
	var tangerines1Start = new Date(2018,0,1); // jan 1
	var tangerines1Stop = new Date(2018,2,9); // mar 8
	var tangerines2Start = new Date(2018,11,20); // dec 20
	var tangerines2Stop = new Date(2019,2,9); // mar 8
	var starfruit1Start = new Date(2018,0,1); // jan 1
	var starfruit1Stop = new Date(2018,2,9); // mar 8
	var starfruit2Start = new Date(2018,9,13); // oct 12
	var starfruit2Stop = new Date(2019,2,9); // mar 8
	var lemons1Start = new Date(2018,0,1); // jan 1
	var lemons1Stop = new Date(2018,2,1); // feb 28
	var lemons2Start = new Date(2018,10,1); // nov 1
	var lemons2Stop = new Date(2019,2,1); // feb 28
	var apricots1Start = new Date(2018,0,1); // jan 1
	var apricots1Stop = new Date(2018,1,1); // jan 31
	var apricots2Start = new Date(2018,9,1); // oct 1
	var apricots2Stop = new Date(2019,1,1); // jan 31
	var tomatoes1Start = new Date(2018,0,1); // jan 1
	var tomatoes1Stop = new Date(2018,1,1); // jan 31
	var tomatoes2Start = new Date(2018,9,1); // oct 1
	var tomatoes2Stop = new Date(2019,1,1); // jan 31
	var today = new Date();

function yarp() {
	document.body.style.background = "green";
	document.getElementById("main").innerHTML = "you have fruit";
}

function narp() {
	document.body.style.background = "#ffffff";
	document.getElementById("main").innerHTML = "nothing";
}

	if (isSunday == 0) {
		document.body.style.background = "#ffffff";
		document.getElementById("main").innerHTML = "sunday";
		document.getElementById("fruit").innerHTML = "no fruit on a sunday.";
	}

	else {
		if (today >= apples1Start && today <= apples1Stop || today >= apples2Start && today <= apples2Stop || today >= apples3Start && today <= apples3Stop) {
			yarp();
			document.getElementById("fruit").innerHTML += "apples! ";
		}
		if (today >= oranges1Start && today <= oranges1Stop || today >= oranges2Start && today <= oranges2Stop || today >= oranges3Start && today <= oranges3Stop) {
			yarp();
			document.getElementById("fruit").innerHTML += "oranges. ";
		}
		if (today >= bananas1Start && today <= bananas1Stop || today >= bananas2Start && today <= bananas2Stop) {
			yarp();
			document.getElementById("fruit").innerHTML += "bananas. ";
		}
		if (today >= kiwi1Start && today <= kiwi1Stop) {
			yarp();
			document.getElementById("fruit").innerHTML += "kiwi. fancy! ";
		}
		if (today >= papaya1Start && today <= papaya1Stop || today >= papaya2Start && today <= papaya2Stop || today >= papaya3Start && today <= papaya3Stop || today >= papaya4Start && today <= papaya4Stop || today >= papaya5Start && today <= papaya5Stop) {
			yarp();
			document.getElementById("fruit").innerHTML += "papaya. ";
		}
		if (today >= clemantines1Start && today <= clemantines1Stop || today >= clemantines2Start && today <= clemantines2Stop) {
			yarp();
			document.getElementById("fruit").innerHTML += "clemantines. ";
		}
		if (today >= pears1Start && today <= pears1Stop) {
			yarp();
			document.getElementById("fruit").innerHTML += "pears. ";
		}
		if (today >= tangerines1Start && today <= tangerines1Stop || today >= tangerines2Start && today <= tangerines2Stop ) {
			yarp();
			document.getElementById("fruit").innerHTML += "tangerines. ";
		}
		if (today >= starfruit1Start && today <= starfruit1Stop || today >= starfruit2Start && today <= starfruit2Stop ) {
			yarp();
			document.getElementById("fruit").innerHTML += "star fruit. ";
		}
		if (today >= lemons1Start && today <= lemons1Stop || today >= lemons2Start && today <= lemons2Stop ) {
			yarp();
			document.getElementById("fruit").innerHTML += "lemons. ";
		}
		if (today >= apricots1Start && today <= apricots1Stop || today >= apricots2Start && today <= apricots2Stop ) {
			yarp();
			document.getElementById("fruit").innerHTML += "apricots. ";
		}
		if (today >= tomatoes1Start && today <= tomatoes1Stop || today >= tomatoes2Start && today <= tomatoes2Stop ) {
			yarp();
			document.getElementById("fruit").innerHTML += "tomatoes. ";
		}
		
		else {
			narp();
		}
	}

#horizon {
	position: absolute;
	top: 50%;
	width: 100%;
}

#content {
	position: absolute;
	top: -63px;
	text-align: center;
	width: 100%;
}

#main {
	line-height: 75px;
	font-size: 100px;
	margin: 0;
}

<div id="horizon">
	<div id="content">
		<h1 id="main"></h1>
		<p id="fruit"></p>
	</div>
</div>

Answer 1

分隔 if 语句，以便分支不互相排斥，并在测试之前设置一个具有默认值的“结果”变量。

旁注:

• String.indexOf(str) 是一种检查字符串位置的方法在另一个字符串中。它返回搜索的索引位置如果根本没有找到字符串，则在 -1 处找到字符串。它是测试子字符串是否存在的好方法。
• 仅在绝对必要时(即，设置 .innerHTML)，因为这是一项昂贵的操作。反而，您可以提前准备好要在字符串中写出的内容然后，一旦字符串完全构建完毕，将其注入(inject)到仅页面一次。
当您获取/设置的字符串包含时，使用
• .innerHTML需要这样解析的 HTML。当你的字符串没有包含任何 HTML，使用它是浪费，因为你在问HTML 解析器查找并处理它不会处理的 HTML寻找。在这些情况下，请使用 .textContent 因为它会绕过 HTML解析器并且效率更高。

var out = document.getElementById("output");

function fruit(type){

  // Set type to an empty string if it is undefined
  type = type || "";

  // Set a default value first
  var result = "";

  if (type.indexOf("apples") > -1) {
    result = "apples";
  }

  if (type.indexOf("oranges") > -1) {
    result += " oranges";
  }

  if (type.indexOf("bananas") > -1) {
    result += " bananas";
  }
  
  // If the result is still an empty string, nothing correct was passed
  if(!result){
    result = "nothing";
  }
 
  // Now write out the final value of the variable
  // and only use .innerHTML when you are writing HTML,
  // otherwise, use .textContent
  out.textContent = result;
 
}

fruit();                  // My fruit basket has: nothing
fruit("apples");          // My fruit basket has: apples
fruit("oranges");         // My fruit basket has: oranges
fruit("bananas");         // My fruit basket has: bananas
fruit("apples oranges");  // My fruit basket has: apples oranges
fruit("apples bananas");  // My fruit basket has: apples bananas

<p id="fruit">My fruit basket has: <span id="output"></span></p>