Rumah > hujung hadapan web > html tutorial > 小强的HTML5移动开发之路(28)—— JavaScript回顾3

小强的HTML5移动开发之路(28)—— JavaScript回顾3

黄舟
Lepaskan: 2017-02-04 14:20:34
asal
1386 orang telah melayarinya

一、基本数据类型

number:数字类型

string:字符串 (注意s小写:string是基本类型)

boolean:布尔类型   //前三个都有对应的包装类

null:空类型

undefined:未定义类型

测试一:

<html>  
    <!--基本类型测试-->  
    <head>  
        <script>  
            function f1(){   //number类型  
        /*有返回值时也不能function void f1(){}*/  
                alert(&#39;hello&#39;);  
    /*alert(); 弹出消息框*/  
                alert(&#39;hehe&#39;);  
                var i=100;  
    //js当中字符串可用单引号也可用双引号  
                i=&#39;hello&#39;;  
        //typeof是一个运算符,可以返回变量实际存放的数据的类型  
                alert(typeof i);  
    /*js是弱类型语言 不能: number i=100; 不能在声明时指明其类型,在运行时才能确定*/  
            }  
            function f2(){   //string类型  
                var str1=&#39;hello&#39;;  
                var str2=&#39;hello&#39;;  
                if(str1==str2){  
                    alert("str1==str2");  
                }else{  
                    alert("str1!=str2");  
                }  
                var str3=&#39;100&#39;;  
                var i=100;  
                if(str3==i){ //两个=号,进行类型转换  
                    alert("str3==i");  
                }else{  
                    alert("str3!=i");  
                }  
                if(str3===i){ //三个=号,不进行类型转换  
                    alert("str3==i");  
                }else{  
                    alert("str3!=i");  
                }  
            }  
            function f3(){  //boolean类型  
                //布尔类型只有两个值:true/false;  
                var flag=true;  
                alert(typeof flag);  
              //var str="abc";  
                var str=new Object();//创建一个对象,对象会转换为true;  
                var str=null; //转换为false;  
                var str;  //undefined 转换为false;  
                //强制转换,非空的字符串转换为true,非零的数字转换为true;  
                if(str){  
                    alert(&#39;结果为真&#39;);  
                }else{  
                    alert(&#39;结果为假&#39;);  
                }  
            }  
            function f4(){  //null类型  
                var obj=null;  
            //null类型只有一个值——null;  
            //输出的结果是Object  
                alert(typeof obj);  
            }  
            function f5(){ //undefined类型  
                var obj;  
                alert(typeof obj);  
            }  
        </script>   
    </head>  
    <body style="font-size:30px;">  
        <input type="button" value="演示基本类型的使用"  
        onclick="f1();"/>  
    </body>  
</html>
Salin selepas log masuk

测试二:parseInt

<html><span style="white-space:pre">  </span>  
    <head>  
        <script>  
        /*number--->string  
          string---->number  
        */  
            function f1(){  //字符串变数字  
        //      var str1=&#39;fsfs&#39;;     读出NaN  
        //              var str1="1234fsfs";  可以读出1234  
        //              var str1="fsfs1234";   不可以读出  
        //              var str1="22323.08";  
                var str1=&#39;1234&#39;;  
        //window.parseInt();  window可以省略  
                var n1=parseInt(str1);  
//js浮点运算会有误差,先放大x倍,再缩小x倍  
        //      var n2=parseFloat(str1);  
        //undefined + 数字 = NaN  
                alert(n1+100);  
            }  
            function f2(){  
                var n1=100;  
        //number--->Number(对应的包装类型)  再调用toString();  
                var s1=n1.toString();  
            //      var s1=n1+&#39;&#39;;  
            }  
        </script>  
    </head>  
    <body>  
        <input type="button" value="演示基本数据类型" onclick="f1();"/>  
    </body>  
</html>
Salin selepas log masuk

测试三:string的方法


length属性:返回字符串的长度

charAt(index):返回指定位置的字符

substring(from,to):返回子字符串

indexOf(str):返回字符串在原字符串中的位置

lastIndexOf(str):

match(regexp):返回符合正则表达式的一个数组

截取

function f4(){ //string的方法  
    var str1="abcdef";  
    var str2=str1.substring(1,4);  
    alert(str2);  
}
Salin selepas log masuk

正则

function f5(){  
    var str="asdfas12323adfasf23423";  
  //在js中用/reg/,在执行时,会将//内的内容转换成一个RegExp对象  
    var reg=/[0-9]+/g;    
  //reg中是一个对象,不是字符串,注意加一个g搜索整个字符串,还有i忽略大小写。  
    var arr=str.match(reg);  
    alert(arr);  
}
Salin selepas log masuk

查找

function f6(){  
    var str1="sdf1223asdfasf23423";  
    var reg=/[0-9]+/;  
    //alert(typeof reg);  
    alert(reg instanceof RegExp);  
    var index = str1.search(reg);  
    alert(index);  
}
Salin selepas log masuk

替换

function f7(){  
    var str1="sdf444asdfadf4423";  
    var reg=/[0-9]+/g;  
    var str2 = str1.replace(reg,&#39;888&#39;);  
    alert(str2);  
}
Salin selepas log masuk

二、Object类型(数组、函数,其他的在下一篇中)

1、数组

js数组的长度可变

js数组元素是任意的(可以混合存放不同类型的数据)

<html>  
    <head>  
        <script>  
            function f1(){  //创建数组的第一种方式  
                var arr=new Array();  //()可以省略不写  
                arr[0]=1;  
                arr[3]=2;  
                arr[5]=&#39;abc&#39;;  
                alert(arr.length);  
                alert(arr[1]);  
                alert(arr[3]);        
            }  
            function f2(){ //第二种方式  
                var arr=[];  
                arr[0]=1;  
                arr[3]=22;  
                var arr=[1,2,3,4,5,6];  
                arr[7]=11;  
                alert(arr.length);  
            }  
            function f3(){ //多维数组的创建  
                var arr = new Array();  
                arr[0]=[1,2,3,4,5];  
                arr[1]=[6,7,8,9,10,11,12,13];  
                arr[2]=[14,15,16,17,18,19];  
                for(var i=0;i<arr.length;i++){  
                    for(j=0;j<arr[i].length;j++){  
                        alert(arr[i][j]);  
                    }  
                }  
            }  
            function f4(){ //数组常用的属性和方法  
                var arr=[11,22,33,44];  
                arr.length=2;  //数组的长度可以写,后面的被砍掉  
                alert(arr);  
                alert(typeof abc);  
            }  
        </script>  
    </head>  
    <body>  
        <input type="button" value="数组的使用" onclick="f4()"/>  
    </body>  
</html>
Salin selepas log masuk

数组中的一些函数

<html>  
    <head>  
        <script>  
            function f1(){  
                var a1 = [1, 2, 3];  
                var str = a1.join(|);  
                alert(str);  
            }  
            function f2(){  
                var a1 = [1, 2, 3];  
                 var a2 = [4, 5, 6];  
                 var a3 = a1.concat(a2); //数组连接  
                 alert(a3);  
            }  
            function f4(){  
                var a1 = [1, 2, 3];  
                var a2 = a1.reverse(); //是对原有数组翻转  
                alert(a2);  
                alert(a1);  //原数组变了  
            }  
            function f5(){  
                var a1 = [1, 2, 3, 4, 5, 6];  
                var a2 = a1.slice(2,4); //对数组截取  
                alert(a2);  
                alert(a1); //原数组没有变化  
            }  
            function f6(){  
                var a1 = [5, 1, 7, 2, 8];  
                var a2 = a1.sort(); //从小到大  
                alert(a2);  
            }  
            function f7(){  
                var a1 = [15, 111, 7, 22, 88];  
                var a2 = a1.sort(); //默认按照字典顺序排序  
                alert(a2);   
            }  
            function f8(){  
                var a1 = [15, 111, 7, 22, 88];  
                var a2 = a1.sort(function(t1, t2){  
                    return t2-t1;  
                });   
                alert(a2);   
            }  
            function f9(){  //按照字符串长度排序  
                var a1 = [&#39;abc&#39;, &#39;bb&#39;, &#39;casd&#39;, &#39;a&#39;];  
                var a2 = a1.sort(function(t3, t4){  
                    return t4.length-t3.length;  
                });   
                alert(a2);   
            }  
        </script>  
    </head>  
    <body>  
        <input type="button" value="click me" onclick="f9()"/>  
    </body>  
</html>
Salin selepas log masuk

2、函数

定义一个函数

function 函数名(参数){

函数体

}

要注意的几个问题

a.不能有返回类型的声明,但是可以有返回值。

b.函数其本质是一个对象,是Function类型的实例,函数名是一个变量,存放了这个对象的地址(函数名是一个变量)

c.在函数内部,可以使用arguments对象访问参数

d.函数不能重载

<html>  
    <!--函数的使用-->  
    <head>  
        <script>  
            function add(a1, a2){  
                return a1+a2;  
            }  
            function test(){  
                var sum = add(1, 1);  
                alert(sum);  
            }  
            function test2(){  
            //  alert(typeof add);  
                alert(add instanceof Function);  //函数是Function类型的实例  
                var f2 = add;           //存放的是对象的地址  
                add = null;              //add指向空  
                var sum = f2(1, 1);         //等价于 add(1, 1);  
                alert(sum);  
            }  
            function add2(arg1, arg2){  
                //return  arg1 + arg2;  
                return arguments[0]+arguments[1];  
            }  
            function add3(arg1, arg2){  //首先指向一个对象  
                return arg1+arg2+100;  
            }  
            function add3(){    //指向了另一个对象  
                return arguments[0]+arguments[1];  
            }  
            function test3(){  
                //var sum = add2(1);         //结果为NaN,因为arg2是undifined  
                //var sum(1, 1, 1);    //结果为2  
                //var sum=add(1, 1);  
                //var sum = add2(1, 1, 1);  
                var sum = add3(1, 1);  
                alert(sum);  
            }  
        </script>  
    </head>  
    <body>  
        <input type="button" value="click me" onclick="test3()"/>  
    </body>  
</html>
Salin selepas log masuk

其他Object类型请看下一篇

以上就是 小强的HTML5移动开发之路(28)—— JavaScript回顾3的内容,更多相关内容请关注PHP中文网(www.php.cn)!


Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan