JavaScript 条件
JavaScript基础 2022-04-25 01:32:59小码哥的IT人生shichen
JavaScript 条件
条件语句用于基于不同条件执行不同的动作。
条件语句
在您写代码时，经常会需要基于不同判断执行不同的动作。
您可以在代码中使用条件语句来实现这一点。
在 JavaScript 中，我们可使用如下条件语句：
- 使用
if来规定要执行的代码块，如果指定条件为 true - 使用
else来规定要执行的代码块，如果相同的条件为 false - 使用
else if来规定要测试的新条件，如果第一个条件为 false - 使用
switch来规定多个被执行的备选代码块
if 语句
请使用 if 语句来规定假如条件为 true 时被执行的 JavaScript 代码块。
语法
if (条件) {
如果条件为 true 时执行的代码
}
注释：if 使用小写字母。大写字母（IF 或 If）会产生 JavaScript 错误。
示例代码：
如果时间早于 18:00，则发出 "Good day" 的问候：
if (hour < 18) {
greeting = "Good day";
}
如果时间早于 18 点，则 greeting 的结果将是：
Good day
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>如果小时小于18:00，显示“美好的一天！”：</p>
<p id="demo">晚安</p>
<script>
if (new Date().getHours() < 18) {
document.getElementById("demo").innerHTML = "美好的一天！";
}
</script>
</body>
</html>
运行结果：
如果小时小于18:00，显示“美好的一天！”： 美好的一天！
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
else 语句
请使用 else 语句来规定假如条件为 false 时的代码块。
if (条件) {
条件为 true 时执行的代码块
} else {
条件为 false 时执行的代码块
}
示例代码：
如果 hour 小于 18，创建 "Good day" 问候，否则 "Good evening"：
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
greeting 的结果：
Good day
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>单击按钮以显示基于时间的问候语：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var hour = new Date().getHours();
var greeting;
if (hour < 18) {
greeting = "日安";
} else {
greeting = "晚安";
}
document.getElementById("demo").innerHTML = greeting;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
else if 语句
请使用 else if 来规定当首个条件为 false 时的新条件。
语法
if (条件 1) {
条件 1 为 true 时执行的代码块
} else if (条件 2) {
条件 1 为 false 而条件 2 为 true 时执行的代码块
} else {
条件 1 和条件 2 同时为 false 时执行的代码块
}
示例代码：
如果时间早于 10:00，则创建 "Good morning" 问候，如果不是，但时间早于 18:00，则创建 "Good day" 问候，否则创建 "Good evening"：
if (time < 10) {
greeting = "Good morning";
} else if (time < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
greeting 的结果：
Good day
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>单击按钮以显示基于时间的问候语：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var greeting;
var time = new Date().getHours();
if (time < 10) {
greeting = "早安";
} else if (time < 20) {
greeting = "日安";
} else {
greeting = "晚安";
}
document.getElementById("demo").innerHTML = greeting;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
课外扩展
如需更多有关 JavaScript if 语句的知识，请阅读 JavaScript 高级教程中的相关内容：
- ECMAScript if 语句
- if 语句是 ECMAScript 中最常用的语句之一。本节为您详细讲解了如何使用 if 语句。
