JavaScript中的if语句与switch语句介绍与比较

JavaScript条件语句详解

最新推荐文章于 2021-02-27 02:19:56 发布

xianqi_h

最新推荐文章于 2021-02-27 02:19:56 发布

阅读量357

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript 浏览器 ViewUI

本文链接：https://blog.youkuaiyun.com/xianqi_h/article/details/83694611

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了JavaScript中的条件语句，包括if语句、if...else语句、if...elseif...else语句及switch语句的语法和用法，并通过多个实例展示了如何根据不同条件执行不同代码。

[size=medium][b]JavaScript 中的If条件语句用于完成不同条件下的行为。[/b][/size]

实例

[b]If 语句[/b]

<html>
<body>

<p>本例演示 If 语句。</p>

<p>如果浏览器时间小于 11，那么会向您问“早安”。</p>

<script type="text/javascript">
var d = new Date()
var time = d.getHours()

if (time < 11)
{
document.write("<b>早安</b>")
}
</script>

</body>
</html>

[b]If...else 语句[/b]

<html>
<body>

<script type="text/javascript">
var d = new Date()
var time = d.getHours()

if (time < 10)
{
document.write("<b>早安</b>")
}
else
{
document.write("<b>祝您愉快</b>")
}
</script>

<p>本例演示 If...Else 语句。</p>

<p>如果浏览器时间小于 10，那么会向您问“早安”，否则会向您问候“祝您愉快”。</p>

</body>
</html>

[b]If..else if...else 语句[/b]

[b]条件语句[/b]

在您编写代码时，经常需要根据不同的条件完成不同的行为。可以在代码中使用条件语句来完成这个任务。

在 JavaScript 中，我们可以使用下面几种条件语句：

if 语句
在一个指定的条件成立时执行代码。
if...else 语句
在指定的条件成立时执行代码，当条件不成立时执行另外的代码。
if...else if....else 语句
使用这个语句可以选择执行若干块代码中的一个。
switch 语句
使用这个语句可以选择执行若干块代码中的一个。

If 语句

如果希望指定的条件成立时执行代码，就可以使用这个语句。

语法：

if (条件)
{
条件成立时执行代码
}

注意：请使用小写字母。使用大写的 IF 会出错！
实例 1

<script type="text/javascript">
//Write a "Good morning" greeting if
//the time is less than 10

var d=new Date()
var time=d.getHours()

if (time<10)
{
document.write("<b>Good morning</b>")
}
</script>

实例 2

<script type="text/javascript">
//Write "Lunch-time!" if the time is 11

var d=new Date()
var time=d.getHours()

if (time==11)
{
document.write("<b>Lunch-time!</b>")
}
</script>

注意：请使用双等号 (==) 来比较变量！

注意：在语法中没有 else。仅仅当条件为 true 时，代码才会执行。
If...else 语句

如果希望条件成立时执行一段代码，而条件不成立时执行另一段代码，那么可以使用 if....else 语句。
语法：

if (条件)
{
条件成立时执行此代码
}
else
{
条件不成立时执行此代码
}

实例

<script type="text/javascript">
//If the time is less than 10,
//you will get a "Good morning" greeting.
//Otherwise you will get a "Good day" greeting.

var d = new Date()
var time = d.getHours()

if (time < 10)
{
document.write("Good morning!")
}
else
{
document.write("Good day!")
}
</script>

If...else if...else 语句

当需要选择多套代码中的一套来运行时，请使用 if....else if...else 语句。
语法：

if (条件1)
{
条件1成立时执行代码
}
else if (条件2)
{
条件2成立时执行代码
}
else
{
条件1和条件2均不成立时执行代码
}

实例：

<script type="text/javascript">

var d = new Date()
var time = d.getHours()

if (time<10)
{
document.write("<b>Good morning</b>")
}
else if (time>10 && time<16)
{
document.write("<b>Good day</b>")
}
else
{
document.write("<b>Hello World!</b>")
}
</script>

[size=medium][b]switch 语句[/b][/size]

[b]switch 语句是 if 语句的兄弟语句。[/b]

开发者可以用 switch 语句为表达式提供一系列的情况（case）。

switch 语句的语法：

switch (expression)
case value: statement;
break;
case value: statement;
break;
case value: statement;
break;
case value: statement;
break;
...
case value: statement;
break;
default: statement;

每个情况（case）都是表示“如果 expression 等于 value，就执行 statement”。

关键字 break 会使代码跳出 switch 语句。如果没有关键字 break，代码执行就会继续进入下一个 case。

关键字 default 说明了表达式的结果不等于任何一种情况时的操作（事实上，它相对于 else 从句）。

switch 语句主要是为避免让开发者编写下面的代码：

if (i == 20)
alert("20");
else if (i == 30)
alert("30");
else if (i == 40)
alert("40");
else
alert("other");

等价的 switch 语句是这样的：

switch (i) {
case 20: alert("20");
break;
case 30: alert("30");
break;
case 40: alert("40");
break;
default: alert("other");
}

JavaScript 和 Java 中的 switch 语句
[b]
JavaScript 和 Java 中的 switch 语句有两点不同[/b]。在 JavaScript 中，[b]switch 语句可以用于字符串[/b]，而且[b]能用不是常量的值说明情况[/b]：

var BLUE = "blue", RED = "red", GREEN = "green";

switch (sColor) {
case BLUE: alert("Blue");
break;
case RED: alert("Red");
break;
case GREEN: alert("Green");
break;
default: alert("Other");
}

这里，switch 语句用于字符串 sColor，声明 case 使用的是变量 BLUE、RED 和 GREEN，这在 JavaScript 中是完全有效的。