02-JavaScript

最新推荐文章于 2024-07-18 11:48:33 发布

yfp020907

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量36

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/yfp020907/article/details/132217939

版权

1.转换数据类型

<!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>Document</title>
</head>

<body>
    <script>
        // 1.强制类型转换，通过方法强制改变数据类型
        // 1.1 将其他类型转换为 Boolean 类型
        // 0 "" undefined null NaN false 被转换为 false，其他（非0数字，非空字符串）被转换为 
        // true
        // 1.2 将其他类型转换为 Number 类型
        // 1.2.1 Number() 方法
        // 1.2.2 parseInt() 方法
        // 1.2.3 parseFloat() 方法
        // 1.3 将其他类型转换为 String 类型
        // 1.3.1 String() 方法
        // 1.3.2 toString() 方法        变量.toString();可以进行进制转换。


        var num = "";
        console.log(Number(num));       // 0
        var bool1 = true;
        console.log(Number(bool1));     // 1
        var bool2 = false;
        console.log(Number(bool2));     // 0
        var und = undefined;
        console.log(Number(und));       // NaN  not a number
        var kong = null;
        console.log(Number(kong));      // 0


        // 2.隐式类型转换，浏览器解析时自动转换数据类型
        // + - * / %
        // - * / % ,会将符号两边的值转换为 number 类型再进行计算
        // +,如果 + 两边都是number类型，直接相加；如果有一边是字符串，则会进行拼接

    </script>
</body>

</html>

2.赋值运算符

<!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>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>

3.自增自减运算符

<!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>Document</title>
</head>

<body>
    <script>
        // 自增运算符 i++  ++i
        var num1 = 10;
        num1++;             // num1 = num1 + 1;
        console.log(num1);  // 11

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

        var num2 = 10;
        var num3 = 5;
        var sum;
        sum = num2++ + 5;      // 11 + 6 = 17
        console.log(sum);           // 16     num2++ 为10
        console.log(num2);          // 11

        // 不参与运算，符号在前和符号在后没有区别，都是 自增/自减 1
        // 参与运算情况下，自增/自减 操作，符号在前（++i/--i）会先自增1/自减1，
        //再参与运算；符号在后（i++/i--）会先参与运算，后自增1/自减1。

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

        var x = 5;
        var y = 10;
        var z;
        z = x++ + --y + y++ - ++x + y-- + x--;

        console.log(z);     // 33
        console.log(x);
        console.log(y);
    </script>
</body>

</html>

4.逻辑运算符

<!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>Document</title>
</head>

<body>
    <script>


        // &&与 ||或 !非

        // 1.逻辑与 &&    两边同时为真，结果为真。
        var result1 = true && true;
        console.log(result1);        // true

        var result2 = true && false;
        console.log(result2);       // false

        var result3 = false && true;
        console.log(result3);       // false

        var result4 = false && false;
        console.log(result4);       // false

        // 当符号前的值转换为Boolean类型结果为 true，则会直接取符号后的值
        // 当符号前的值转换为Boolean类型结果为 false，则会直接取符号前的值
        var res1 = "" && 1;
        console.log(res1);          // ""

        var res2 = "abc" && 10;
        console.log(res2);


        console.log("---------------------------------------");

        // 2.逻辑或 ||      两边同时为false，结果为false
        var or_res1 = true || true;
        console.log(or_res1);           // true

        var or_res2 = true || false;
        console.log(or_res2);           // true

        var or_res3 = false || true;
        console.log(or_res3);

        var or_res4 = false || false;
        console.log(or_res4);

        var res3 = "abc" || 0;
        console.log(res3);

        var res4 = 0 || false;
        console.log(res4);

        // 控制错误
        var sum = false && num;
        console.log(sum);

        console.log("**********************************");

        // 3.逻辑非 !   两级反转
        var res_1 = !true;
        console.log(res_1);

        var res_2 = !1;
        console.log(res_2);

        var res_3 = !"";
        console.log(res_3);
    </script>
</body>

</html>

5.关系运算符

