Day02-JavaScript

前端拓海

已于 2023-12-02 14:56:58 修改

阅读量146

点赞数 5

文章标签： javascript 前端 html

于 2023-10-26 20:22:35 首次发布

本文链接：https://blog.csdn.net/Spirs/article/details/134062899

版权

一.数据类型的转换

1.强制转换：编程人员编写代码强制对数据进行转换

<script>
        //转换Boolean();
        var obj = {
            name: "小谷"
        }
        var obj2 = {}

        // 哪些值会被转换成true
        console.log(Boolean('123')); //true
        console.log(Boolean(100)); //true
        console.log(Boolean(true)); //true
        console.log(Boolean(obj)); //true
        console.log(Boolean(-10)); //true
        console.log(Boolean(obj2)); //true

        // 哪些值会被转换成false
        console.log(Boolean('')); //false
        console.log(Boolean(undefined)); //false
        console.log(Boolean(null)); //false
        console.log(Boolean(0)); //false
        console.log(Boolean(false)); //false
</script>

<script>
        var obj = {
                name: "小谷"
            }

        // 其他数据类型转换成number
        // Number();
        // NAN 表示不是一个有效数字 但和number有关
        // 思考 typeof NAN 返回什么？

        console.log(Number('478'));
        console.log(Number('478.8'));
        console.log(Number('-478.8'));
        console.log(Number('0'));
        console.log(Number(false));
        console.log(Number(ture));
        console.log(Number('123abc')); //NAN
        console.log(Number('null')); //0
        console.log(Number('undefined')); //NAN
        console.log(Number(obj)); //NAN

        // 使用parseInt() 将其他数据类型转换成number
        // 且不会保留小数
        console.log("parseInt-----------------------")
        console.log(parseInt('67'));
        console.log(parseInt('67.9'));
        console.log(parseInt('-67.9'));
        console.log(parseInt('123abc')); //123
        console.log(parseInt('abc123')); //NaN
        console.log(parseInt(false)); //NaN
        console.log(parseInt(undefined)); //NaN
        console.log(parseInt(null)); //NaN
        console.log(parseInt(obj)); //NaN

        // 使用psrseFloat() 将其他数据类型转换成number
        // 且会保留小数
        console.log("parseFloat-----------------------")
        console.log(parseFloat('67'));
        console.log(parseFloat('67.9'));
        console.log(parseFloat('-67.9'));
        console.log(parseFloat('123abc')); //123
        console.log(parseFloat('abc123')); //NaN
        console.log(parseFloat(false)); //NaN
        console.log(parseFloat(undefined)); //NaN
        console.log(parseFloat(null)); //NaN
        console.log(parseFloat(obj)); //NaN
</script>

 <script>
        // 其他数据类型转换成string

        console.log(String(123));
        console.log(String(true));
        console.log(String(null));
        console.log(String(undefined));
        console.log("{ name: '小谷' }");
        console.log(String({
            name: '小谷'
        }));

        // 使用.toString() 将其他数据类型转换成string
        var num = 100;
        var boo = true;
        console.log(num.toString());
        console.log(boo.toString());

        // 如果.toString 方法进行传递参数的话 需要传递进制数
        var num2 = 12;
        console.log(num2.toString(2));
        console.log(num2.toString(8));
        console.log(num2.toString(16));
</script>

2.隐式转换：不是编程人员刻意去转换的，而是浏览器（JS解析引擎）帮我们自动转换

<script>
        // + - * / %

        // + 不具备隐式类型转换
        // 字符串于任何数据类型相加 都是拼接的意思
        
        console.log(2 + 2);
        console.log(2 + "2");
        console.log(null + "2");
        console.log(undefined + "2");
        

        // - * / %都具备隐式类型转换

        console.log(2 - "2");
        console.log(2 * "2");
        console.log(2 / "2");
        console.log(2 % "2");
        console.log("10" / "2");
        console.log(10 / "2c"); //NaN
</script>

二.赋值运算符

<script>
        //  将 = 右边的值赋给左边的变量
            var num = 10;
            num = num + 10;
            console.log(num);

        // 简写
            num += 10;
            console.log(num);

            num = num * 10;
            num *= 10;
            console.log(num);
</script>

三.自增自减运算符

