数据转换和运算符和结构

最新推荐文章于 2024-09-17 21:49:02 发布

竹笋js

最新推荐文章于 2024-09-17 21:49:02 发布

阅读量143

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_46411005/article/details/127435392

版权

思维导图

数据类型转换

1.其他数据类型转化成数值类型

Number()==>把变量看作一个整体如果其中有一个不是数字，则返回NaN,唯一一个可以转化布尔类型的 true-》1 false-》0
parseInt()==>把变量分成一个一个的从左向右一个一个的转直到遇到不能转的就停止输出前面转好的，如果全都不能转，则直接输出NaN，如果第一个就不能转，直接输出NaN，遇到小数点，停止,布尔类型的 true-》NaN false-》NaN
parseFloat()==>把变量分成一个一个的从左向右一个一个的转直到遇到不能转的就停止输出前面转好的，如果全都不能转，则直接输出NaN，如果第一个就不能转，直接输出NaN，布尔类型的 true-》NaN false-》NaN
除+之外的运算符 - * /js 隐式转默认使用number方法整体转遇到不能转的则会输出nan
输出nan的原因是，转为数值类型，而转化不成功转的是一个非数值

<!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.Number（你要转化的数据）;把要转化的数据当作一个整体看待   true==>1 false==>0

        // 把要转化的数据当作一个整体，只要有一个不能转 则整体输出nan  但可以true==>1 false==>0

        var test = '100abc';
        console.log(test);
        var res =  Number(test);
        var flag = Number(true);

        console.log(typeof res);
        console.log(res);
        console.log(flag);
        // parseInt(你要转化的数据);把要转化的数据切成一位一位的，从左到右开始转 若能转 就输出 遇到不能的就停止  遇到小数点就停止 如果全部不能转，则输出nan   如果第一个就不能转 则直接输出nan
        //  true==>nan false==>nan
        var test = '100abc';
        console.log(test);
        var res =  parseInt(test);
        var flag = parseInt(true);

        console.log(typeof res);
        console.log(res);
        console.log(flag);
 

        // parseFloat(你要转化的数据);把要转化的数据切成一位一位的，从左到右开始转 若能转 就输出 遇到不能的就停止  本身就转小数    如果全部不能转，则输出nan   如果第一个就不能转 则直接输出nantrue==>nan false==>nan
        var test = '100abc';
        console.log(test);
        var res =  parseInt(test);
        var flag = parseInt(true);

        console.log(typeof res);
        console.log(res);
        console.log(flag);
        // - 背后自动给你转化
        // 遇到非加法 如果左右有一个数值，那么另一个会自动转为数值类型   如果转不了 就输出 nan   整体转 不会跳着转  默认使用number（）；
        var action = '666' - 100;
        console.log(action);//结果为566 背后默默转使用的是number方法进行转化 所以，只有全部都是数字 才可以成功转化 只有有一个不是数字类型则会输出nan

        var num1 = prompt("请输入第一个数字");
        var num2 = prompt("请输入第二个数字");
        // 如果num1这个变量，接下来需要使用字符串类型的，则需要在使用运算的时候，转化 使用一下列子
        alert(parseInt(num1)+parseInt(num2));
    </script>
</body>
</html>

2.其他数据类型转化为字符串类型

String()==》可以转所有类型
toString() ==》不能转undefined null

要转化的变量.toString()

两边都是布尔类型，则先转数值类型相加两边有其一为字符串则拼接拼接也是转字符串类型的一种

<!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.String('你要转化的数据')
                可以转任意类型
                返回字符串
            2.toString()
                要转的.tostring()
                只能转数值 布尔 
                不能转null和undefined
            3."+"
                如果加号左右只有有一个为字符串 则结果为字符串
        
        */
