JavaScript判断

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>