JavaScript day2

Follow_浩弟

已于 2023-08-14 17:56:35 修改

阅读量31

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2023-08-13 22:41:07 首次发布

本文链接：https://blog.csdn.net/Follow_haodi/article/details/132266689

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

算数运算符

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // + - * / %

        console.log(1 + "1"); //加号不具备隐式转换

        console.log("10" - "2"); //减号具备隐式转换

        console.log("10" * "2"); //乘号具备隐式转换

        console.log("10" / "2"); //除号具备隐式转换

        console.log("10" % "2"); //求余号具备隐式转换


        // 总结: 除加号外其余符合都具备隐式类型转换
    </script>
</body>

</html>

赋值运算符

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var num;
        // 给变量赋值
        num = 10;

        // 给变量重新赋值
        num = num + 1;
        console.log(num); // 11

        num += 1; // num = num + 1
        console.log(num);

        num *= 2; // num = num * 2
        console.log(num);

        num /= 6; // num = num / 6
        console.log(num);

        num %= 2; // num = num % 2;
        console.log(num);

        // 总结： 给变量赋值用等号（ = ）给变量重新赋值可以简写(变量名 += 重新赋的值)
    </script>
</body>

</html>

自增自减运算符

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 自增运算符 i++ ++i

        var num1 = 10;
        num1++; // num1 = num1 + 1;
        console.log(num1); // 11

        ++num1;
        console.log(num1); // 12

        // 在不参与运算的情况下， 他们都自增1
        // 在参与运算的情况下，++写在后面， 先参与运算， 然后加1
        // ++写在前面， 在参与运算前， i先加1， 然后再参与运算

        // ---------------------------------------------------------------------
        // 自减运算符 i-- --i

        var num2 = 10;
        num2--; // num2 = num2 - 1;
        console.log(num2); // 9
        --num2;
        console.log(num2); // 8

        // 在不参与运算的情况下， 他们都自减1
        // 在参与运算的情况下，--写在后面， 先参与运算， 然后减1
        // --写在前面， 在参与运算前， i先减1， 然后再参与运算
    </script>
</body>

</html>

逻辑运算符

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //逻辑与 &&
        console.log(false && true);
        console.log(true && false);

        //概念：
        //逻辑与操作符 左右两边的操作数 只要有一个操作数结果为假
        //那么整体结果就为假,并且 返回false的操作数


        console.log("123" && 100);
        //如果两个操作数都是true的话 则返回第二个操作数

        console.log(null && undefined);
        //如果第一个操作数结果是false 那么久返回第一个操作数

        // -----------------------------------------------------------------

        //逻辑或 ||
        console.log(true || false);
        console.log(false || true);

        // 概念
        // 逻辑或|| 左右两边的操作数 只要有一个结果为true 整体结果就为true
        // 并且返回 结果为true的操作数

        console.log(100 || undefined);
        // 如果第一个操作数为true 就直接返回第一个操作数

        console.log(null || undefined);
        // 如果第一个操作数为false 则去寻找第二个操作数 如果也是false 则
        // 返回第二个操作数

        // -----------------------------------------------------------------

        // 逻辑非!
            console.log(!true); //false 

        console.log(!''); //true

        console.log(!123); //false

        console.log(undefined && !undefined); //undefined

        console.log(undefined || !undefined); //true

        //逻辑非 ! 取反 把你的操作数隐式转换成布尔 并且取反
    </script>
</body>

</html>

关系运算符

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 关系运算符有： < > <= >= == === != !==

        console.log(3 < 2); //false
        console.log(3 > 2); //true

        console.log(10 <= 11); //true
        console.log(11 <= 11); //true

        console.log(11 >= 11); //true
        console.log(12 >= 11); //true

        // ------------------------------------------------------------

        //==  ===

        // ==
        // 比较两个操作数是否相等
        console.log(10 == 10);
        console.log(10 == '10'); //true
        console.log(undefined == undefined); //true
        console.log(null == null); //true
        // == 具有隐式类型转换
        // 会先将 左右两边的操作数 转换成同一种数据类型然后在进行比较



        // ===
        console.log(123 === 123); // true
        console.log(123 === '123'); // false
        console.log(undefined === undefined); // true
        console.log(null === null); //true
        // 不具备隐式类型转换 先比较数据类型 如果不相等结果就是false

        // ------------------------------------------------------------

        // !=
        // 不等
        console.log(11 != 11); //false
        console.log(11 != '11'); //false

        // ------------------------------------------------------------

        // !==
        // 不全等
        console.log(11 !== '11'); //true
    </script>
</body>

</html>

三元运算符

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 三元运算符

        // 语法糖
        // 表达式 ? 表达式结果为true执行的代码 : 表达式结果为false执行的代码
        // 用于作简单的业务逻辑判断
        // 好处： 简单， 易读， 易写
        // 不足： 不能作复杂的业务逻辑判断

        var game = prompt("请输入您玩的游戏");
        game == "英雄联盟" ? alert("玩的真六") : alert("真下饭");



        // 常用运算符优先级从高到底
        // 1.() 优先级最高
        // 2. 一元运算符++ --!
        // 3. 算数运算符 先 * /  %   后 +   -
        // 4. 关系运算符 > >= < <=
        // 5. 相等运算符 == != === !==
        // 6. 逻辑运算符 先 && 后 ||
        // 7. 赋值运算符
    </script>
</body>

</html>