<!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>Document</title>
</head>
<body>
    <script>
        // 关系运算符
        // < <= == >= > != === !==
        console.log(3>5); 
        console.log(3 == 4);

        // 字符串之间的比较,会比较 ASCLL 码的值
        console.log("abc" < "ABC");
        console.log("abc" < "aBc");     // false

        // 其他类型和数字进行比较,其他类型会进行隐式类型转换，再去比较
        console.log(""<3);  
        console.log(true > 0);

        // NaN 
        console.log("abc" > 3);         // false
        console.log("abc" < 3);         // false
        console.log("abc" == 3);        // false

        // 问：
        console.log("23" > "3");        // false

        console.log("23" > 3);          // true

        console.log("-------------------------------------");

        // 等于 == 
        console.log(2 == 2);            // true
        console.log("abc" == "abc");    // true
        console.log("23" == 23);        // true
        console.log("23" != 23);        // false


        console.log("******************************");
        // 问：
        console.log("23" === 23);

        // 赋值 =
        // 等于== 会进行隐式类型转换，再去比较值是否相等  同理 !=
        // 全等于 === 会先比较数据类型是否相等，数据类型相同，
        // 则再去比较值是否相等  同理 !==

        // num   3 < num < 10    num > 3 && num < 10
    </script>
</body>
</html>

6.条件运算符（三目运算符）

<!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>Document</title>
</head>
<body>
    <script>
        // 条件运算符 （三目运算符）
        // 表达式 ? 如果表达式结果为true,执行这里的代码1 : 如果表达式结果为false,
        // 执行冒号后面的代码2 ;

        3<5? console.log("三小于五") : console.log("三不小于五");

        
    </script>
</body>
</html>

7.运算符的优先级

常用运算符优先级从高到底

1. ( )优先级最高

2. 一元运算符 ++ -- !

3. 算数运算符先* / % 后 + -

4. 关系运算符 > >= < <=

5. 相等运算符 == != === !==

6. 逻辑运算符先&& 后||

7. 赋值运算符

8.if-else语句

 // if...else...语句
        // 先判断条件表达式，如果结果为true，则执行代码1，否则执行代码2

        // if(条件表达式){
        //     执行的代码1
        // }else{
        //     执行的代码2
        // }

        if (3 < 5) {
            console.log("三小于五");
        } else {
            console.log("三不小于五");
        }

        // 成绩在90分以上为优秀，70-90为良好，60-70为及格，60以下为不及格
        var num;
        num = 62;
        if (num >= 90) {
            console.log("优秀");
        } else if (num >= 70) {
            console.log("良好");
        } else if (num >= 60) {
            console.log("及格");
        } else {
            console.log("不及格");
        }

9.switch语句

   // switch语句

        // switch( 条件表达式或者一个常量 ){
        //     case 匹配值1:
        //         匹配成功的代码;
        //         break;
        //     case 匹配值2:
        //         匹配成功的代码;
        //         break;

        //     ...
        //     default:
        //         与所有匹配值匹配失败执行的代码;
        //         break;
        // }

        // 执行顺序：

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

        var num1 = 10;
        var num2 = 5;
        var res;
        
        var symbol = prompt("请输入运算符");

        switch(symbol){
            case "+":
                res = num1 + num2;
                break;
            
            case "-":
                res = num1 - num2;
                break;
            
            case "*":
                res = num1 * num2;
                break;

            case "/":
                res = num1 / num2;
                break;

            case "%":
                res = num1 % num2;
                break;
            
            default:
                alert("无效符号！");
                break;
        }

        console.log(res);

10.for循环语句

        // for循环
        // for (初始化一个变量; 条件表达式; 对变量的处理) {
        //     循环体
        //     执行的代码
        // }



        // 执行顺序：

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

11.break和continue的区别

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

        // 逢7过
        for (var i = 1; i <= 100; i++) {
            if (i % 7 == 0){
                console.log("过！");
                continue;
            }
            console.log(i);
        }

yfp020907

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02-JavaScript

5. 相等运算符 ==!= ===!3. 算数运算符先* / % 后 + -4. 关系运算符 > >= < <=2. 一元运算符 ++ --!6. 逻辑运算符先&& 后||1. ( )优先级最高。11.break和continue的区别。6.条件运算符（三目运算符）常用运算符优先级从高到底。8.if-else语句。9.switch语句。10.for循环语句。
复制链接

扫一扫