JavaScript-if
if 第一种形式
if(条件表达式){
条件满足执行的语句;
}
if 第一个形式的特点
当条件表达式为真的时候就会执行 {} 中所有的代码, 并且只会执行一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
let age = 19;
if (age >= 18) {
console.log("开网卡");
}
console.log("卖饮料");
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
let age = 17;
if (age >= 18) {
console.log("开网卡");
}
console.log("卖饮料");
</script>
</head>
<body>
</body>
</html>
if 第二种形式
if(条件表达式){
条件成立执行的语句;
}else{
条件不成立执行的语句;
}
if 第二种形式的特点
- 当条件满足就执行 if 后面 {} 中的代码。
- 当条件不满足就执行 else 后面 {} 中的代码。
- 并且两个 {} 只有一个会被执行, 并且只会被执行一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
let age = 19;
if (age >= 18) {
console.log("开网卡");
} else {
console.log("回家叫家长");
}
console.log("卖饮料");
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
let age = 17;
if (age >= 18) {
console.log("开网卡");
} else {
console.log("回家叫家长");
}
console.log("卖饮料");
</script>
</head>
<body>
</body>
</html>
if 第三种形式
if(条件表达式A){
条件A满足执行的语句;
}else if(条件表达式B){
条件B满足执行的语句;
}
... ...
else{
前面所有条件都不满足执行的语句;
}
if 第三种形式的特点
- 会从上至下的依次判断每一个条件表达式, 哪一个条件表达式满足, 就执行哪一个条件表达式后面 {} 中的代码。
- 如果前面所有的条件表达式都不满足, 就会执行 else 后面 {} 中的代码。
- 并且众多的大括号只有一个会被执行, 并且只会执行一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
let age = 4;
if (age >= 18) {
console.log("上大学");
} else if (age >= 12) {
console.log("上中学");
} else if (age >= 6) {
console.log("上小学");
} else {
console.log("在家玩");
}
console.log("选择结构后面的代码");
</script>
</head>
<body>
</body>
</html>
if 注意点
对于非布尔类型的数据, 会先转换成布尔类型再判断。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
if (0) {
console.log("语句A");
}
console.log("语句B");
</script>
</head>
<body>
</body>
</html>
对于 == / === 判断, 将常量写在前面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
let num = 10;
if (5 == num) {
console.log("语句A");
}
console.log("语句B");
</script>
</head>
<body>
</body>
</html>
if / else if / else 后面的大括号都可以省略, 但是省略之后只有紧随其后的语句会受到控制。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
if (false)
console.log("语句A");
console.log("语句B");
</script>
</head>
<body>
</body>
</html>
在 JavaScript 中分号
(;)也是一条语句 (空语句)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
if (false) ;
{
console.log("语句A");
console.log("语句B");
}
</script>
</head>
<body>
</body>
</html>
if 选择结构可以嵌套使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
if (true) {
if (false) {
console.log("语句A1");
} else {
console.log("语句B1");
}
} else {
if (false) {
console.log("语句A2");
} else {
console.log("语句B2");
}
}
</script>
</head>
<body>
</body>
</html>
当 if 选择结构省略大括号时, else if / else 会自动和距离最近没有被使用的 if 匹配。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
if (0)
if (1)
console.log("A");
else
console.log("B");
else if (1)
console.log("C");
else
console.log("D");
</script>
</head>
<body>
</body>
</html>
