【前端从入门到精通：第十二课： JS运算符及分支结构】

JavaScript运算符

算数运算符

关于自增自减运算

自增或者自减运算就是在本身的基础上进行+1或者-1的操作

自增或者自减运算符可以在变量前也可以在变量后，但是意义不同

自增自减运算符如果在变量前，是先进行自增或者自减运算，在将变量给别人用

自增自减运算符如果在变脸后，先将变量给别人使用后，在进行自增或者自减运算

案例

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            width:100px;
        }
    </style>
</head>
<body>
<script>

    /**********算术运算符***********/
        //1.必须是数值类型的才能参与运算
        // 如果是其它类型 需要转成数值类型Number
    let no1 = 10
    let no2 = 20
    let result = no1 + no2
    console.log(result)
        //声明一个非数值类型的变量
    //会发生自动数据类型转换
    let no3 = true
    result = no1 + no3
    console.log(result)

    //声明字符串
    // + 一个加法运算 另一个重载功能，连接字符串
    // + 作为字符串连接，如果右字符串参与运算都会转换成字符串
    let no4 = '10'
    result = no1 + no4
    console.log(result)

    //强制类型转换
    let no5 = '100px'
    let num = parseInt(no5)
    console.log(num)
    result = no1 + num
    console.log(result+'px')

    // 减法运算 -
    no1 = 10
    no2 = 20
    console.log(no1 - no2)

    console.log(no2)
    // - 作用就是减法，直接将-号放到变量前，将变量变成负数
    no2 = -no2
    console.log(no2)

    //乘法运算
    no1 = 15
    no2 = 3
    console.log(no1 * no2)

    no2 = 0
    console.log(no1 * no2)


    // / 除法运算
    no1 = 10
    no2 = 2
    console.log(no1 / no2)

    //除数不能为0  返回结果 Infinity
    no2 = 0
    console.log(no1 / no2)

    no1 = 0
    no2 = 10
    console.log(no1 / no2)

    //% 求模运算
    /*
        让一个数不超过另一个数的
        2000 % 4 == 0 判断一个数可以被什么数整除时使用

     */
    no1 = 10
    no2 = 3
    console.log(no1 % no2)
    no2 = 4
    console.log(no1 % no2)
    no2 = 2
    console.log(no1 % no2)

    no3 = 11
    console.log(no3 % 2)
    /*
        如果 no3 % 2 == 0
            偶数
        否则
            奇数
     */

    // 自增或者自减运算 ++ --
    /*
        1.自增或者自减运算就是在本身的基础上进行+1或者-1的操作
        2.自增或者自减运算符可以在变量前也可以在变量后，但是意义不同
        3.自增自减运算符如果在变量前，是先进行自增或者自减运算，在将变量给别人用
        4.自增自减运算符如果在变脸后，先将变量给别人使用后，在进行自增或者自减运算
     */
    let a = 10
    a ++
    console.log(a)
    let b = 10
    b --
    console.log(b)
    let c = 10
    ++ c
    console.log(c)

    let num1 = 10
    //++在后是先将变量给别人用
    console.log(num1 ++)
    //然后在自增
    console.log(num1)
    let num2 = 10
    //++或者--在变量前先将变量自增后在进行使用
    console.log(++ num2)

    no1 = 10
    no2 = 15
    result = no1 ++ + ++ no2
    console.log(result)
    console.log(no1)
    //no1 = 11
    //no1 ++  //11
    // +
    // ++ no1  //13  // 24
    result = no1 ++ + ++no1
    console.log(result)

</script>
</body>
</html>

赋值运算符

案例

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*************赋值运算符*************/
    //赋值运算符就是将等号右边的内容赋值给左边的变量
    let a = 5
    let b = a + 5
    console.log(b)
    let c = a * 5 + b - 3 / 1
    console.log(c)

    // += 加等运算符
    let no1 = 10
    // no1 = no1 + 15
    //简写
    no1 += 15
    console.log(no1)

    // -=  no2 = no2 - 5
    let no2 = 10
    no2 -= 5
    console.log(no2)

    // *=   no3 = no3 * 3
    let no3 = 3
    no3 *= 3
    console.log(no3)

    // /=  no4 = no4 / 2
    let no4 = 10
    no4 /= 2
    console.log(no4)

    // %=  no5 = no5 % 2
    let no5 = 10
    no5 %=  2
    console.log(no5)

    //div>h1>i>跟我学习JS
    //<div><h1><i>跟我学习js</i></h1></div>
    let html = ''
    html += '<div>'
    html += '<h1>'
    html += '<i>'
    html += '跟我学习JS'
    html += '</i>'
    html += '</h1>'
    html += '</div>'

    document.write(html)
