JavaScript -- 总结 2 （小白）-CSDN博客

本文链接：https://blog.csdn.net/2301_78949452/article/details/140732728

算数运算符

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        var num1 = 10;
        var num2 = 20;
        console.log(num1 + num2); //30
        console.log(num1 - num2); //-10
        console.log(num1 * num2); //200
        console.log(num1 / num2); //0.5

        var str1 = "15";
        var str2 = "30";
        console.log(str1 + str2); // 1530
        console.log(str1 - str2); // -15
        console.log(str1 * str2); //450
        console.log(str1 / str2); //0.5

        console.log(str1 + num2); // 1520
        console.log(num2 + str1); // 2015
        // +  加法运算  拼接  因为 + 号两边有字符串，所以会出现拼接



        // 取余数  %   如果余数为0 表示可以被整除
        console.log(15 % 6); //3


        console.log((1 + 2 ) * 5 / (1 + 4) - 2); //1

        // 运算顺序
        // 1.先算括号里面的 
        // 2.再算乘除
        // 3.最后算加减

        console.log(0.5 + 0.5); //1
        console.log(0.1 + 0.2); //0.30000000000000004
    </script>
</body>

</html>

自增自减运算符

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        var num = 99;

        // num += 1;
        // num++;
        // ++num;
        // 表示 num 自增1

        // num--;
        // --num;
        // 表示 num 自减1

        // 符号 在前 和 在后 效果是不一样的
        // 符号如果在变量的后面表示 先将变量拿来使用 之后在自增
        console.log(num++ + 1); // 100

        // 符号 在前 和 在后 效果是不一样的
        // 符号如果在变量的前面表示 先将变量自增 然后在拿去使用
        console.log(++num + 1); // 102


        var a = 6;
        var b = 2;
        var c = a++ - --b + ++a - 5 - --b + a++;

        console.log("a的值是:" + a); // 9  
        console.log("b的值是:" + b); // 0  
        console.log("c的值是:" + c); // 16 

        var d = --a * b++ - c++ + a-- - b * --b + c-- * 2;


        console.log("a的值是:" + a); // 7 
        console.log("b的值是:" + b); // 0
        console.log("c的值是:" + c); // 16 
        console.log("d的值是:" + d); // 26
    </script>
</body>

</html>

逻辑运算符

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        // 逻辑运算符  
        
        // 与  和 且   &&
        // 两个条件只要有一个不满足 最终的结果就是不成立  只有所有都成立 最终的结果才是成立
        // 如果第一个条件 成立 那么会直接输出第二个条件   
        // 如果第一个条件不成立 那么就会直接输出第一个条件
        console.log(true && false); // false
        console.log(true && true); // true
        console.log(false && false); // false

        console.log(1 && 0); //0
        console.log(0 && ''); //0


        // 或  或者 ||
        // 两个条件只要有一个成立 最终的结果就是成立 如果都不成立 结果不成立
        // 如果第一个条件成立 就会直接输出第一个条件
        // 如果第一个条件不成立 就会直接输出第二个条件
        console.log(true || false); // true
        console.log(false || false); // false
        console.log(true || true); // true

        console.log(1 || 0); //1
        console.log(0 || ''); 


        // 非 不是  取反  !
        // 非只会对布尔值生效  非布尔值会先转换为布尔值再取反
        // 最终的结果一定是一个布尔值
        console.log(!3);
    </script>
</body>

</html>

关系运算符

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        var num1 = 15;
        var num2 = 9;
        console.log(num1 > num2); //true
        // 大于
        console.log(num1 < num2); //false
        // 小于
        console.log(num1 == num2); //false
        // 等于
        // 一个 = 表示 赋值    ==  表示等于

        console.log(num1 >= num2); //true
        // 大于等于
        console.log(num1 <= num2); //false
        // 小于等于
        console.log(num1 != num2); //true
        // 不等于

        // 关系运算符 最终输出的结果一定是一个布尔值  更像是一个判断条件

        console.log(1 == "1"); //true
        // 等于  会将等号两边的内容 隐式转换成相同的数据类型

        console.log(1 === "1");//false
        // 全等于 ===  两边的内容必须完全相同  类型也必须相同
        console.log(1 !== "1"); //true
        // 不全等于


        console.log(5 > 3 && 3 > 1); //true
    </script>
</body>

</html>

运算符优先级

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        console.log(4 >= 6 || '人' != '试试' && !(12 * 2 == 144) && true);
        4 >= 6 || '人' != '试试' && !false && true
        4 >= 6 || '人' != '试试' && true && true
        false  || '人' != '试试' && true && true
        // true
        // 1. ( )优先级最高
        // 2. 一元运算符  ++   --   !
        // 3. 算数运算符  先*  /  %   后 +   -
        // 4. 关系运算符  >   >=   <   <=
        // 5. 相等运算符   ==   !=    ===    !==
        // 6. 逻辑运算符 先&&   后||
        // 7. 赋值运算符
    </script>
</body>

</html>

if判断语句

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        if (5 > 3) {
            console.log("5大于3"); //5大于3
        }

        if (5 < 3) {
            console.log("5小于3");
        }
        // 如果(条件表达式) {
        //     代码块1
        // }
        // 如果 条件表达式的结果是true  那么就会执行代码块1
        // 如果条件表达式的结果是false  那么就不会执行代码块1 然后 直接结束if

        if (5 < 3) {
            console.log("5大于3");
        } else {
            console.log("5小于3"); //5小于3
        }
        // 如果(条件表达式) {
        //     代码块1
        // }否则{
        //     代码块2
        // }
        // 如果条件表达式的结果是true  那么就会执行代码块1
        // 如果条件表达式的结果是false  那么就会执行代码块2
    </script>
</body>

</html>

for循环语句

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        // for循环语句 可以重复执行代码
        for (var i = 0; i < 100; i++) {
            console.log("奥运会开始啦！");
        }

        // 从 100 开始  到 0 结束
        for (var i = 100; i > 0; i--) {
            console.log("奥运会开始啦！！");
        }
        // 循环(1.循环从几开始 2.循环到几结束 3.循环是怎么执行的) {
        //     4.代码块1
        // }
        // 1 => 2 => 4 => 3 => 2 => 4 => 3 => ....... => 2
        // 只要2 条件成立 for循环就会执行代码块

        // 累加器
        var sun = 0;
        for (var i = 1; i <= 10; i++) {
            sun = sun + i;  // 相当于sun += i;
        }
        console.log(sun); //55
    </script>
</body>

</html>