小強のHTML 5モバイル開発の道(28)-JavaScriptレビュー3

7412 ワード

一、基本データ型
number:数値タイプ
string:文字列(注意s小文字:stringは基本タイプ)
boolean:ブールタイプ//最初の3つに対応するパッケージクラスがあります
null:空のタイプ
undefined:未定義タイプ
テスト1:
<html>
	<!--      -->
	<head>
		<script>
			function f1(){   //number  
        /*        function void f1(){}*/
				alert('hello');
	/*alert();      */
				alert('hehe');
				var i=100;
	//js                
				i='hello';
        //typeof      ,                
				alert(typeof i);
	/*js         : number i=100;            ,        */
			}
			function f2(){   //string  
				var str1='hello';
				var str2='hello';
				if(str1==str2){
					alert("str1==str2");
				}else{
					alert("str1!=str2");
				}
				var str3='100';
				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('    ');
				}else{
					alert('    ');
				}
			}
			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>
テスト2:parseInt
<html>	
	<head>
		<script>
		/*number--->string
		  string---->number
		*/
			function f1(){  //      
		//		var str1='fsfs';       NaN
		//              var str1="1234fsfs";      1234
		//              var str1="fsfs1234";        
		//              var str1="22323.08";
				var str1='1234';
		//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+'';
			}
		</script>
	</head>
	<body>
		<input type="button" value="        " onclick="f1();"/>
	</body>
</html> 
テスト3: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,'888');
		alert(str2);
	}

二、Objectタイプ(配列、関数、その他は次編)
1、配列
js配列の長さ可変
js配列要素は任意です(異なるタイプのデータを混在させることができます)
<html>
	<head>
		<script>
			function f1(){  //          
				var arr=new Array();  //()      
				arr[0]=1;
				arr[3]=2;
				arr[5]='abc';
				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 = ['abc', 'bb', 'casd', 'a'];
				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> 
、関数
関数の定義
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类型请看下篇