</script>
</body>
</html>

比较运算符

案例

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*
      == 等于运算符   只要值相等就返回true
      === 全等于   不光值要相当 类型也要相等
      != 不等于
      !== 非全等于
     */
    console.log(3 == 3)
    console.log(3 == 4)
    console.log(3 == '3')
    console.log(3 === 3)
    console.log(3 === 4)
    console.log(3 === '3')
    console.log(3 != 4)
    console.log(3 != '3')
    console.log(3 !== '3')
    console.log(3 > 4)
    console.log(3 < 4)
    console.log(3 >= 3)
    console.log(3 <= 3)

    //三元运算符  表达式 ？ 表达式结果为真取这里 ： 表达式结果为假取这里

    let a = 10
    let b = 20
    // a > b ? alert('真大') : alert('兄die 太小了')
    // a < b ? alert('真大') : alert('兄die 太小了')
    // true ? alert('真大') : alert('兄die 太小了')
    // false ? alert('真大') : alert('兄die 太小了')

    //当一个变量有可能出现两个值的情况
    // let num = a > b ? '你好' : '他好'
    let num = a < b ? '你好' : '他好'
    console.log(num)
</script>
</body>
</html>

逻辑运算符

案例

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /********逻辑运算符**********/
    // &&  逻辑与  两边都为真时，结果为真，其余情况都为假
        /*
        * 1. 左手洗了左脸(true),右手洗了右脸(true),洗完脸了(true)
        * 2. 左手洗了左脸(true),右手没洗右脸(false),洗完脸了(false)
        * 3. 左手没洗左脸(false),右手洗了右脸(true),洗完脸了(false)
        * 4. 左手没洗左脸(false),右手没洗右脸(false),没洗脸(false)
        * */

    let result = true && true
    result = true && false
    result = false && true
    result = false && false
    console.log(result)

    // || 逻辑或   两边都为假时，结果为假，其余情况都为真
    /*
    * 1.大哥没找到大嫂(false),我也没找到大嫂(false)，大嫂成功离家出走(fasle)
    * 2.大哥找到了大嫂(true)，我没有找到大嫂（false）,找到大嫂了（true）
    * 3.大哥没找到大嫂(false),我找到了大嫂(true)，找到大嫂了（true）
    * 4.大哥（true）和 我(true)一起找到了大嫂，找到大嫂了（true）
    * */
    result = true || true
    result = true || false
    result = false || true
    result = false || false
    console.log(result)

    // 逻辑非 ！  真变假、假变真
    /*
    *   某男人(true)去泰国旅游了一圈，被砍了一刀，回来就没那么纯了(false)
    *   某女人(false)去韩国旅游了一圈，被医院整了，回来就变了(true)
    * */
    result = !true
    result = !false
    console.log(result)
</script>
</body>
</html>

位运算符

在每一位的基础上进行逻辑运算

案例

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //按位与运算 & （shift + 7）
    let no1 = 10
    let no2 = 15
    let result = no1 & no2
    console.log(result)
    /*
        1010
        1111
        1010
     */

    //按位或
    no1 = 10
    no2 = 15
    result = no1 | no2
    console.log(result)
    /*
        1010
        1111
        1111
     */

    //按位异或
    no1 = 10
    no2 = 15
    result = no1 ^ no2
    console.log(result)
    /*
      1010
      1111
      0101
   */

    //左移 <<
    /*
        0000  0000  0000  1010
      00 0000 0000 0000 101000
     */
    no1 = 10
    result  = no1 << 2
    console.log(result)

    //右移
    /*
       0000 0000  0000 1010
          0000 0000 0000 10
    */
    no1 = 10
    result = no1 >> 2
    console.log(result)

    //零填充右移
    /*
       0000 0000  0000 1010
        000000 0000 0000 10
    */
    no1 = 10
    result = no1 >>> 2
    console.log(result)

    no1 = 128
    result = no1 << 2
    console.log(result)

    no1 = 128
    result = no1 >> 2
    console.log(result)
</script>
</body>
</html>

类型运算符(对象讲)

运算符的优先级

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    let num = (3 + 4) * 5 - 2 / 2
    console.log(num)

</script>
</body>
</html>

