JavaScript运算符(操作符)

01-算数运算符

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>算术运算符title>
    <script>
        console.log(1 + 1); //2
        console.log(1 - 1); //0
        console.log(1 * 1); //1
        console.log(1 / 1); //1
        console.log(4 % 2); //0 取余(取模)
        console.log(5 % 3); //2
        console.log(3 % 5); //3
        // 2. 浮点数 算术运算会有问题
        console.log(0.1 + 0.2); //显示0.30000000000000004
        console.log(0.07 * 100); //7.000000000000001
        // 不能拿浮点数来进行相比较 是否相等
        var num = 0.1 + 0.2;
        console.log(num == 0.3); //false  双等号用于判断两者是否相等
    script>
head>

<body>

body>

html>

02-表达式和返回值

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表达式和返回值title>
    <script>
        //表达式是由数字、运算符、变量等组成的式子z
        // 表达式最终都有一个结果,返回给我们,称之为返回值
        console.log(1 + 1) //2 就是返回值;
            // 1+1=2
            // 在我们程序里面 2=1+1 把我们的右边表达式计算完毕把返回值给左边
        var num = 1 + 1;
    script>
head>

<body>

body>

html>

03-前置递增运算符

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前置递增运算符title>
    <script>
        // 1.想要一个变量自己加1  num = num + 1比较麻烦
        var num = 1;
        num = num + 1; //++num
        num = num + 1;
        console.log(num); //3
        // 2.前置递增运算符 ++写在变量前面
        var age = 10;
        ++age; //类似于age=age+1
        console.log(age);
        // 3.先加1 后返回值
        var p = 10;
        console.log(++p + 10); //21
    script>
head>

<body>

body>

html>

04-后置递增运算符

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后置递增运算符title>
    <script>
        var num = 10;
        num++; // num=num+1
        console.log(num);
        // 1.前置自增和后置自增如果单独使用, 效果是一样的
        // 2.后置自增 口诀:先返回原值,后自加1
        var age = 10;
        console.log(age++ + 10); //20 (先返回原值10,加10)
        console.log(age); //11 (自加1)
    script>
head>

<body>

body>

html>

05-递增运算符练习

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>递增运算符练习title>
    <script>
        var a = 10;
        ++a; //11 a=11
        var b = ++a + 2; //a=12 ++a=12
        console.log(b); //14


        var c = 10;
        c++; //11 c=11
        var d = c++ + 2; //c++=11 c=12(c自加1变成了12)
        console.log(d); //13

        var e = 10;
        var f = e++ + ++e; //10+11 e++=10 e=11(e自加1) ++e=12
        console.log(f); //22
        // 后置自增 先表达式返回原值 后面变量再自加1
    script>
head>

<body>

body>

html>

06-比较运算符

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>比较运算符title>
    <script>
        console.log(3 >= 5); //false
        console.log(2 <= 4); //true
        // 1.我们程序里的等于符号是 == 默认转换数据类型:会把字符串型的数据转换为数字型 只要求值相等就可以
        console.log(3 == 5); //false
        console.log('pink老师' == '刘德华'); //false
        console.log(18 == 18); //true
        console.log(18 = '18'); //true
        console.log(18 != 18); //false !=不等号
        // 2.我们程序里有全等 一模一样 要求两侧的值还有数据类型完全一致才可以
        console.log(18 === 18); //true
        console.log(18 === '18'); //false
    script>
head>

<body>

body>

html>

07-逻辑运算符

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>逻辑运算符title>
    <script>
        // 1.逻辑与 && and 两侧都为true 结果才是true 只要有一侧为false 结果就为false
        console.log(3 > 5 && 3 > 2); //false
        console.log(3 < 5 && 3 > 2); //true
        // 2.逻辑或 || or 两侧都为false 结果才是false 只要有一侧为true 结果就为true
        console.log(3 > 5 || 3 > 2); //true
        console.log(3 > 5 || 3 < 2); //false
        // 3.逻辑非 ! not
        console.log(!true); //false
        console.log(!false); //true
    script>
head>

<body>

body>

html>

08-逻辑运算符练习

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>逻辑运算符练习title>
    <script>
        var num = 7;
        var str = '我爱你~中国~';
        console.log(num > 5 && str.length >= num); //true
        console.log(num < 5 && str.length >= num); //false
        console.log(!(num < 10)); //false
        console.log(!(num < 10 || str.length == num)); //false
    script>
head>

<body>

body>

html>

09-逻辑中断(短路运算)

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>逻辑中断(短路运算)title>
    <script>
        // 1.用我们的布尔值参与的逻辑运算 true && false ==false
        // 2.123 && 456是值或者是表达式 参与逻辑运算?
        // 3.逻辑与短路运算 如果表达式1结果为真,则返回表达式2    
        // (除了0其他数字都是真,0为假)
        console.log(123 && 456); //456
        // 如果表达式1结果为假,则返回表达式1
        console.log(0 && 456); //0
        console.log('' && 1 + 2 && 456 * 56789); //'' 显示空的字符串
        // 如果有空的或者否定的为假,其余的是真的 0 '' null undefined NaN
        // 4.逻辑或短路运算 如果表达式1结果为真,则返回表达式1 如果表达式1结果为假,则返回表达式2
        console.log(123 || 456); //123
        console.log(123 || 456 || 456 + 123); //123
        console.log(0 || 456 || 456 + 123); //456
        // 逻辑中端很重要,它会影响我们程序运行的结果
        var num = 0;
        console.log(123 || num++); //123
        console.log(num); //0
    script>

    <body>

    body>

html>

10-赋值运算符

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        var num = 10;
        // num = num+1; num++
        // num = num + 2; // num +=2;
        // num += 2;相当于num=num+2
        num += 5; //相当于num=num+5
        console.log(num); //15
        var age = 2;
        age *= 3; //相当于age=age*3
        console.log(age); //6
    script>
head>

<body>

body>

html>

11-运算符优先级

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运算符优先级title>
    <script>
        // ++num !num -- 一个操作数称为一元运算符   2+3有两个操作数,二元运算符
        console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true) //true
        var num = 10;
        console.log(5 == num / 2 && (2 + 2 * num).toString() === '22'); //true
    script>
head>

<body>

body>

html>

你可能感兴趣的:(JavaScript,javascript,前端,vue.js)