现在的位置: 首页 > 综合 > 正文

JavaScript回顾(3)

2018年05月20日 ⁄ 综合 ⁄ 共 8747字 ⁄ 字号 小 中 大 ⁄ 评论关闭

一、基本数据类型

number:数字类型

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

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

null：空类型

undefined:未定义类型

测试一：

  1. <html>  
  2.     <!--基本类型测试-->  
  3.     <head>  
  4.         <script>  
  5.             function f1(){   //number类型  
  6.         /*有返回值时也不能function void f1(){}*/  
  7.                 alert('hello');  
  8.     /*alert(); 弹出消息框*/  
  9.                 alert('hehe');  
  10.                 var i=100;  
  11.     //js当中字符串可用单引号也可用双引号  
  12.                 i='hello';  
  13.         //typeof是一个运算符，可以返回变量实际存放的数据的类型  
  14.                 alert(typeof i);  
  15.     /*js是弱类型语言 不能： number i=100; 不能在声明时指明其类型，在运行时才能确定*/  
  16.             }  
  17.             function f2(){   //string类型  
  18.                 var str1='hello';  
  19.                 var str2='hello';  
  20.                 if(str1==str2){  
  21.                     alert("str1==str2");  
  22.                 }else{  
  23.                     alert("str1!=str2");  
  24.                 }  
  25.                 var str3='100';  
  26.                 var i=100;  
  27.                 if(str3==i){ //两个＝号，进行类型转换  
  28.                     alert("str3==i");  
  29.                 }else{  
  30.                     alert("str3!=i");  
  31.                 }  
  32.                 if(str3===i){ //三个=号，不进行类型转换  
  33.                     alert("str3==i");  
  34.                 }else{  
  35.                     alert("str3!=i");  
  36.                 }  
  37.             }  
  38.             function f3(){  //boolean类型  
  39.                 //布尔类型只有两个值：true/false;  
  40.                 var flag=true;  
  41.                 alert(typeof flag);  
  42.               //var str="abc";  
  43.                 var str=new Object();//创建一个对象,对象会转换为true;  
  44.                 var str=null; //转换为false;  
  45.                 var str;  //undefined 转换为false;  
  46.                 //强制转换，非空的字符串转换为true,非零的数字转换为true;  
  47.                 if(str){  
  48.                     alert('结果为真');  
  49.                 }else{  
  50.                     alert('结果为假');  
  51.                 }  
  52.             }  
  53.             function f4(){  //null类型  
  54.                 var obj=null;  
  55.             //null类型只有一个值——null;  
  56.             //输出的结果是Object  
  57.                 alert(typeof obj);  
  58.             }  
  59.             function f5(){ //undefined类型  
  60.                 var obj;  
  61.                 alert(typeof obj);  
  62.             }  
  63.         </script>   
  64.     </head>  
  65.     <body style="font-size:30px;">  
  66.         <input type="button" value="演示基本类型的使用"  
  67.         onclick="f1();"/>  
  68.     </body>  
  69. </html>  

测试二：parseInt

  1. <html><span style="white-space:pre">  </span>  
  2.     <head>  
  3.         <script>  
  4.         /*number--->string  
  5.           string---->number  
  6.         */  
  7.             function f1(){  //字符串变数字  
  8.         //      var str1='fsfs';     读出NaN  
  9.         //              var str1="1234fsfs";  可以读出1234  
  10.         //              var str1="fsfs1234";   不可以读出  
  11.         //              var str1="22323.08";  
  12.                 var str1='1234';  
  13.         //window.parseInt();  window可以省略  
  14.                 var n1=parseInt(str1);  
  15. //js浮点运算会有误差，先放大x倍，再缩小x倍  
  16.         //      var n2=parseFloat(str1);  
  17.         //undefined + 数字 ＝ NaN  
  18.                 alert(n1+100);  
  19.             }  
  20.             function f2(){  
  21.                 var n1=100;  
  22.         //number--->Number(对应的包装类型)  再调用toString();  
  23.                 var s1=n1.toString();  
  24.             //      var s1=n1+'';  
  25.             }  
  26.         </script>  
  27.     </head>  
  28.     <body>  
  29.         <input type="button" value="演示基本数据类型" onclick="f1();"/>  
  30.     </body>  
  31. </html>   

测试三：string的方法

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

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

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

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

lastIndexOf(str):

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

截取

  1. function f4(){ //string的方法  
  2.     var str1="abcdef";  
  3.     var str2=str1.substring(1,4);  
  4.     alert(str2);  
  5. }  

正则

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

查找

  1. function f6(){  
  2.     var str1="sdf1223asdfasf23423";  
  3.     var reg=/[0-9]+/;  
  4.     //alert(typeof reg);  
  5.     alert(reg instanceof RegExp);  
  6.     var index = str1.search(reg);  
  7.     alert(index);  
  8. }  

替换

  1. function f7(){  
  2.     var str1="sdf444asdfadf4423";  
  3.     var reg=/[0-9]+/g;  
  4.     var str2 = str1.replace(reg,'888');  
  5.     alert(str2);  
  6. }  

二、Object类型（数组、函数，其他的在下一篇中）

1、数组