// 1.String()
        //  数值
        var num1 = 100;
        console.log(typeof num1,num1);
        var num2 = String(num1);
        console.log(typeof num2,num2);
        var num3 = 100.12;
        console.log(typeof num3,num3);
        var num4 = String(num3);
        console.log(typeof num4,num4);
        // 布尔类型
        var flag = true;
        console.log(typeof flag,flag);
        var res = String(flag);
        console.log(typeof res,res);
        // null
        var null1 = null;
        console.log(typeof null1,null1);
        var null2 = String(null1);
        console.log(typeof null2,null2);
        // undefined
        var undefined1 = undefined;
        console.log(typeof undefined1,undefined1);
        var undefined2 = String(undefined1);
        console.log(typeof undefined2,undefined2);
// 2.toString()
        //  数值
        var num1 = 100;
        console.log('2',typeof num1,num1);
        var num2 = num1.toString();
        console.log(typeof num2,num2);
        var num3 = 100.12;
        console.log(typeof num3,num3);
        var num4 = num3.toString();
        console.log(typeof num4,num4);
        // 布尔类型
        var flag = true;
        console.log(typeof flag,flag);
        var res = flag.toString();
        console.log(typeof res,res);
        // 以下不可以转
        // null
        /* var null1 = null;
        console.log(typeof null1,null1);
        var null2 = null1.toString();
        console.log(typeof null2,null2); */
        // undefined
        /* var undefined1 = undefined;
        console.log(typeof undefined1,undefined1);
        var undefined2 = undefined1.toString();
        console.log(typeof undefined2,undefined2); */
    

    

// 第三种   +
    alert(true+true);//两边都是布尔类型 那么会把两边的都转为数值类型，然后相加
    alert('hell'+true);//有一个为字符 则结果为字符
</script>
</body>
</html>

3.其他类型转化为布尔类型

Boolean（）
在js中只有六种情况是假的==》0 0.0 false ‘’ null undefined
[] {} 只有在js中不是空因为null是对象中的空所以其他情况都是真

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


        // string

        // boolean

        // null==》空对象只有null这一种 他是假的则[]{}为真

        // undefined

        // object

        // 假的==》0 0.0 '' false null undefined 

        /* 
            方法：Boolean（）

        
        */
       console.log(Boolean(0));
       console.log(Boolean(0.0));
       console.log(Boolean(''));
       console.log(Boolean(false));
       console.log(Boolean(null));
        var test ;
       console.log(Boolean(test));
    //    js仅有六种是假的
    // 0 0.0 false '' null undefined
    // [] {} 在js中是真的，在其他中是假的
    var test1 = [];
    console.log(test1);//在js中是真的
    var test2 = {};
    console.log(test2);//在js中是真的
    </script>
</body>
</html>

运算符

1.数学运算符

± / * % 幂**
小数点算数一定要检查一遍因为0.1+0.2！=0.3 而是0.3000004 因为js脚本语言编译不严谨
个十百》运用%和/
小时分钟秒》运用%和/

<!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(1+1);//2
        console.log(1-1);//0
        console.log(1*1);//1
        console.log(1/1);//1
        console.log(10%3);//1
        console.log(10**3);//1000
        console.log(10e3);//10*10的三次方
        // 小数点算数一定要看一下   语言不严谨 脚本解释型语言
        console.log(.1+.2);//0.30000000000000004不严谨
//提示除法取余
// 873
// 提个十百
        var  num = 873;
        var res =parseInt(num /100) ;
        console.log('百位',res);
        var ten =parseInt( num % 100 / 10);
        console.log('十位',ten);
        var ge = num  % 10;
        console.log("个位",ge)