流程控制语句

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 流程控制语句
        // if ...else

        // if (表达式) {
        //     当表达式成立执行
        //     代码块
        // } else {
        //     当表达式不成立执行
        //     代码块
        // }

        // if ...else 例子
        var num = prompt("请问你玩的什么游戏");
        if (num == "穿越火线") {
            document.write('那你很棒');
        } else if (num == "英雄联盟") {
            document.write("我也玩的很6");
        } else {
            document.write("你什么游戏都不玩，可真没意思")
        }

        // ---------------------------------------------------

        // switch
        // 执行顺序：
        // 1. 首先会判断第一个 `case`  后面的值是否与表达式的结果相等；
        // 2. 如果相等，就会执行 `case`  后面代码，当遇到 `break` 时，`switch` 语句停止执行；
        // 3. 如果不匹配，接着判断下一个 `case`  后面的值；
        // 4. 如果所有的 `case`  都不匹配， 程序会去执行 `default` 后面的代码；
        // 5. switch比较的值是===等关系。

        // switch (表达式) {
        // case 常量:
        // 代码1
        // break;
        // case 常量2:
        // 代码2
        // break;
        // case 常量3:
        // 代码3
        // break;
        // case 常量4:
        // 代码4
        // break;
        // }


        // switch 例子
        var str = prompt('你玩什么游戏')
        switch (str) {
            case "穿越火线":
                document.write('我也玩,我还有很多V');
                break;
            case "英雄联盟":
                document.write('你真懂我，我也玩，全英雄哦');
                break;
            case "王者荣耀":
                document.write('王者荣耀我不玩，我也荣耀。。。。其实是荣耀黄金哦');
                break;
            default:
                document.write('什么游戏你都不玩，你的童年可真无趣');
                break;
        }
    </script>
</body>

</html>

for循环

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // for循环

        // 1. 首先进行变量初始化（`var i = 0`）, 通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。；
        // 2. 判断条件表达式是否成立（`i <= 10`）;
        // 3. 如果条件成立，则执行循环体内的代码，执行完之后，执行 `i++`，让 `i` 自增 1 ，接着再次判断条件表达式是否成立，如此循环往复，直到条件表达式不成立为止；
        // 4. 如果条件不成立，则循环体内的代码不会执行，循环结束。
        // for (①var i = 0; ②i <= 10; ④i++) {
        //     代码块
        //     ③console.log(i);
        // }
        // ①初始化变量（计数器）
        // ②程序员编写表达式 判断成立否
        // ③如果成立则执行代码块
        // ④执行完代码块 让计数器自增 然后从②开始循环执行



        // break 结束当前语句， break后面的代码将不再被执行；
        // continue 结束当前一趟循环， 进入下一趟循环；

        // 案例
        // 逢七过：（ 只是简单的7的倍数过）
        for (var i = 1; i <= 100; i++) {
            if (i % 7 == 0) {
                console.log("过");
                continue;
            }
            console.log(i);
        }
    </script>
</body>

</html>

while语句

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        var i = 0;
        while (i <= 100) {
            // console.log(i);
            if (i % 2 == 0) {
                console.log(i);
            }
            i++;
        }
        // 判断表达式是否成立 执行大括号中的代码
        // 直接开始判断表达式
    </script>
</body>

</html>

do...while

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var i = 0;
        do {
            console.log(i);
            // 循环体
            // 代码块
            i++;
        } while (i <= 100)

        // do while在执行的时候会先执行一次do  
        // 然后在判断条件表达式是否成立

        // 1. 程序一开始，直接进入循环体内，执行一遍循环体内的代码；
        // 2. 判断条件表达式是否成立，如果条件成立，那么继续执行循环体内的代码；
        // 3. 如果条件表达式不成立，那么循环体内的代码就不再执行，循环结束；
    </script>
</body>

</html>

练习：金字塔和九九乘法表

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 金字塔
        // 分析金字塔组成： 由空格和星星\ * 组成的三角形。
        // 分析\ * 和空格的分布规律（ 假设最上面的一个星星作为金字塔的第一层）。

        // 每层星星前的空格 = 金字塔层数– 当前层数。 例如当前行数为第3层， 则空格数 = 5 - 3 = 2。
        // 每层中星星的数量 = 当前层数\ * 2 - 1。 例如当前为第4层， 则星星数 = 4 * 2 - 1 = 7。


        // 执行代码：
        //先让用户输入一个金字塔的层数
        var num = prompt("请输入一个数")
            //for循环金字塔的层数
        for (var i = 0; i < num; i++) {
            //for循环金字塔每层数需要+多少空格空格
            for (var k = 0; k < num - i; k++) {
                document.write("&emsp;&nbsp;")
            }
            //for循环每层星星的数量*2-1
            for (var j = 0; j < i * 2 - 1; j++) {
                document.write("⭐")
            }
            document.write("<br>")
        }



        // 乘法口诀
        // 假设最上面的一层作为第1层， 乘法运算的规律：① 被乘数的取值范围在“ 1~每行中的列数” 之间。 如表格第3行中被乘数的值在1~3 之间。② 乘数的值 = 表格的行数。 如表格第3行中乘数的值就为3。

        // 找规律， 假设最上面的一层作为第1层， 乘法运算的规律：① 被乘数的取值范围在“ 1~每行中的列数” 之间。 如表格第3行中被乘数的值在1~3 之间。② 乘数的值 = 表格的行数。 如表格第3行中乘数的值就为3。


        // 执行代码:

        document.write("<table  cellspacing=0>")
            //for循环每层的层数
        for (var i = 1; i < 10; i++) {
            document.write("<tr>")
                //for循环每层有多少个
            for (var j = 1; j <= i; j++) {
                console.log(j)
                document.write("<td>")
                    //利用+号拼接的性能进行拼接
                document.write(j + "*" + i + "=" + i * j)
                document.write("</td>")
            }
            document.write("</tr>")
        }
        document.write("</table>")
    </script>
</body>

</html>