JavaScript中有三种判断语句，分别是：if else, 三元运算符, switch case。其中if, else if, else 是最常用的判断, 可以解决JavaScript中所有的判断需求。而三元运算符应用于简单的if else情况，switch case 应用于不同值情况下不同的操作。
首先，if else的语法规则如下：
if (条件1) {
执行条件1成立的js代码
} else if (条件2) {
执行条件2成立的js代码
} else if (条件3) {
执行条件3成立的js代码
} ...(这里好多个 else if) else {
以上所有条件都不成立执行的代码
}
if中的条件可以是 <, > , ==, 还可以是一个值(判断当前的值代表的是真还是假)。
if ([]) { // true
console.log('1111'); // 输出
}
if中条件还可以是多个小的条件组合，中间用||（只要有一个为真，整体为真）或者&&（所有的小条件都为真，整体才为真）隔开。
if (1 && true) {}
if (false && true) {}
if (1 || false) {}
if ("" || false) {}
举例说明 if else的使用：
var num = 10;
if (num < 0) {
console.log('负数');
} else if (num >= 0 && num <= 10) {
console.log('0-10之间');
} else if (num > 10) {
console.log('10以上');
}
// 输出'0-10之间'
三目运算符：
语法规则如下：
条件 ? 条件成立执行 : 条件不成立不执行;
例如如下的 if else 判断：
var num2 = 15;
if (num2 > 0) {
console.log('正数或零')
} else {
console.log('负数');
}
可用三目运算符将其改写为：
console.log(num2 >= 0 ? '正数或零' : '负数');
又如：
var num3 = 15;
if (num3 >= 0) {
console.log('正数或零');
}
可用三目运算符改写为：
console.log(num >= 0 ? '正数或零' : void 0);
switch case:
每一种case情况下都要加break; 如果不加break，不管后面的代码是否成立，都执行了。
每一种case相当于 === 的比较，一定要注意数据类型是否一致。
例如：
var num = 10;
if (num === 0) {
console.log('0')
} else if (num === 5) {
console.log('5');
} else if (num === 10) {
console.log('10');
} else {
console.log('NaN');
}
可将其改写为：
switch (num) {
case 0: console.log('0'); break;
case 5: console.log('5'); break;
case 10: console.log('10'); break;
default: console.log('NaN');
}
做一个小案例，在页面中点击后，页面会切换不同的颜色，就像走马灯一样。
代码如下：
<script>
// 三个判断的小应用 -> 开关灯
// 首先获取body
// document.getElementById('元素标签的ID值');
// document: 文档，称之为上下文（context 限定我们获取元素的范围）
// get: 获取
// Element: 一个元素
// by: 通过
// Id: 元素的ID
// 在整个文档中，通过元素的ID获取一个元素
var oBody = document.getElementById('oBody');
// 然后让body有一个可以点击的功能
/*
元素.onclick = function () {
点击的时候，我们要处理的事情
}
*/
// 给一个元素绑定一个点击事件
oBody.onclick = function () {
// 点击的时候执行我们的换颜色操作
// 每一次点击的时候，都要先获取当前的背景颜色
// 元素.style.backgroundColor -> 获取当前元素在"行内样式上"的背景颜色
// 根据颜色让背景变成其他的颜色
// 在绑定的事件中，this就是我们当前点击的这个元素oBody
var bgColor = this.style.backgroundColor;
// if (bgColor === 'white') {
// this.style.backgroundColor = 'black';
// } else {
// this.style.backgroundColor = 'white';
// }
switch (bgColor) {
case 'white': this.style.backgroundColor = 'red'; break;
case 'red': this.style.backgroundColor = 'green'; break;
case 'green': this.style.backgroundColor = 'blue'; break;
case 'blue': this.style.backgroundColor = 'white'; break;
default: this.style.backgroundColor = 'white';
}
}
</script>