//16953秒
//多少小时多少分钟多少秒
// 1m 60 1h 3600 秒
// / %parseInt
        var miao = 16953;
        var h =parseInt(miao / 3600) ;
        console.log('小时',h)
        // var m =parseInt((miao - h * 3600) / 60);
        var m = parseInt(miao % 3600 /60)
        console.log('分钟',m)
        var s = parseInt(miao % 3600 % 60)
        console.log('秒',s)
        console.log(`${h}小时：${m}分钟：${s}秒`);

        // 数字 整数求个位 那就是求余10
        // 时间 多少秒 那就是求余60
        // 语法错误
    </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 num1 = 100;
        num1 += 100;//num1=num1+100
        num1 -= 100;//num1=num1-100
        num1 *= 100;//num1=num1*100
        num1 /= 100;//num1=num1/100
        num1 %= 100;//num1=num1%100
        num1 **= 2;//num1=num1 ** 2
        console.log(num1);
    </script>
</body>
</html>

3.比较运算符

= < <= ==[等于数值] !=【不等于】 =【等于数值和类型】 !【全都不相等】
// NaN 非数字
// 齐与任意数字运算结果一定是NAN
比较运算符的结果一定是布尔类型对还是错

<!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 false
        // 等于 不等于 大于 小于 大于等于 小于等于

        // ==比较值是否相等 ===比较值和类型是否相等 != !==都不全等与 > < >= <= 
        var num1 = 10;
        var num2 = 20;
        var num3 = '10';
        
        console.log(num1 == num3);//true
        console.log(num1 === num3);//false因为类型不同
        
        console.log(num1 == num2);//false
        console.log(num1 != num2);//true
        console.log(num1 >= num2);//false
        console.log(num1 <= num2);//true
        console.log(num1 > num2);//false
        console.log(num1 < num2);//true

        console.log(undefined==null);//true
        // 因为undefined 是派生子null
        console.log(undefined=== null);//false   因为类型不同
        var res = .1+.2;
        console.log(.3 == res);//false

        // NaN 非数字
        // 齐与任意数字运算 结果一定是NAN
        console.log(NaN == NaN);//false
        console.log(NaN !== NaN);//true

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

4.逻辑运算符

逻辑与&& 两边全都的为真才为真
逻辑或|| 两边只要有一个为真，则为真
逻辑非！真反假假反真
逻辑运算的结果不一定全是true false
&&

全都是真的，则输出最后一个数
不全都是真，则从左到右，遇到假的，就输出为假的数值

全都是假的，则输出最后一个数
不全都是假，则从左到右，遇到真的，就输出为真的数值

例子：==》石头剪刀布闰年
//隐式转换
// 短路运算 && 遇到假停止向右
// 短路运算 || 遇到真停止向右

<!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个满足就可以，全都不满足就是假的】

        var height = 181;
        var edu = '硕士';
        var beauty = 80;
        console.log(height>=180 && edu == '硕士'  && beauty >= 80);//true

        // 逻辑或||
        var height = 181;
        var edu = '家里蹲';
        var beauty = 80;
        console.log(height>=180 || edu == '硕士'  || beauty >= 80);//true