<script>

        // 自增 -- i++； ++i；
        // 在不参与运算的情况下，它们都是自增1
        // 在参与运算的情况下：
        // ++写在后面，先参与运算，然后再加一
        // ++写在前面，先加1，然后再参与运算

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

           console.log(++num + num++ + ++num);   //8

        // 自减 -- i--； --i；
        // 在不参与运算的情况下，它们都是自减1
        // 在参与运算的情况下：
        // --写在后面，先参与运算，然后再减一
        // --写在前面，先减1，然后再参与运算

</script>

四.逻辑运算符

1.逻辑与 &&

<script>

        // 逻辑与操作符 左右两边的操作数 只要有一个是假 那么整体结果就为假，并且返回false的操作数
        // 如果第一个操作数结果是false 那么就返回第一个操作数
        // 如果第一个操作数结果是true 那么就返回第二个操作数
        // 如果两个操作数都为true的话 也返回第二个操作数

        console.log(0 && 1);
        console.log('' && '123');
        console.log(false && true);
        console.log(null && undefined);
        console.log("123" && 100);
        console.log(true && false);

</script>

2.逻辑或 ||

 <script>

        // 逻辑或 || 左右两边的操作数 只要有一个结果为true 则返回结果为true的操作数
        // 如果第一个操作数为true 就直接返回第一个操作数
        // 如果第一个操作数为false 就直接返回第二个操作数
        // 如果两个操作数都为false 也直接返回第二个操作数

        console.log(true || false);
        console.log(100 || undefined);
        console.log(100 || 200);
        console.log('' || "123");
        console.log(false || true);
        console.log(null || undefined);

</script>

3.逻辑非！

 <script>

        // 逻辑非 ！ 把你的操作数隐式转换成布尔值 并取反
           console.log(!true);
           console.log(!'');
           console.log(!123);
           console.log(undefined && !undefined); //undefined
           console.log(undefined || !undefined); //true

</script>

五.关系运算符

<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

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

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

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

六.三元运算符

<script>

        // 三元运算符也叫做三目运算符
        //  表达式 ? 表达式结果为true执行的代码 : 表达式结果为false执行的代码；
        // 用于作简单的业务逻辑判断
        // 好处：简单，易读，易写
        // 不足：不能作复杂的业务逻辑判断

        var weather = prompt("请输入现在的天气");

        weather == "晴天" ? alert("出去玩") : alert('在家敲代码');

</script>

七.if....else控制语句

<script>

        // 流程控制语句
        // if...else

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

        var weather = prompt("请输入一个天气");

        // if (weather == "晴天") {
        //     alert("出去BBQ");
        // } else {
        //     alert("在家BBQ");
        // }；


        // 多个条件
        if (weather == "晴天") {
            alert("出去BBQ");
        } else if (weather == "阴天") {
            alert("去钓鱼");
        } else if (weather == "下雨") {
            alert("在家敲代码");
        } else {
            alert("去逛街");
        }；

 </script>

八.switch语句

 <script>

        // 执行顺序：
        // 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;
        // }；

        var weather = prompt("请输入天气");
        switch (weather) {
            case "晴天":
                alert("出去玩");
                break;
            case "阴天":
                alert("去钓鱼");
                break;
            case "下雨":
                alert("在家敲代码");
                break;
            case "下冰雹":
                alert("在家猛敲代码");
                break;
            default:
                alert("在家看小魔仙");
                break;
        }；

</script>

九.for循环

<script>

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

        // for (①var i = 0; ②i <= 10; ④i++) {
        //     // 代码块
        //     ③console.log(i);
        // }
        // ①初始化变量（计数器）
        // ②程序员编写表达式 判断成立否
        // ③如果成立则执行代码块
        // ④执行完代码块 让计数器自增 然后从②开始循环执行

        // 注意第一步只执行一次 也就是初始化变量
        // 
        // for (var i = 1; i <= 100; i++) {
        //     console.log(i);
        // }

        // 求出100以内的所有偶数
        for (var i = 1; i <= 100; i++) {
            if (i % 2 == 0) {
                console.log(i);
            }；
        }；

 </script>

十.while语句

1.while

 <script>

        var i = 0;
        while (i <= 100) {
            if (i % 2 == 0) {
                console.log(i);
            }

            i++;

        }；

        // 判断表达式是否成立 执行大括号中的代码
        // 直接开始判断表达式

</script>

2.do....while语句

 <script>

        var i = 0;

        do {

            console.log(i);

            // 循环体
            // 代码块

            i++;

        } while (i <= 100)；

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

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

 </script>