运算符短路

&& 和 || 存在短路

& 和 | 不存在短路

案例

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    let result = true && true
    console.log(result)

    //&& 在做逻辑与运算的时候，如果前面的为false后面就没有必要执行了
    result = 0 && 1
    console.log(result)

    result = 3 && false
    console.log(result)

    result  = 2 && 3 && 4
    console.log(result)

    //||  如果有一个成立，结果就是成立，如果前面成立，就不执行后面了
    result = 3 || 0
    console.log(result)

    result = 0 || 3
    console.log(result)

    //& | 不存在短路问题
    let a = 3
    if(a > 6 & (a++ < 30)){}
    console.log(a)
</script>
</body>
</html>

ES6新增运算符(讲完对象之后讲)

1.3. 流程控制

1.3.1. 1. 什么是流程控制

对程序代码执行流程的控制就是流程控制

1.3.2. 2. 什么是流程

程序执行的顺序就是流程

1.3.3. 3.流程的分类

顺序结构(默认的)

分支结构(选择结构)

循环结构

1.3.4. 4. 顺序结构

程序自上而下的执行过程就是顺序结构，所有的程序默认都是顺序结构

1.3.5. 5. 分支结构

程序在执行过程中，往往要根据不同的运行结果做出不同的选择或者忽略部分代码的执行，这种执行结构就是分支结构

1.3.6. 6. 分支结构的分类

1.3.6.1. 1.单项分支结构

格式一：

css 复制代码

if(条件表达式)
    单条执行语句

关于格式一

如果条件表达式为真，将会执行if之后的一条执行语句。

该格式的分支结构仅能控制if之后的一条语句

格式二

css 复制代码

if(条件表达式){
    单条或多条执行语句

}

关于格式二

该格式的分支结构，可以控制if之后的一个完整的代码块,{}区域的所有内容

案例

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单项分支结构</title>
</head>
<body>
<script>
    /*********单项分支结构*********/
    //格式1：不带有花括号版本，只能管理if后面的一条执行语句
    let name = '史珍香1'
    if(name == '史珍香')
        console.log('珍香真是一位大美女')
    console.log('我做梦都想娶她回家')


    //格式2：带有{}版本  {}代码块  格式2 涵盖格式1
    name = '小浣熊'
    if(name == '小浣熊'){
        console.log('我想吃方便面')
        console.log('小浣熊真好吃')
        console.log('吃着吃着就饱了')
    }
    console.log('吃完喝点水吧')
</script>
</body>
</html>

1.3.6.2. 2.双项分支结构

双项分支在单项分支的基础上增加了一个else分支

格式一：

css 复制代码

if(条件表达式的)
    一条执行语句
else
    一条执行语句

关于格式一

如果条件表达式结果为真，将执行if后面的一条代码

如果条件表达式结果为假，将执行else后面的一条代码

if后面的代码称之为if区间或者叫真区间

else后面的代码称为else区间或者叫假区间

格式二：

css 复制代码

if(条件表达式){
    一条或多条执行语句
}else{
    一条或多条执行语句
}

关于格式二

推荐使用有{}的版本的格式，带有{}版本的代码可读性高，不容易混淆。

格式2的功能已经包含了格式1的功能，{}也可以写一条执行语句

案例

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*********双项分支结构*********/

    //格式一：
            //只能管理if后面或者else后面的一条语句
    let name = 'hello1'
    if(name == 'hello')
      console.log('他们是相等于')
      // console.log('他们真的相等')
    else
      console.log('他们是不相等的')
    console.log('我执行完毕')


    //格式二：
    name = 'world1'
    if(name == 'world'){
      console.log('你来找我')
      console.log('我请你喝')
      console.log('奶茶')
    }else{
      console.log('我去找你')
      console.log('你请我喝')
      console.log('勇闯天涯')
    }
</script>
</body>
</html>

练习案例：

给定年份求是闰年还是平年

定义年份为：2028

闰年：能被4整除、但是不能被100整除或者能被400整除

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*
    - 给定年份求是闰年还是平年
    - 定义年份为：2028
    - 闰年：能被4整除、但是不能被100整除或者能被400整除
     */

    let year = 2028

    if((year % 4 == 0 && year % 100 != 0) || year % 400 == 0){
        console.log(year + '年是闰年')
    }else{
        console.log(year + '年是平年')
    }
</script>
</body>
</html>

1.3.6.3. 3. 多项分支结构

格式一：

css 复制代码

