首页 web前端 html教程 小强的HTML5移动开发之路(28)—— JavaScript回顾3

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

Feb 04, 2017 pm 02:20 PM

一、基本数据类型

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>
登录后复制

测试二: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>
登录后复制

测试三: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);  
}
登录后复制

正则

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

查找

function f6(){  
    var str1="sdf1223asdfasf23423";  
    var reg=/[0-9]+/;  
    //alert(typeof reg);  
    alert(reg instanceof RegExp);  
    var index = str1.search(reg);  
    alert(index);  
}
登录后复制

替换

function f7(){  
    var str1="sdf444asdfadf4423";  
    var reg=/[0-9]+/g;  
    var str2 = str1.replace(reg,&#39;888&#39;);  
    alert(str2);  
}
登录后复制

二、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>
登录后复制

数组中的一些函数

<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>
登录后复制

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>
登录后复制

其他Object类型请看下一篇

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


本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

HTML 中的表格边框 HTML 中的表格边框 Sep 04, 2024 pm 04:49 PM

HTML 表格边框指南。在这里,我们以 HTML 中的表格边框为例,讨论定义表格边框的多种方法。

HTML 中的嵌套表 HTML 中的嵌套表 Sep 04, 2024 pm 04:49 PM

这是 HTML 中嵌套表的指南。这里我们讨论如何在表中创建表以及相应的示例。

HTML 左边距 HTML 左边距 Sep 04, 2024 pm 04:48 PM

HTML 左边距指南。在这里,我们讨论 HTML margin-left 的简要概述及其示例及其代码实现。

HTML 表格布局 HTML 表格布局 Sep 04, 2024 pm 04:54 PM

HTML 表格布局指南。在这里,我们详细讨论 HTML 表格布局的值以及示例和输出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在这里我们还分别讨论了 HTML 有序列表和类型的介绍以及它们的示例

在 HTML 中移动文本 在 HTML 中移动文本 Sep 04, 2024 pm 04:45 PM

HTML 中的文本移动指南。在这里我们讨论一下marquee标签如何使用语法和实现示例。

HTML 输入占位符 HTML 输入占位符 Sep 04, 2024 pm 04:54 PM

HTML 输入占位符指南。在这里,我们讨论 HTML 输入占位符的示例以及代码和输出。

HTML onclick 按钮 HTML onclick 按钮 Sep 04, 2024 pm 04:49 PM

HTML onclick 按钮指南。这里我们分别讨论它们的介绍、工作原理、示例以及各个事件中的onclick事件。

See all articles