美文网首页
12_JavaScript基础入门(2)

12_JavaScript基础入门(2)

作者: 王裕杰 | 来源:发表于2019-12-04 17:56 被阅读0次

    运算符

    运算符(Operators,也翻译为操作符),是发起运算的最简单形式。

    运算符的分类见仁见智,我们的课程对运算符进行如下分类:

    数学运算符(Arithmetic operators)
    比较运算符(Comparison operators)
    逻辑运算符(Logical operators)
    赋值运算符(Assignment operators)
    按位运算符(Bitwise operators)
    条件 (三元) 运算符(Conditional operator)

    1.数学运算符

    + - * / % ()

    • 这里面要知道%的意思,我们昨天已经算过很多了,不赘述。
    • 要知道计算顺序,先乘除求余,然后加减,我们昨天已经算过很多了,不赘述。
    • 隐式转换,所有带有字符串的运算都会尽可能的转为数字进行计算,加号比较特殊。

    数学运算符的正统,是numbernumber的数学运算,结果是number。出于面试的考虑,有一些奇奇怪怪的数学运算:

    数学运算中,只有纯字符串、布尔值、null能够帮你进行隐式转换

    //隐式转换:就是没有写parseInt()、parseFloat()自己帮你转格式
            
    console.log(3 * "8");   //24
    console.log("3" * "8"); //24
    console.log("48" / "2"); //24
    console.log("24" % 55); //24
    
    console.log(3 * null); //0   隐式转换的时候null将被转为0
    console.log(3 * false); //0  隐式转换的时候false将被转为0
    console.log(3 * true);  //3  隐式转换的时候true将被转为1
    
    

    不纯的字符串和undefined是不能帮你进行隐式转换的,结果都是NaN

    console.log(3 * "8天");  //NaN   数学运算中,不纯的字符串没法隐式转换
    console.log(3 * undefined); //NaN  数学运算中,undefined不能进行隐式转换
    

    加法比较特殊,因为+同时是加法和连字符的符号,所以加法在面对字符串的时候没有隐式转换

    //加法没有隐式转换
    console.log(3 + "8");           //38
    console.log(3 + undefined); //NaN   
    console.log(3 + null);      //3
    console.log(3 + false);     //3
    console.log(3 + true);      //4
    

    总结:
    无论哪种运算,只要出现了undefined参与运算,结果都是NaN。
    然后"4"、false、true、null都能进行隐式转换。
    加号比较特殊,面对"4"没有隐式转换的

    特殊数值的计算,就是NaN、Infinity参与的运算,我们看《高3》来学习。
    我们就举几个例子:

    Infinity + 1000   //Infinity
    Infinity - 1000  //Infinity
    Infinity / 1000 //Infinity 
    Infinity - Infinity //NaN
    Infinity /Infinity  //NaN
    Infinity * Infinity //Infinity
    0 / 0 //NaN
    6 / 0 //Infinity
    NaN / 8 //NaN
    

    2.关系运算符

    >     大于
    <     小于
    >=   大于等于
    <=   小于等于
    ==   等于
    !=    不等于
    === 全等于
    !==  不全等
    

    关系运算符的正统,numbernumber进行数学运算,得到的答案boolean

    console.log(8 > 5); //true
    console.log(7 < 4); //false
    

    关系运算的结果,是boolean类型的。

    true和false叫做布尔值。boolean类型,boolean类型只有两个值,就是true和false。表示真、假。

    == 我们叫做“相等判断”,它会帮你进行一个隐式转换,尽可能的得到true的答案:
    console.log(5 == "5"); //true
    ===我们叫做“全等判断”,不仅仅比较数值是否相等,还比较类型是否相等

    != 是==的反面,如果==运算是true,那么!=就是false
    !==是===的反面,如果===运算是true,那么!==就是false

    console.log(5 != "5");  //false ,脑子要反着想一下,5=="5"结果是t,所以就是f
    
    console.log(5 !== "5"); //true ,脑子要反着想一下,5==="5"结果是f,所以就是t
    

    正统的运算讲完了,number和number进行关系运算,结果是boolean。
    现在我们讲一丢丢不正统的关系运算,为了面试,划一下重点,更多的自己通过《高三》P50、P51、P52:
    stringstring 也能够进行关系运算,比较的就是字符编码顺序。

    字符编码顺序,就是数字、大写字母、小写字母

    "a" < "b" //true
    "A" < "B" //true
    "A" < "a" // true ,大写字母在字符集里面是在小写字母前面
    "1" < "A"  //true ,数字在字母前端
    "blank" < "blue"  //true   因为一位一位比,直到比出大小
    "25678" < "3"   //true  因为是string和string比,比的是字符编码顺序
    

    ② 与数字进行关系运算时,纯数字字符串被转为数字,null转换为0,true转换转为1, false转换为0,null不能进行和0的相等判定。

    null < 0.00001  //true
    null > -0.0001  //true
    null == 0  //false  具体原因,我们后面讲解Object的时候介绍
    false == 0  //true
    true == 1 //true
    

    ③ NaN不等于自己,不全等于自己

    NaN == NaN  //false
    NaN === NaN  //false
    NaN != NaN //true
    NaN !== NaN //true
    

    ④ string 和 number比,string会被隐式转换为number
    "25" < 3 //false

    需要注意的是,我们已经了解了一些不正统的运算,所以不要出洋相,不能连续使用关系运算符!!
    比如我们想验证3大于2,2大于1:
    表达式:
    3 > 2 > 1

    的值是多少?
    解:原式=(3>2) >1 = true > 1 = false (因为true会被当做1来与1进行比较)

    也就是说,不能连续使用关系运算符!!因为一旦连续使用了,实际上还是从左至右计算,所以就有上一步的boolean参与了下一步的运算。
    剧透一下,如果想要使用连续关系运算,1<2 && 2<3

    3.逻辑运算符

    逻辑运算符就三个:

    &&  逻辑与运算
    ||  逻辑或运算
    !   逻辑非运算
    

    正统来说,参与逻辑运算的是booleanboolean,得到的结果也是boolean
    值按照真值表来定。

    && 逻辑与,“且”

    `&&` 逻辑与,“且”

    “都真才真”,“有假就假”。
    命题1:“地球是圆的” 真的
    命题2:“宋仲基很帅” 真的
    命题1 且 命题2 真的

    命题1:“1+1=3” 假的
    命题2:“地球是方的” 假的
    命题1 且 命题2 假的

    //逻辑运算符
    console.log(true && true);      //t
    console.log(true && false);     //f
    console.log(false && true);     //f
    console.log(false && false);        //f
    
    || 逻辑或,“或者”的意思

    “有真就真”,“都假才假”

    命题1: 1 + 1 = 2
    命题2:“邵老师很帅”
    命题1 或者 命题2 总结果是真

    console.log(true || true);      //t
    console.log(true || false);     //t
    console.log(false || true);     //t
    console.log(false || false);    //f 
    

    !就是“逻辑非”,相反的

    console.log(!true);         //f
    console.log(!false);        //t
    console.log(!!!!!!!!!false);    //t
    

    运算顺序是非、与、或

    true || false && !true || false;
    解:原式 = true || false && false || false
     = true || false || false
     = true || false
     = true
    

    逻辑运算符最最有意思的事情,就是所谓的“短路语法”。
    就是你发现没有,

    如果计算一个且运算的时候,比如a && b,a如果就是一个false,那么就不会管b是什么,直接输出false就行了,等于说直接输出a。如果计算一个且运算的时候,比如 a && b ,a如果就是一个true,那么也不用管b是什么,直接把b当做结果输出就行了。

    也就是说,本质上计算机进行a&&b运算的时候,不是在进行逻辑分析,这小子就想着要么扔a,要么扔b。如果a是负性的,那么直接扔出a;如果a是正性的,直接扔出b。
    —— 短路语法。 要么a被短路,要么b被短路。

    负性的:false,null, 0, NaN, 空字符串(""),undefined
    正性的:除了上面的,全是正性的。

    false && 8   //false  因为计算机发现,且运算a已经是false了,直接输出false
    null && 8   //null  因为计算机发现,且运算a已经是false性的了,直接扔出来null
    true && 13   //13   因为计算机发现,且运算a是true,所以总结果就是看b,直接扔出b
    12 && 13    //13   因为计算机发现,12当做true,所以总结果看b,直接扔出b
    13 && 12    //12   因为计算机发现,13当做true,所以总结果看b,直接扔出b
    undefined && 哈哈  //undefined  不报错,因为a已经是负性的了,所以直接扔出a,哈哈不管
    哈哈 && undefined  //报错
    true && NaN    //NaN  扔后面
    

    || 逻辑或的短路也是类似的,a||b
    计算机发现a是真,那么扔a;如果a是假,那么扔b

    0 || 18   //18 前面假,扔后面
    18 || 0   //18 前面真,扔前面
    undefined || NaN    //NaN  前面假,扔后面
    NaN || undefined    //undefined 前面假,扔后面
    

    88 || 99 && 66 || 55
    解:原式 = 88 || 66 || 55
    = 88 || 55
    = 88

    undefined && ("3" != 3) || NaN && null
    解: 原式 = undefined && false || NaN && null
    = undefined || NaN && null
    = undefined || NaN
    = NaN

    总结一下短路语法:
    a&&b, 计算机要么执行a要么执行b。a真执行b,a假执行a;
    a||b, 计算机要么执行a要么执行b。a真执行a,a假执行b。

    千万不要背,从真值表中自己推倒。

    4.赋值运算符

    =   赋值
    +=  简便写法
    -=  简便写法
    *=  简便写法
    /=  简便写法
    %=  简便写法
    ++
    --
    

    赋值运算的参与者,一定是变量。

    var a = 1;
    a += 2;            //这行语句等价于a = a + 2;
    console.log(a);     //3
    
    var b = 6;
    b /= 3;   //等价于b = b / 3
    console.log(b);     //2
    
    var c = 100;
    c %= 10;        //等价于c = c % 10;
    console.log(c); //0
    
    var a = "我";
    a += "爱";
    a += "你";
    console.log(a);
    
    

    ++运算符:

    var e = 10;
    e++;            //等价于e=e+1
    console.log(e); //11
    
    

    ++可以与输出语句写在一起,++写在变量前和写在变量后不是一个意思。

    a++ : 先用a的原值,然后a加1;
    ++a :先给a加1,然后用a的新值

    var f = 10;
    console.log(f++);   //10 ,先引用原值,然后加1
    

    等价于:

    //等价于
    var f= 10;
    console.log(f);   //先输出f
    f++;              //然后f加1
    
    var g = 10;
    console.log(++g);    //11 , 这次是先加1,然后输出
    

    ++有花式玩儿法,仅面试有用:

    var a = 8;
    console.log(4 + a++);   //12  , 先使用原来的a的值,就是4+8,输出12.然后a加1
    console.log(a);     //9
    
    var i = 9;
    console.log(++i % 5);   //0  , 先把i加1,然后使用i,10%5=0
    console.log(i);     //10
    

    运算符的计算顺序:
    ++ -- !贴身的 →→→ 数学 →→→ 比较 →→→ 逻辑 →→→ 赋值

    var a = 3 < 6 && 7 < 14;    //true
    原式 = true && true
         = true
    
    var a = 1 + 2 < 3 + 3 && 3 + 4 < 2 * 7; 
    原式 = 3 < 6 && 7 < 14
         = 上一题 
         = true
    
    var a = false + true && 13;
    原式 = 0 + 1 && 13
         = 1 && 13
         = 13
    
    var a = 15;
    false + a++ + true > 8 && 13 || 6
    原式 = false + 15 + true > 8 && 13 || 6
         = 16 > 8 && 13 || 6
         = true && 13 || 6
         = 13 || 6
         = 13
    

    条件分支语句

    1.if语句

    如果……否则…… , 让程序出现分支

    <script type="text/javascript">
        var a = 8;
        if(a >= 60){
            alert("及格了");
        }else{
            alert("不及格");
        }
    </script>
    

    语法:

    if(测试表达式){
        测试表达式为真执行的语句
    }else{
        测试表达式为假执行的语句5   }
    

    if英语里面的如果的意思,else就是否则的意思。else不要拼写为eles。

    在语法层面有两个特例:
    ① 可以没有else部分

    var a = 1;
    if(a >= 60){
        alert("及格了");4  }
    

    ② 如果要执行的语句,只有一行语句,那么就是单行if,就可以省略大括号。

    var a = 112;
    if(a >= 60) 
        alert("及格了");
    else
        alert("不及格");
    

    注意if语句是一个结构体,注意哪些语句是在结构体中,哪些语句不是结构体:

    var a = 355;
    if(a > 30){
        console.log("哈哈");
        console.log("嘻嘻");
        console.log("呵呵");
    }else{
        console.log("纳尼");
        console.log("呸呸")
    }
    console.log("么么哒");  /*一定会执行,在if结构体外面*/
    

    小练习:用户输入一个年龄,判断用户能不能考取驾照。交规说: 大于等于18,小于等于70才能考取驾照。

    //让用户输入年龄
    var age = parseInt(prompt("请输入年龄"));
    //判断
    if(age >= 18 && age <= 70){
        alert("可以考取驾照");
    }else{
        alert("年龄不符合要求");
    }
    alert("谢谢惠顾");
    

    多分支的if
    if……else if …… else if…… else if…… else ……

    如果……否则如果……否则如果……否则如果……否则……

    跳楼现象,用户会选择一个分支执行(跳楼),选择这个分支了,就暗含了上一个分支没有满足:

    var score = 76;
    
    if(score >= 85){
        alert("优秀");   //不满足条件,所以不执行,走楼梯下楼
    }else if(score >= 70){
        alert("良好");   //走到这个楼层的,一定暗含小于85。这一楼层满足,跳楼了
    }else if(score >= 60){
        alert("及格");  //不执行
    }else{
        alert("不及格")  //不执行
    }
    

    语法:

    if(测试表达式1){
        测试表达式1为真的时候做的事情
    }else if(测试表达式2){
        测试表达式1为假,且测试表达式2为真的时候做的事情
    }else if(测试表达式3){
        测试表达式1为假,测试表达式2为假,且测试表达式3为真的时候做的事情
    }
    ……
    

    if语句的嵌套:
    用户先输入自己的性别,比如男、女。然后输入自己的年龄。判断能否结婚。
    男的22以上
    女的20以上

    if语句可以嵌套,如果里面再套一层如果:

    //判断
    if(sex == "男"){
        //男
        if(age >= 22){
            alert("男同志你好,可以结婚");
        }else{
            alert("你还是个小正太,不能结婚!");
        }
    }else{
        //女
        if(age >= 20){
            alert("女同志你好,可以结婚");
        }else{
            alert("你还是个小萝莉,不能结婚!");
        }
    }
    

    楼层中else只能有一个。 else if可以有多个。

    相关文章

      网友评论

          本文标题:12_JavaScript基础入门(2)

          本文链接:https://www.haomeiwen.com/subject/ufilgctx.html