if(条件表达式){
    执行语句
}else if(条件表达式){
    执行语句
}else if(条件表达式){
    执行语句
}......
else{
    执行语句
}

else if关键词中间有空格，每一个if()内都要有一个条件表达式

案例

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    let score = 180
    if(score == 100){
        console.log('满分，恭喜晋级')
    }else if(score >= 85 && score < 100){
        console.log('你是一个优秀的孩子')
    }else if(score >= 70 && score < 85){
        console.log('良好，身体倍棒，吃嘛嘛香')
    }else if(score >= 60 && score < 70){
        console.log('及格，60分万岁，多一份浪费，少一分犯罪')
    }else{
        console.log('回家男女混合双打~~~~55555~~~')
    }
</script>
</body>
</html>

格式二：

css 复制代码

switch(数据){
    case 值：
        执行语句
        [break]
    case 值:
        执行语句
        [break]
    default:
        执行语句
}

案例

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /***********多项分支结构格式二：switch...case**************/
    //适合精确值的判断
    let score = 60
    switch (score){
        case 100:
            console.log('满分，恭喜晋级')
            break
        case 85:
            console.log('你是一个优秀的孩子')
            break
        case 70:
            console.log('良好，身体倍棒，吃嘛嘛香')
            break
        case 60:
            console.log('及格，60分万岁，多一份浪费，少一分犯罪')
            break
        default:
            console.log('回家双打 555555~~~~~')
    }

    //适合精确值的判断
    let week = 690
    switch (week){
        case 1:
            console.log('今天是周一，中午吃小母鸡顿老母鸡')
            break
        case 2:
            console.log('今天是周二，中午吃西红柿炒番茄')
            break
        case 3:
            console.log('今天是周三，中午吃马铃薯顿土豆')
            break
        case 4:
            console.log('今天是周四，中午吃大米煮小米')
            break
        case 5:
            console.log('今天是周五，中午吃老醋花生米')
            break
        default:
            console.log('今天是周末，改善伙食，中午吃油焖大蛆')
    }
</script>
</body>
</html>

注意：

switch...case的分支结构跟if...elseif...else的分支结构并不相同

switch...case的分支结构可以同时执行多条分支(分支中没有break语句，那么从当前case开始一直执行到最后)

如果使用switch...case实现多项分支的单项选择，可以为每一个分支添加break语句

switch...case的取值需从字符串和整型布尔值中选取，不推荐浮点数。

switch...case适合用于精确值的判断，不适合范围区间判断

1.3.6.4. 4. 巢状分支结构

巢状分支结构就是在双项分支或者多项分支的真区间或者假区间再次使用分支结构，这类结构统称为巢状分支结构

案例

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*
        if(){
            if(){

            }else{
            }
        }

        if(){
            if(){}
        }else{
            if(){
            }lse{
            }
        }
        回家：
            小区门口
            楼道门口
            家门口
     */

    let DoorOne = true
    let DoorTwo = true
    let DoorThree = true

    console.log('电脑一关，底薪到手')
    console.log('说走就走，回家')
    if(DoorOne == true){
        console.log('小区门打开，麻利儿进来')
        console.log('走着走着，走到了楼道门口')
        if(DoorTwo == true){
            console.log('楼道们打开，赶紧进来')
            console.log('走啊走，走到了家门口')
            if(DoorThree == true){
                console.log('家门打开，回家吃饭')
            }else{
                console.log('喊我妈给我开门')
            }
        }else{
            console.log('拿手机刷卡开门')
        }
    }else{
        console.log('保安大爷，给开个门呗')
    }
</script>
</body>
</html>

作业用到的知识点

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" name="" id="one" value="">
<input type="submit" id="sub" value="计算">
<select name="" id="two">
    <option value="red">aaa</option>
    <option value="yellow">bbb</option>
</select>
<p id="res">请输入域运算的数</p>
<script>
    console.log(document.getElementById('one'));
    console.log(document.getElementById('one').value);

    //添加点击事件
    document.getElementById('sub').onclick = function () {
        //获取表单元素值
        let one = document.getElementById('one').value
        console.log(one)
        let two = document.getElementById('two').value
        console.log(two)
        //判断该值是否是NaN 如果是NaN返回true 不是返回false
        console.log(isNaN(parseFloat(one)));

        document.getElementById('res').innerHTML = one

        //改变背景颜色
        document.body.style.backgroundColor = 'yellow'
    }
</script>
</body>
</html>