JavaScript：在不运行 else 的情况下计算多个 if 语句

Question

我试图用多个if语句构建一个简单的javascript页面。其思想是根据一堆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其他，但它在第一次“匹配”后退出。所以在上面的例子中，如果我有苹果和香蕉，使用if其他将返回

My fruit basket has: apples

别告诉我我也有香蕉。

问题：我该如何做到这一点，以便只在all if语句失败的情况下运行否则语句？

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

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

我尝试使用OR运算符，但它破坏了一切。在我的代码中，在if（苹果）上实际发生的事情是，它正在检查今天的日期，看看它是否在一个日期范围内。它需要根据一个相当复杂的时间表对一大堆不同的水果执行此操作，也就是说，弄清楚某一天篮子里到底有哪些水果比根据这些if'规则运行时间表更难。

	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();
		}
	}

css lang-css prettyprint-override">#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

有多种方法可以做到这一点。我倾向于添加一个变量来跟踪是否有任何ifs返回true：

var empty = true;
if(apples) {
    innerHTML += "apples";
    empty = false;
}
if(oranges) {
    innerHTML += "oranges";
    empty = false;
}
if(bananas) {
    innerHTML += "bananas";
    empty = false;
}
if(empty) {
    innerHTML += "nothing";
}

或者，您可以根据添加的字符串的长度确定它是否为空：

var str = "";
if(apples) {
    str += "apples";
}
if(oranges) {
    str += "oranges";
}
if(bananas) {
    str += "bananas";
}
if(str.length == 0) {
    str = "nothing";
}

innerHTML += str;

Answer 2

使用求反运算符检查< code>nothing情况。

if (!(apples || oranges || bananas)) {
  document.getElementById("fruit").innerHTML = "nothing";
  return; // Assuming this code is inside of a function.
}

if (apples) {
  document.getElementById("fruit").innerHTML += "apples";
}

if (oranges) {
  document.getElementById("fruit").innerHTML += "oranges";
}

if (bananas) {
  document.getElementById("fruit").innerHTML += "bananas";
}

Answer 3

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

附带说明：

< Li > < code > string . index of(str)是一种检查一个字符串在另一个字符串中的位置的方法。它返回搜索字符串所在的索引位置，如果根本没有找到该字符串，则返回< code>-1。这是测试子串是否存在的好方法。 < li >仅在绝对必要时更新网页元素(即设置< code >)。innerHTML)，因为这是一个开销很大的操作。相反，您可以提前准备好要在字符串中写出的内容，然后，一旦字符串构建完成，只需将它注入页面一次。 < li > <代码>。innerHTML在您正在获取/设置的字符串包含需要进行解析的HTML时使用。当您的字符串不包含任何HTML时，使用它是浪费，因为您要求HTML解析器查找和处理它不会找到的HTML。在这些情况下，请使用< code >。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>