// 逻辑非！ 真的变成假的 假的变成真的
        console.log(!5>4);

        // 逻辑运算符的结果不一定是布尔类型



        //隐式转换
         // 短路运算 && 遇到假 停止向右 
        // 短路运算 || 遇到真 停止向右 

        // &&
        var res = 100&& 'hello' &&true && 1.5;
        // true true true &&1.5
        console.log(res);//如果都是真，则输出最后一个数
        var res = 100&& 'hello' &&0 && 1.5;
        // true true true &&1.5
        console.log(res);//如果不都是真，则从左到右 遇到假的 则输出那个为假的数
        // ||
        var res = 0|| '' ||false || NaN;
        // false false false || nan
        console.log(res);//如果都是假的，则输出最后一个数
        var res = 10|| 0 ||false || NaN;
        console.log(res);//如果不都是假的，则从左到右，遇到真的 就输出哪个为真的数据
        

         // 最少6位 最多 30位  

        var username = prompt('请输入您的用户名:');

        var len = username.length;

        var res = len >=6 && len<=30;
        alert(res);

        // 剪刀 0 石头 1 布 2 
        // 用户 0  1  2
        // 电脑 2  0  1
        var test = prompt('请输入剪刀0布2石头1');
        var computer = prompt('请输入剪刀0布2石头1');
        var res =  (test == 0 && computer==2) || (test == 1 && computer==0) || (test == 2 &&computer==1);
        console.log(res);


        // 闰年  


        // 能被4整除  不能被100整除 或者 能被400整除的年份是闰年
        // 要求让用户输入年份  注意类型  
        // 打印 您输入的年份***true闰年
        var year = parseInt(prompt("请输入您想检验的年份")); 
        var flag = (year % 4 == 0 )&& (year % 100 != 0 )||(year % 400 ==0);
        console.log('您输入的年份'+year+flag+'闰年');

    </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>
        var n = 5;
        // ++n;
        // console.log(n);//n本身来讲 +1
        // --n;
        // console.log(n);//n本身来讲 -1
        // n++;
        // console.log(n);//n本身来讲 +1
        // n--;
        // console.log(n);//n本身来讲 -1

        // console.log(10 + ++n);
        // console.log(10 + n++);
        
        // console.log(10 - --n);
        // console.log(10 - n--);
        var a = 3;
        var b = 4;
        // console.log(a++ + ++b - --n);//4
        // console.log(a);//4
        // console.log(b);//5
        // console.log(n);//4
        console.log(++a + b++ - --n+ ++a);//9
    </script>
</body>
</html>

6.运算符的优先级

！> &&>||
遇到比较运算符则输出true、false 其他输出数值

<!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 false   数值就输出数值
        // var a=3,b=4,c=5;
        // var res = !c||b&&c;
        //           false||true&&true
        //           false||true(2)
        //           true(2)==>5
        // console.log(res);//==>5
        
        var res = 3>5&&2<7&&10==4;
        //        false &&true&&false
        //        false
        console.log(res);//false
    </script>
</body>
</html>

结构

1.if


<!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 age = parseInt(prompt('输入年龄'));
        if(age>=18){//先将齐进行隐式转换
            console.log('欢迎光临');
        }
        console.log('好好学习天天向上');
    </script>
</body>
</html>

2.if else

<!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 year = parseInt(prompt("请输入您想检验的年份")); 
        if (year % 4 == 0 && year % 100 != 0 ||year % 400 ==0){
            console.log('您输入的年份'+year+'是闰年');
        }else{
            console.log('您输入的年份'+year+'不是闰年');
        }
    </script>
</body>
</html>

3.if else if

<!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 test = prompt('请输入剪刀0布2石头1');
        var computer = prompt('请输入剪刀0布2石头1');
        if  (test == 0 && computer==2 || test == 1 && computer==0 || test == 2 &&computer==1){
            console.log('您赢了');
        }else if(test == computer){
            console.log('平局')
        }
        else{
            console.log('你输了，再接再厉')
        }


        var grade = parseInt(prompt('请输入您的成绩'));
        if(grade>=90){
            console.log('A');
        }
        else if(grade<90&&grade>=80){
            console.log('b');
        }
        else if(grade<80&&grade>=70){
            console.log('c');
        }
        else if(grade<70&&grade>=60){
            console.log('d');
        }
        else{
            console.log('e');
        }

        // 80<=grade<90 js 先判断80<=grade 如果是true 那么直接输出 如果第一个不是正常的 那么判断第二个grade<90 true 
    </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>
        var ticket = prompt("请输入是否买票1或者0");
        if(ticket== '1'){
            console.log('买票了');
            var suan = parseInt( prompt("请输入核酸小时数"));
            if (suan<48){
                console.log('请安检');
                var safe = prompt('是否安检1、0');
                if(safe=='1'){
                    console.log('一路顺风');
                }else{
                    console.log('请安检');
                }
            }else{
                console.log('请出站做核酸');
            }

        }else{
            console.log('请先买票');
        }

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