javascript语法

1.JavaScript算数操作符

1.1加号减号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js算数运算符加号</title>
</head>
<body>
    <h2>1.递增</h2>
    <p>++a与a++都是对a进行递增的操作</p>
    <h2>区别:</h2>
    <p>++a先返回递增之后的a的值</p>
    <p>a++先返回a的原值,再返回递增之后的值</p>
    <h2>2.递减同理</h2>
    <p></p>
    <script>
        var num1 = 10,
            num2 = 5,
            // num3 = ++num1+num2,    //++num1    num1 = num1+1
            num4 = num1++-num2,
            x1 = 20,
            x2 = 30,
            x3 = --x1 + x2--;
        console.log(num1); //11
        // console.log(num3); //16
        console.log(num4);  //5
        console.log(x1);//19
        console.log(x2);//29
        console.log(x3);//49
    </script>

</body>
</html>

1.2比较操作符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>比较操作符</title>
</head>
<body>
    <h2>比较操作符</h2>
    <p>>、<>= 、<= 、== 、===、 != 、!===</p>
    <p>==:相等,只比较值是否相等 </p>
    <p>===:相等,比较值的同时比较数据类型是否相等</p>
    <p>!=:不相等,比较值是否不相等</p>
    <p>!===:不相等,比较值的同时比较数据类型是否不相等</p>
    <p>返回值:boolean型</p>
    <script>
        var x = 10,
            y = "10",
            m = 15,
            z = x == y,
            n = y !=m
        console.log(x==y);//比较值是否相等
        //true
        console.log(x===y)//比较数据类型也相等
        //false
        console.log(z) //true
        console.log(n)//true;
    </script>

</body>
</html>

1.3三元运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三元运算符</title>
</head>
<body>
    <h2>三元运算符</h2>
    <p>语法</p>
    <p>条件?执行代码1:执行代码2</p>
    <p>说明</p>
    <p>可代替简单的if语句</p>
    <p>如果条件成立,执行代码1,否则执行代码2</p>
    <script>
        var soce = 55;
        var result = (soce>60)?"及格":"不及格";
        console.log(result);
        //不及格
    </script>

</body>
</html>

1.4逻辑操作符

 (1)&&:与(只要有一个条件不成立,返回false)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>逻辑操作符</title>
</head>
<body>
    <h2>逻辑操作符</h2>
    <p>逻辑操作符:</p>
    <p>&&:与(只要有一个条件不成立,返回false)</p>

    <script>
        var num1 = 20,
            num2 = 30,
            num3 = 15,
            n=null,
            m;
        console.log(num1<num2 && num2>num3);
        //true
        console.log("hello" && 65 && "abc");//多个操作符前面都是true则返回最后一个
        //abc
        console.log(0 && 62);//如果第一个操作数隐式类型转换后为false,则返回第一个操作数
        console.log(n && num3);//操作数当中只要有一个是null打印出来就是null
        //null
        console.log(33*"abc" && 55);//操作数当中只要有一个是NaN打印出来就是NaN
        //NaN
        console.log(m && 55);//操作数当中只要有一个是undefined打印出来就是undefined
        //NaN
    </script>

</body>
</html>

 (2)||:或(只要有一个条件成立,返回true)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>逻辑操作符</title>
</head>
<body>
    <h2>逻辑操作符</h2>
    <p>逻辑操作符:</p>
    <p>||:或(只要有一个条件成立,返回true)</p>

    <script>
        var m;
        console.log(33<22 || 55<66);//true
        console.log("hello" || 0);//hello 如果第一个操作数隐式类型转换后为true,则返回第一个操作数;
        console.log(0 || "hello");//hello 如果第一个操作数隐式类型转换后为false,则返回第二个操作数;
        console.log("" || 88 || true);//88
        console.log(""||0||null);//null
        console.log(""||0||null||"hello");//hello
        console.log("" || m);//undefined;
        console.log(30*"abc"||55-"def");//NaN 如果两个操作数是NaN,则返回NaN
    </script>

</body>
</html>

(3)!非

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>逻辑操作符</title>
</head>
<body>
    <h2>逻辑操作符</h2>
    <p>逻辑操作符:</p>
    <p>!非</p>
    <p>说明:1.无论操作数是什么数据类型,逻辑非都会返回一个布尔值</p>

    <script>
        console.log(!false);//true;
        console.log(!88);//false;
        console.log(!0)//true
        console.log(!"red");//false;
        console.log(!NaN);//true
        console.log(!null);//true;
        //两个非!!
        console.log(!!"red");//true
        console.log(!!"");//false
    </script>

</body>
</html>

 

posted @ 2018-09-09 11:25  前端HL  阅读(119)  评论(0编辑  收藏  举报