JS基本语法03

一、表达式和返回值

    <script>
        // 表达式：由数字、运算符、变量等组成的式子
        // 1+1=2
        var num;
        num=1+1;//表达式
        // num是返回值
        console.log(num);
    </script>

二、运算符

    <script>
        // 运算符：也叫操作符，主要是实现赋值、算术运算等功能
            // typeof 也是运算符
            // + - * / %
            // +加法运算符
            // 只要是跟字符串相加的都会转成字符串(相互拼接)
            // 数字跟NaN相加的都是NaN，字符串跟NaN相加都是拼接
            // console.log(1+1);//2
            // console.log(1+'1');//11
            // console.log('1'+true);//1true
            // console.log(1+true);//2
            // console.log(1+'true');//1true
            // console.log(1+NaN);//NaN
            // console.log('1'+NaN);//1NaN

            // -减法运算符
            // 减法运算符会把字符串中的数字转化为数值型，非数值型的字符串就会是NaN
            // console.log(1-1);//0
            // console.log(1-'1');//0
            // console.log(1-true);//0
            // console.log(1-'true');//NaN
            // console.log('1'-true);//0
            // console.log(1-NaN);//NaN
            // console.log('1'-NaN);//NaN

            // 乘法运算符也会把字符串的数字转化为数值型
            // 数值乘非数值型的字符串返回的是NaN
            // 小数也可以相乘,结果不加浮点数
            console.log(1*1);//1
            console.log(1*'1');//1
            console.log(1*true);//1
            console.log(1*'true');//NaN
            console.log('1'*true);//1
            console.log(1*NaN);//NaN
            console.log('1'*NaN);//NaN
            console.log(10.0*2.5);//25
            console.log(10*2.0);//20

            // 除法运算符也会把字符串的数字转化为数值型
            // 数值除非数字型的字符串返回的是NaN
            // 会保留小数，不会四舍五入
            // 小数也可以相除,结果不加浮点数
            console.log(1/1);//1
            console.log(1/'1');//1
            console.log(1/true);//1
            console.log(1/'true');//NaN
            console.log('1'/true);//1
            console.log(1/NaN);//NaN
            console.log('1'/NaN);//NaN
            console.log(10/2.5);//4
            console.log(10.0/2.0);//5

            // % 取余运算符
            console.log(4%2);//0
            console.log(3%2);//1
            console.log(9%2);//1
            console.log(19%2);//1

            var str = '白日依山尽，黄河入海流';
            console.log(str);
            var str1 = '白日依山尽，\n'
            +'黄河入海流';
            console.log(str1);

            // 浮点数 小数
            // 浮点数精确度 浮点值最高精确度17位小数，在算术运算中浮点数之间的运算精确度没有整数高
            console.log(1 + 1);//2
            console.log(1 + 2);//3
            console.log(0.1 + 0.2);//0.30000000000000004
            console.log(0.1 * 0.2);//0.020000000000000004
    </script>

三、递增运算符

    <script>
        // 递增运算符：反复给数字变量增加相同的值，例如增加1
         var num=1;
         console.log(num+1);//2

        //  前置递增 简写 ++变量名 先自加1再进行其他运算
        var num=3;
        console.log(++num);//4
        console.log(++num+2);//7

        // 后置递增 变量名++ 先运算在自加
        var num=3;
        console.log(num++);//3
        //num=num+1
        console.log(num);//4
    </script>

四、递减运算符

    <script>
        // 递减运算符：分为前置递减(--num) 后置递减(num--) 前置的优先级高于后置
        //             前置和后置都是立马给变量减1
        //             前置递减(--num)是递减后的新值
        //             后置递减(num--)是原来的值
          var num = 10;
          console.log(num-- + --num);//18 
          console.log(num); //8        
    </script>

