web前端开发

03_JavaScript_day2

2021-11-15  本文已影响0人  Du1in9

五、数据类型转换

5.1 转换成字符型

使用字符串方法 toString() 转换,但是null和undefined无法转换。
使用顶层函数 String() 可以将任何数据类型转换成字符串,包括null和undefined。
隐式转换:在其他数据类型和字符串类型进行连接操作时,会自动对其他数据类型使用String()强制转换成字符串,然后再相加。

    <script>
        var a=123, b=3.14, c,d=null, e=true;
        var f=['手机','电脑'], g={name:'刘备',job:'卖草鞋'};

        console.log(a.toString())       //123
        console.log(b.toString())       //3.14
        // console.log(c.toString())    //报错
        // console.log(d.toString())    //报错
        console.log(e.toString())       //true
        console.log(f.toString())       //手机,电脑
        console.log(g.toString())       //[object Object]

        console.log(String(a))          //123
        console.log(String(b))          //3.14
        console.log(String(c))          //undefined
        console.log(String(d))          //null
        console.log(String(e))          //true
        console.log(String(f))          //手机,电脑
        console.log(String(g))          //[object Object]

        console.log(a+' hello')          //123 hello
        console.log(b+' hello')          //3.14 hello
        console.log(c+' hello')          //undefined hello
        console.log(d+' hello')          //null hello
        console.log(e+' hello')          //true hello
        console.log(f+' hello')          //手机,电脑 hello
        console.log(g+' hello')          //[object Object] hello
        
        // 第一个object 表示是哪种数据类型,第二个Object表示是哪种类型的对象
        console.log(String(Math))        //[object Math]
        console.log(String(document))    //[object HTMLDocument]
    </script>
5.2 转换成数值型

① parselnt() --转换成整型
parselnt() 方法首先查看位置0处的字符,判断它是否是个有效数字:如果不是,将返回 NaN,不再继续执行其他操作。如果是,将查看位置1处的字符,进行同样的测试。这一过程将持续到发现非有效数字的字符为止,此时 parselnt() 将把该字符之前的字符串转换成数字。
② parseFloat() --转换成浮点型
道理和转换成整型一样,只不过浮点型允许有一个小数点出现。
③ Number() --强制转换
强制类型转换与前两种方法的处理方式相似,只是它转换的是整个值,而不是部分值。


    <script>
        var a=123;
        console.log(parseInt('35'));        //35
        console.log(parseInt('abc123'));    //NaN
        console.log(parseInt('12345abc'));  //12345
        console.log(parseInt('123abc456')); //123
        console.log(parseInt(a+'456'));     //123456
        console.log(parseInt('12.54'));     //12

        console.log(parseFloat('35'));        //35
        console.log(parseFloat('abc123'));    //NaN
        console.log(parseFloat('12345abc'));  //12345
        console.log(parseFloat('123abc456')); //123
        console.log(parseFloat(a+'456'));     //123456
        console.log(parseFloat('12.54'));     //12.54
        console.log(parseFloat('12.53.153')); //12.53

        console.log(Number('35'));        //35
        console.log(Number('abc123'));    //NaN
        console.log(Number('12345abc'));  //NaN
        console.log(Number('123abc456')); //NaN
        console.log(Number(a+'456'));     //123456
        console.log(Number('12.54'));     //12.54
        console.log(Number('12.53.153')); //NaN
    </script>
5.3 转换成布尔型

显示的转换是使用 Boolean() 函数,对需要转换的内容进行转换。
以下内容在转换成布尔值时会被转换成false:
数值型的 0,布尔型的 false,空字符串 "",非数字 NaN,undefined,null。
除此以外,其他所有值都会转换成true,包括“0”、空数组 []、空对象 {}。

六、流程控制

6.1 顺序结构

顺序结构体现了代码从上到下依次执行。但是在JS中,要注意有两点能够打破顺序结构:一点是变量提升,另一点是函数预加载。

    <script>
        console.log(a);         //undefined
        var a=1;
        // 变量提升,上面的两行代码和下面三行代码执行结果和道理一样
        // var a;
        // console.log(a);
        // var a=1;     
        b();                    //123
        function b(){
            console.log(123);
        }
        //函数可以先调用,再声明,这就是函数预加载,预加载是有条件的:
        //条件1:函数声明方式必须是常规的方式,条件2:函数的声明和调用在同一个script段中
    </script>
6.2 分支结构

if...else if... else
if...else...
switch...case...

    <script>
        var week=new Date().getDay();       //获取一个数据类型的星期
        console.log(week);                  //6
        var week_zn_cn;                     //中文格式的星期
        switch(week){
            case 1:
                week_zn_cn='星期一';
                break;
            case 2:
                week_zn_cn='星期二';
                break;
            case 3:
                week_zn_cn='星期三';
                break;
            case 4:
                week_zn_cn='星期四';
                break;
            case 5:
                week_zn_cn='星期五';
                break;
            case 6:
                week_zn_cn='星期六';
                break;
            case 7:
                week_zn_cn='星期日';
                break;
            default:
                console.log('格式错误');
                break;
        }
        console.log('今天是'+week_zn_cn);   //今天是星期六
    </script>
