美文网首页
04.JavaScript逻辑运算

04.JavaScript逻辑运算

作者: Lv_0 | 来源:发表于2017-11-08 19:52 被阅读0次
    • 计算运算符

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>运算符</title>
            <script>
                var num1 = 1;//赋值运算符,将右边的值赋给左边变量,则变量拥有值
                var num2 = num1 + 1;//加法运算
                /*
                 * 常用算数运算符
                 * + : 加 例:1+2=3
                 * - : 减 例:2-1=1
                 * * : 乘 例:2*3=6
                 * / : 除 例:6/2=3
                 * % : 求余 例:5%2=1;
                 * ++ : 自增 例:a++等于a+1;++a
                 * -- : 自减 例:a--等于a-1;--a
                 * a++与++a的区别:前者先运算后+1;后者先+1后运算
                 * 
                 * 常用赋值运算符
                 * += : a+=b等同a=a+b;
                 * -= *= /= %=类同
                 */
                var str1 = "Hello";//"Hello"与"Hello "为不同字符串
                var str2 = "World";//"World"与" World"为不同字符串
                var str3 = str1+" "+str2;//字符串的相加为字符串的拼接
                var str4 = str1 + num2;//字符串与数字的相加,结果为字符串,相当于把数字转换为字符串
            </script>
        </head>
        <body>
            <h2>结果查看</h2>
            <p>
                <script>
                    document.write("num1 = "+num1+"<br />"+"num2 = "+num2+"<br />");
                    document.write("str3 = "+str3+"<br />"+"str4 = "+str4);
                </script>
            </p>
        </body>
    </html> 
    
    运行结果

    • 比较运算符

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>运算符</title>
        </head>
        <body>
            <h1>结果:</h1>
            <script>
                /*
                 * 比较运算符,返回布尔值True或者false,比较结果正确True,反正false
                 * == : 比较数值相等
                 * === : 全等(数值和类型)
                 * != : 不等于
                 * > : 大于
                 * < : 小于
                 * >= : 大于等于
                 * <= : 小于等于
                 */
                var num1 = 7;//赋值运算
                
                if(num1 == 7){//比较变量值和数值
                    document.write("True");//比较结果,正确是返回
                }else{
                    document.write("False");//比较结果错误是返回
                }
                
                document.write("<br />");
                
                if(num1 === "7"){//数值和类型均符合才为真
                    document.write("True");
                }else{
                    document.write("False");
                }
                
                /*
                 * 逻辑运算符,返回True或false True:1 false:0
                 * || : 或(一1则1)
                 * && : 与(一0则0)
                 * ! : 非(!1则0,!0则1)
                 */
                document.write("<br />"+"逻辑与结果:"+(true||false));
                document.write("<br />"+"逻辑或结果:"+(true&&false));
                document.write("<br />"+"逻辑非结果:"+(!0));
                
                /*
                 * 条件运算符
                 * boole?aa:bb 如果ture则aa否则bb
                 */
                document.write("<br />"+"条件运算结果:"+(1>2 ? true : false));
                
                /*
                 * 
                 */
            </script>
        </body>
    </html>
    
    运行结果

    • Boolean对象

    1. Boolean对象可以检查对象的逻辑结果(true/false)
    2. Boolean对象可以将非逻辑值转换为逻辑值
    3. 只有对象 无初始值,0,-0,null,"",false,undefined,NaN 返回false,其他返回true
    4. 注意:字符串'0',"false"值是true,只有空字符串为false.
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style type="text/css">
                .code{
                    color: gray;
                    border: 1px solid gainsboro;
                    font-size: 15px;
                }
                pre{
                    margin: 1em 0em 1em -19em;
                    font-family: "楷体";
                }
                .result{
                    color: gray;
                    background-color: ghostwhite;
                    font-size: 16px;
                    padding: 0.5em 1em;
                }
                h3{
                    color: red;
                }
                .result span:first-child{
                    display: block;
                    float: left;
                    width: 10em;
                    color: black;
                }
            </style>
            <script type="text/javascript">
                function objDisplay(eleId,obj){
                    if(typeof(eleId)!="string" || typeof(obj)!="object"){
                        alert("Function objDisplay() need the first parameter string and second object !")
                    }else{
                        var ele = document.getElementById(eleId);
                    
                        if(!ele || !obj){
                            alert("Please check the parameter !")
                        }else{
                            for(i in obj){
                                var div = document.createElement("div");
                                
                                for(var j=0;j<2;j++){
                                    var span = document.createElement("span");
                                    if(j==0) span.innerHTML = i+" : ";
                                    else span.innerHTML = obj[i];
                                    div.appendChild(span);
                                }
                            ele.appendChild(div);
                            }
                        }
                    }               
                }
            </script>
        </head>
        <body>
            <ul>
                <li>
                    <h3>Boolean对象</h3>
                    <h4>代码:</h4>
                    <div class="code">
                        <pre>
                        //新建boolean对象
                        var booEty = new Boolean();
                        //布尔值
                        var booDict={
                            "Boolean()":new Boolean(),
                            "Boolean(0)":new Boolean(0),
                            "Boolean(-0)":new Boolean(-0),
                            "Boolean(null)":new Boolean(null),
                            "Boolean('')":new Boolean(''),
                            "Boolean(false)":new Boolean(false),
                            "Boolean(undefined)":new Boolean(undefined),
                            "Boolean(NaN)":new Boolean(NaN),
                            "Boolean('0')":new Boolean('0'),
                            "Boolean(1)":new Boolean(1),
                            "Boolean('false')":new Boolean('false')
                        }
                        
                        objDisplay("dict01",booDict);
                        </pre>
                    </div>              
                    <h4>结果:</h4>
                    <div id="dict01" class="result"></div>
                    <hr />
                    <script>
                        //新建boolean对象
                        var booEty = new Boolean();
                        //布尔值
                        var booDict={
                            "Boolean()":new Boolean(),
                            "Boolean(0)":new Boolean(0),
                            "Boolean(-0)":new Boolean(-0),
                            "Boolean(null)":new Boolean(null),
                            "Boolean('')":new Boolean(''),
                            "Boolean(false)":new Boolean(false),
                            "Boolean(undefined)":new Boolean(undefined),
                            "Boolean(NaN)":new Boolean(NaN),
                            "Boolean('0')":new Boolean('0'),
                            "Boolean(1)":new Boolean(1),
                            "Boolean('false')":new Boolean('false')
                        }
                        
                        objDisplay("dict01",booDict);
                    </script>
                </li>               
            </ul>       
        </body>
    </html>
    
    image.png

    相关文章

      网友评论

          本文标题:04.JavaScript逻辑运算

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