五、比较运算符

    <script>
        // 比较运算符：两个值之间的比较所使用的运算符，会返回一个布尔值(true/false)
        console.log(1>2);//false
        console.log(2<3);//true
        console.log(2>=3);//false
        console.log(1==2);//false
        // ==是指值相等就会返回true,把字符串里面的数字转化为数字作比较
        console.log(18=='18')//true
        // ===是值相等的同时数据类型也必须相等(全等于)
        console.log(18==='18')//false
        console.log(12=='nihao')//false
        console.log('hello'=='nihao');//false
        console.log('hello'==='nihao');//false
        console.log('181'==='18');//false
        var h=20;
        var i= h++ + ++h;
        console.log(i);//42
    </script>

六、逻辑运算符

    <script>
        // 逻辑运算符：就是用来进行布尔运算的运算符，返回值也是布尔值，开发中常用
            // 逻辑与 && 其实就是and
                // 特点：两边必须都是true才会返回true，否则返回false
                console.log(2>3&&3<4);//false
                console.log(5<6&&7<8);//true
                console.log(5>6&&7>8);//flase

            // 逻辑或 || or
                // 特点：两边只要有一个true就会返回true，两边都是false时才会返回false
                console.log(2>3||3<4);//true
                console.log(5<6||7<8);//true
                console.log(5>6||7>8);//false

            // 逻辑非 ！ not
                // 特点：也叫取反，用来取一个布尔值的相反值，例如 true的相反值时false
                var flag = true;
                console.log(!true);//false
                var flags = !flags;
                console.log(flags);//true
                console.log(!flags);//false
    </script>

七、短路运算

        // 短路运算：当有多个表达式时，左边的表达式的值可以确定结果时，就不再继续运算右边的表达式
            // 逻辑与 &&
                // 语法：表达式1&&表达式2
                // 特点：如果第一个表达式的值为真时，就返回第二个表达式
                        // 如果第一个表达式为假时，就会返回第一个表达式
                        // 数字里0代表假 除0以为都是真
                        console.log(1 && 2);//2
                        console.log(0 && 2);//0
                        console.log(12 && 23 && 34);//34

            // 逻辑或 ||
                // 语法：表达式1||表达式2
                // 特点：如果第一个表达式为真时，则返回第一个表达式
                        // 如果第一个表达式为假时，就会返回第二个表达式
                        console.log(123||456);//123
                        console.log(0||234);//234
                        console.log(123||0||456||234);//123
    </script>

八、(逻辑)运算符优先级：！>&&>||

    <script>
        // JS中和数学中一样，运算符也具有优先级
            // 逻辑与比逻辑或优先级高，从左到右运算，想要改变计算结果需要加括号
            // 数学中 加减乘除
            console.log(11&&22||33);//22
            console.log(11||22&&33);//11
            console.log(0&&22||33);//33
            console.log(4<6 || '1'!=1 && true)//true

            var num = 10;
            console.log(5 == num / 2 && (2+2*num).toString()==='22')//true

            var a=3>5 && a<7 && 3==4;
            console.log(a);//false
            var b= 3<=4 || 3>1 ||3!=2;
            console.log(b);//true
            var c = 2==='2';
            console.log(c);//false

            var d=!c||b&&a;
            console.log(d);//true
    </script>

九、相等运算符

    <script>
        // == 只要值相等就返回true 否则返回false 底层：就是把两个数据类型自动转换成同一种数据类型
        // 其实undefined是null衍生而来的
        console.log(undefined==null);//true
        // === 必须值和数据类型一致的情况下才会返回true，不会进行数据类型的转换
        // != 不等于 两个值会自动转换成同一种值
        console.log(5!=4);//true
        console.log('5'!=4);//true
        console.log('4'!=4);//false
        console.log('abc'!='xyz');//true
        // !== 完全不相等 不会进行数据类型的转换
        console.log(5!==4);//true
        console.log('5'!==4);//true
        console.log('4'!==4);//true
        console.log('abc'!=='xyz');//true
    </script>