6.3 循环结构
    <script>
        var a=1;
        while(a<=6){
            console.log('hello '+a);
            a++;
        }

        var b=1;
        do{
            console.log('hello '+b);
            b++;
        }while(b<=6)

        var i=0;
        for( ;i<=6; ){
            console.log('hi '+i);
            i++;
        }

        var arr=['张飞','关羽','刘备','杨玉环','马超','黄忠'];
        for(var c in arr){
            console.log('halo '+c+' '+arr[c]);
        }

        var obj={name:'林冲',age:40,nickname:'豹子头'};
        for(var d in obj){
            console.log('halo '+d+' '+obj[d]);
        }
    </script>
6.4 continue 和 break
    <script>
test:   for(var i=0;i<=8;i++){
            if(i%2==0)
                continue test;
test2:      for(var j=0;j<=30;j++){
                if(j-i==1)
                    break test2;
                console.log('i:'+i+' j:'+j);
            }
        }
    </script>

七、函数

    <script>
        // 定义与调用
        function sum(x){
            var s=0;
            for(var i=0;i<=x;i++)
                s+=i;
            return s;
        }
        console.log(sum(100));      //5050
        // 函数表达式
        var a=sum;
        console.log(a(100));        //5050
        var b=function(x){
            console.log('今天是周'+x);
        }
        b('三');                    //今天是周三
        // 函数预加载
        c();
        function c(){
            console.log(12345);     //12345
        }
        // 立即调用模式
        ~function (){
            console.log(12345);     //12345
        }();
        !function (){
            console.log(12345);     //12345
        }();
        -function (){
            console.log(12345);     //12345
        }();
        +function (){
            console.log(12345);     //12345
        }();
        (function (x,y){
            console.log(x*y);       //150
        })(3,50)
        // 形参:定义函数时,约定的参数。
        // 实参:调用函数时,传递给函数的实际值。
        // JS函数参数传递非常灵活,形参和实参个数可以不一样。
        function t(x,y){
            console.log(123+x+y);
        }
        t();                        //NaN
        t(1,2,3,5,7);               //126
        function m(x,y){
            if(y==undefined)
                y=15;
            console.log(x+y);
        }
        m(1,10);                    //11
        m(3);                       //18
    </script>

八、作用域

    <script>
        var a=10;
        function m(){
            //函数内部可以使用外部定义的变量
            console.log('hello '+a);
        }
        m();                    //hello 10
        function m2(){
            var a=20;
            //函数内部优先使用内部定义的变量
            console.log('hello '+a);
        }
        m2();                    //hello 20
        function m3(){
            console.log('hello '+a);
            var a=20;
        }
        m3();                   //hello undefined
        //函数内部没有用var声明的变量是全局变量
        function m4(){
            // var a=15;        //局部变量
            a=30;               //全局变量
        }
        m4();
        console.log('hello '+a) //hello 30
        //小练习:
        var b=10;
        function f1(){
            b=20;
            function f2(){
                var b=30;
                console.log('hello '+b);
            }
            f2();
        }
        f1();                   //hello 30
    </script>

九、标准库(内置对象)

这里强烈安利一下 W3school 的语法手册:

9.1 Math 对象:数学对象
    <script>
        console.log(Math.PI);  
        console.log(Math.ceil(3.14));
        console.log(Math.floor(6.7));
        console.log(Math.round(4.3));
        console.log(Math.random());
        //随机整数公式:Math.floor(i+Math.random()*(j-i+1)),范围[i,j]
        console.log(Math.floor(2+Math.random()*9));    //随机生成2~10
    </script>
9.2 Date 对象:时间日期对象
    <script>
        var d=new Date();           //实例化Date对象
        var year=d.getFullYear();   //获取四位数的年份
        var month=d.getMonth()+1;   //获取月份(0~11)
        var day=d.getDate();        //获取日期
        var hour=d.getHours();      //获取小时
        var minute=d.getMinutes();  //获取分钟
        var second=d.getSeconds();  //获取秒数
        console.log(year+'年 '+month+'月 '+day+'日 '+hour+'时 '+minute+'分 '+second+'秒');
                                    //2021年 11月 15日 20时 39分 51秒
    </script>
9.3 String对象:字符串对象
    <script>
        //用法一
        var s=new String('hello world');
        console.log(s.length);                      //11
        console.log(s.indexOf('l'));                //2
        console.log(s.indexOf('a'));                //-1
        //用法二
        console.log('hello_world!'.indexOf('r'));   //8
        console.log('abcdefg'.substr(4,2));         //ef
    </script>
9.4 Array对象:数组对象
    <script>
        var arr=new Array('apple','pear');
        arr.push('banana');
        console.log(arr);   
        var length=arr.push('potato','peach');
        console.log(length,arr);    
        var fruit=arr.pop();
        console.log(fruit,arr);
    </script>
上一篇 下一篇

猜你喜欢

热点阅读