JavaScript if...else 语句

 JavaScript 语句和变量声明

if... else语句是JavaScript条件语句之一,用于根据不同的条件执行不同的操作。

在JavaScript中,我们具有以下条件语句:

  • if指定的条件为true,则使用if指定要执行的代码块

  • 如果相同条件为false,则使用else来指定要执行的代码块

  • 如果第一个条件为false,则使用else if指定要测试的新条件

  • 使用switch从要执行的许多代码块中选择一个

语法:

if条件为true,则if语句指定要执行的代码块:

if (condition) {
 //如果条件为true,则执行的代码块
}

else语句指定如果条件是false的要执行的代码块:

if (condition) {
    //如果条件为true,则执行的代码块
} else {
   //如果条件为false,则执行的代码块
}

eelse if语句指定了一个新的条件,如果第一个条件为false:

if (condition1) {
   //如果条件1为true,则执行的代码块
} else if (condition2) {
   //如果条件1为假而条件2为true,则执行的代码块
} else {
   //如果条件1和条件2为false,则执行的代码块
}
var x = -4;
if (x < 0) {
   document.getElementById("result").innerHTML = "NEGATIVE";
}
测试看看‹/›

浏览器兼容性

所有浏览器完全支持if ... else语句:

Statement
if...else

参数值

参数描述
condition计算结果为true或false的表达式

技术细节

JavaScript版本:ECMAScript 1

更多实例

如果变量x的值小于0,则输出“ NEGATIVE”,否则输出“ POSITIVE”:

var x = -4;
if (x < 0) {
   msg = "NEGATIVE";
} else {
   msg = "POSITIVE";   
}
测试看看‹/›

如果x等于10,则写“ x为10”,如果不等于,但x等于20,则写“ x为20”,否则写为“ x不存在”:

var x = 20;

if (x === 10) {
   document.write("x 为 10");
} else if (x === 20) {
   document.write("x 为 20");
} else {
   document.write("x不存在");
}
测试看看‹/›

您可以使用多个else if语句:

// 设置学生的当前成绩
var grade = 88;

//检查成绩是否为A,B,C,D或F
if (grade >= 90) {
   document.write("A");
} else if (grade >= 80) {
   document.write("B");
} else if (grade >= 70) {
   document.write("C");
} else if (grade >= 60) {
   document.write("D");
} else {
   document.write("F");
}
测试看看‹/›

您可以编写不带花括号的单行语句:

var x = -4;
if (x < 0)
   msg = "NEGATIVE";
else
   msg = "POSITIVE";
测试看看‹/›

如果用户单击图像,请更改图像的src属性的值:

<img id="demo" onclick="changeImage()" src="avatar-female.jpg">

<script>
function changeImage() {
   var image = document.getElementById("demo");
   if (image.src.match("female")) {
   image.src = "avatar-male.jpg";
   } else {
   image.src = "avatar-female.jpg";
   }
}
</script>
测试看看‹/›

使用if ... else语句验证输入数据:

function myFunc(x) {
   var text;

//如果x不是一个数字,或者小于10,或者大于20,输出“Input not valid”
//如果x是10到20之间的数字,则输出“Input OK”

   if (isNaN(x) || x < 10 || x > 20) {
  text = "Input not valid";
   } else {
  text = "Input OK";
   }

document.getElementById("result").innerHTML = text;
}
测试看看‹/›

嵌套if ... else语句:

var a = 10, b = 20, c = 30;
var answer;

if (a > b) {
   if (a > c) {
  answer = "A is the greatest among three";
   } else {
  answer = "C is the greatest among three";
   }
} else if (b > c) {
   answer = "B is the greatest among three";
} else {
   answer = "C is the greatest among three";   
}
测试看看‹/›

也可以参考

JavaScript教程:JavaScript If... Else语句

JavaScript教程:JavaScript switch

 JavaScript 语句和变量声明