十、一元运算符

    <script>
        //  一元运算符：就是一个值的运算 
        // 特点：+-会自动把值转换成数值型的 
        var num='2';
        var num1 = 'fdd';
        console.log(+num);//2
        console.log(-num);//-2
        console.log(num1);//fdd
        console.log(-num1);//NaN
        console.log(+true);//1
    </script>

十一、赋值运算符

    <script>
        // 赋值运算符
        // 加法运算符
        var age = 18;
        age = age+1;
        console.log(age);//19
        console.log(age += 1);//20
        // 减法运算符
        // age = age-1;
        console.log(age -= 1);//19
        // 除法运算符
        // age = age/2;
        console.log(age /= 2);//9.5
        // 乘法运算符
        // age = age*2;
        console.log(age *= 2);//19
        //取余取余运算符
        // age = age % 2;
        console.log(age %= 2);//1
    </script>

十二、三元表达式

    <script>
        // 三元表达式：三个表达式 语法：表达式1？表达式2：表达式3
            // 如果表达式1为真的话，会返回表达式2，如果表达式1为假的话，会返回表达式3

        console.log(3>4?1:2);//2
        var num = '';//空字符串就是假
        console.log(num?num:'2')//2
        console.log(4>3?4>5?2:3:2)//3
        var str = '1';
        console.log(str == 1?'已支付':'未支付');//已支付
        var flag = true;
        console.log(true?'0':'1');//0

        // 三元表达式的场景：
            // 1.列表里需要展示类似于已支付未支付等这些字眼时，后端返回的是0 1 2数字时，需要用三元表达式判断然后转化成文字展示在页面上
            // str == 1?'已支付':'未支付'
            // 2.不是必须输入的input（也可以输入内容），传给后端时，值为空，需要给一个默认值时，就需要用到三元表达式，如果用户填了内容那就传给后端用户填的，如果没填就给一个默认值
            // num?num:'2'
    </script>

十三、if分支语句

    <script>
        // {} 可以实现一段代码块
        // {
        //     console.log(111);
        //     console.log(222);
        // }
        // if语句 做判断 if(表达式) 只有表达式里为真的时候 才会进行下去
            // if如果后面只有一段代码时，{}可以不用写，但不规范，如果没有{}那它只对紧挨着他的代码有效果

        if (1) console.log(111);//111
         console.log(222);//222

        if(true) {
            console.log(333);//333
            console.log(444);//444
        }

        // if else
/*         语法：if(表达式){

        }else{
            
        } */
        var num=2;
        if(num>0){
            console.log('我比0大');
        }else {
            console.log('你个垃圾，都没0大');
        }

        // if  else if  else
/*         语法：if(表达式){

        }else if(表达式){

        }else{

        } */
        var num1=29;
        if(num1>=90){
            console.log('宝贝，你真棒');
        }
        else if(num1>=60&&num1<90){
            console.log('宝贝，还不错哦');
        }
        else if(num1<60&&num1>=30){
            console.log('你个垃圾，都不及格');
        }
        else{
            console.log('回家种田去吧');
        }
    </script>

十四、switch分支语句

    <script>
/*         switch 分支语句 场景：是在固定的数值使用判断，匹配相同的选项(case)进行执行
            语法：switch(表达式){ //表达式为真时执行
                case value1:
                    表达式 匹配成功时执行的
                case value1:
                    表达式 匹配成功时执行的
                case value1:
                    表达式 匹配成功时执行的
            } */
            // 如果没有break时，匹配成功的表达式会执行，并且也会执行下面全部的表达式
                // break就是终止执行，跳出switch
                var num=3;
                switch(num){
                    case 1:console.log('我是1');
                    break;
                    case 2:console.log('我是2'); 
                    break;
                    case 3:console.log('我是3');
                    break;
                    case 4:console.log('我是4'); 
                    break;
                    default:console.log('没有选项啦');
                }
                var a = 10, b = 20, c = 30;
                var result = !a || b && c;
                console.log(result);//30
    </script>