js数组的长度可变

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

  1. <html>  
  2.     <head>  
  3.         <script>  
  4.             function f1(){  //创建数组的第一种方式  
  5.                 var arr=new Array();  //()可以省略不写  
  6.                 arr[0]=1;  
  7.                 arr[3]=2;  
  8.                 arr[5]='abc';  
  9.                 alert(arr.length);  
  10.                 alert(arr[1]);  
  11.                 alert(arr[3]);        
  12.             }  
  13.             function f2(){ //第二种方式  
  14.                 var arr=[];  
  15.                 arr[0]=1;  
  16.                 arr[3]=22;  
  17.                 var arr=[1,2,3,4,5,6];  
  18.                 arr[7]=11;  
  19.                 alert(arr.length);  
  20.             }  
  21.             function f3(){ //多维数组的创建  
  22.                 var arr = new Array();  
  23.                 arr[0]=[1,2,3,4,5];  
  24.                 arr[1]=[6,7,8,9,10,11,12,13];  
  25.                 arr[2]=[14,15,16,17,18,19];  
  26.                 for(var i=0;i<arr.length;i++){  
  27.                     for(j=0;j<arr[i].length;j++){  
  28.                         alert(arr[i][j]);  
  29.                     }  
  30.                 }  
  31.             }  
  32.             function f4(){ //数组常用的属性和方法  
  33.                 var arr=[11,22,33,44];  
  34.                 arr.length=2;  //数组的长度可以写,后面的被砍掉  
  35.                 alert(arr);  
  36.                 alert(typeof abc);  
  37.             }  
  38.         </script>  
  39.     </head>  
  40.     <body>  
  41.         <input type="button" value="数组的使用" onclick="f4()"/>  
  42.     </body>  
  43. </html>  

数组中的一些函数

  1. <html>  
  2.     <head>  
  3.         <script>  
  4.             function f1(){  
  5.                 var a1 = [1, 2, 3];  
  6.                 var str = a1.join(|);  
  7.                 alert(str);  
  8.             }  
  9.             function f2(){  
  10.                 var a1 = [1, 2, 3];  
  11.                  var a2 = [4, 5, 6];  
  12.                  var a3 = a1.concat(a2); //数组连接  
  13.                  alert(a3);  
  14.             }  
  15.             function f4(){  
  16.                 var a1 = [1, 2, 3];  
  17.                 var a2 = a1.reverse(); //是对原有数组翻转  
  18.                 alert(a2);  
  19.                 alert(a1);  //原数组变了  
  20.             }  
  21.             function f5(){  
  22.                 var a1 = [1, 2, 3, 4, 5, 6];  
  23.                 var a2 = a1.slice(2,4); //对数组截取  
  24.                 alert(a2);  
  25.                 alert(a1); //原数组没有变化  
  26.             }  
  27.             function f6(){  
  28.                 var a1 = [5, 1, 7, 2, 8];  
  29.                 var a2 = a1.sort(); //从小到大  
  30.                 alert(a2);  
  31.             }  
  32.             function f7(){  
  33.                 var a1 = [15, 111, 7, 22, 88];  
  34.                 var a2 = a1.sort(); //默认按照字典顺序排序  
  35.                 alert(a2);   
  36.             }  
  37.             function f8(){  
  38.                 var a1 = [15, 111, 7, 22, 88];  
  39.                 var a2 = a1.sort(function(t1, t2){  
  40.                     return t2-t1;  
  41.                 });   
  42.                 alert(a2);   
  43.             }  
  44.             function f9(){  //按照字符串长度排序  
  45.                 var a1 = ['abc', 'bb', 'casd', 'a'];  
  46.                 var a2 = a1.sort(function(t3, t4){  
  47.                     return t4.length-t3.length;  
  48.                 });   
  49.                 alert(a2);   
  50.             }  
  51.         </script>  
  52.     </head>  
  53.     <body>  
  54.         <input type="button" value="click me" onclick="f9()"/>  
  55.     </body>  
  56. </html>   

2、函数

定义一个函数

function 函数名(参数){

函数体

}

要注意的几个问题

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

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

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

d.函数不能重载

  1. <html>  
  2.     <!--函数的使用-->  
  3.     <head>  
  4.         <script>  
  5.             function add(a1, a2){  
  6.                 return a1+a2;  
  7.             }  
  8.             function test(){  
  9.                 var sum = add(1, 1);  
  10.                 alert(sum);  
  11.             }  
  12.             function test2(){  
  13.             //  alert(typeof add);  
  14.                 alert(add instanceof Function);  //函数是Function类型的实例  
  15.                 var f2 = add;           //存放的是对象的地址  
  16.                 add = null;              //add指向空  
  17.                 var sum = f2(1, 1);         //等价于 add(1, 1);  
  18.                 alert(sum);  
  19.             }  
  20.             function add2(arg1, arg2){  
  21.                 //return  arg1 + arg2;  
  22.                 return arguments[0]+arguments[1];  
  23.             }  
  24.             function add3(arg1, arg2){  //首先指向一个对象  
  25.                 return arg1+arg2+100;  
  26.             }  
  27.             function add3(){    //指向了另一个对象  
  28.                 return arguments[0]+arguments[1];  
  29.             }  
  30.             function test3(){  
  31.                 //var sum = add2(1);         //结果为NaN,因为arg2是undifined  
  32.                 //var sum(1, 1, 1);    //结果为2  
  33.                 //var sum=add(1, 1);  
  34.                 //var sum = add2(1, 1, 1);  
  35.                 var sum = add3(1, 1);  
  36.                 alert(sum);  
  37.             }  
  38.         </script>  
  39.     </head>  
  40.     <body>  
  41.         <input type="button" value="click me" onclick="test3()"/>  
  42.     </body>  
  43. </html>  

其他Object类型请看下一篇

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