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

Question

我正在尝试将一个带有多个 if 语句的简单 javascript 页面组合在一起。这个想法是基于对一堆 if 语句的评估附加到一个列表中。问题是如果其中任何一个失败，它会触发 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，但在第一次“匹配”后它就退出了。所以在上面的例子中，如果我有 both 苹果和香蕉，使用if else 将返回

My fruit basket has: apples

别告诉我我也有香蕉。

问题：我该怎么做才能使 else 语句仅在所有 if 语句都失败的情况下运行？

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

直到所有的 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 或 -1 找到字符串。它是 测试子字符串是否存在的好方法。
• 仅在绝对必要时更新网页元素（即 设置.innerHTML) 因为这是一项昂贵的操作。反而， 你可以提前准备好你想写的字符串 然后，一旦字符串完全构建，将其注入 页面一次。
• .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>

Answer 2

使用否定运算符检查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

有多种方法可以做到这一点。我偏爱添加一个变量来跟踪是否有任何 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 4

您可以使用 或 || 分隔符 将这些语句组合起来，并捕获所有其他情况：

语法：if (apples || oranges || bananas) {} if apples or oranges or bananas

语法：if (apples && oranges && bananas) {} if apples and oranges and bananas

语法：if ( (apples && oranges) || bananas) {} 如果 apples 和 oranges 或只是 bananas

var apples = false, oranges = false, bananas = false

var count=0 // just for displaying different fruits
function switchFruit() {
 
  if (count == 1) {apples=true; oranges=false, bananas=false, button.value="apple"}
  if (count == 2) {apples=false; oranges=true, bananas=false, button.value="oranges"}
  if (count == 3) {apples=false; oranges=false, bananas=true, button.value="bananas"; count=0}
  
  count++;
  
  if (apples || oranges || bananas) { // if apples or oranges or bananas
    if (apples) {
      document.getElementById("fruit").innerHTML += "apples ";
    }
    if (oranges) {
      document.getElementById("fruit").innerHTML += "oranges ";
    }
    if (bananas) {
      document.getElementById("fruit").innerHTML += "bananas ";
    }
  } else { // if not one of "apples, oranges, bananas"
    document.getElementById("fruit").innerHTML += "nothing ";
  }
}

<input type="button" id="button" onclick="switchFruit()" value="nothing">

<p id="fruit"></p>

看看docs中的逻辑运算符