Web---JavaScript---②数组与函数

最新推荐文章于 2024-07-04 18:25:41 发布

原创最新推荐文章于 2024-07-04 18:25:41 发布 · 222 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

4.Web 同时被 3 个专栏收录

47 篇文章

订阅专栏

Web

37 篇文章

订阅专栏

------③JavaScript

10 篇文章

订阅专栏

本文详细介绍了JavaScript中的数组和函数特性。包括数组的定义、操作、长度变化及元素类型的灵活性，函数的定义、调用细节、别名使用及动态创建方式。此外，还提供了数组与函数结合使用的实践案例。

数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS语言---数组演示</title>
		
		<script type="text/javascript">
			//JS中的数组非常重要，因为JS中只有一个容器---数组，它是Java中的数组与集合的综合
	     	//JS中的数组长度可变，元素类型任意
	     	
	     	///////数组定义方式1: 定义时直接赋初值////////
	     	function a1() {
	     		var arr = [1,2,3];  //※与Java不一样的地方1:  类型中没有"[]",数据是用"[]"封装   ,Java方式是: int[] arr={1,3,5}
	     		//alert( typeof(arr) ); //object
	     		alert( arr) ; //1,3,5  js中可以直接用数组名来输出它的内容
	     		var sum = arr[0] + arr[2]; //对数组元素的引用和Java是一样的
	     		alert( "arr[0]+arr[2]=" + sum ); //arr[0]+arr[2]=4
	     	}
	     	function a2() {
	     		var arr = [1,2,3];
	     		
	     		//※JS的数组有集合的功能,长度可以自动增长
	     		arr[5] = 7;
	     		alert( arr ); //1,2,3,,,7
	     		
	     		//可以用arr.length读取数组当前的长度
	     		alert( "变长后数组长度："+arr.length ); // 变长后数组长度：6
	     		alert( arr[4] ); //undefined
	     		
	     		//※JS的数组有集合的功能,元素类型可以任意
	     		arr[3] = "abc";
	     		arr[4] = 3.14;
	     		alert( arr );
	     	}
	     	function a3() {
	     		//可以先声明一个空数组，然后往里面不断赋值，因为JS中的数组长度是可变的
	     		var arr = [];
	     		
	     		arr[0] = 10;
	     		arr[2] = 4;
	     		arr[4] = true;
	     		arr[1] = "abc";
	     		arr[3] = "12.3";
	     		alert( arr );
	     	}

			 ///////数组定义方式2: 用new对象的方式创建////////
			function b1() {
				var arr = new Array(1,3); //等价于 var arr = [];
				arr[0] = 3.14;
				arr[1] = true;
				arr[2] = 10;
				arr[3] = "abc";
				alert( arr );
			}
			
			function b2 () {
				 /*
	    	                在创建时给参数:
	    	        1个参数时是长度，2个及以上参数为元素初始值
	    		 */
	    		var arr = new Array( 3 );
	    		alert( arr + "--数组长度:" + arr.length );
	    		var arr = new Array( 1, 2 );
	    		alert( arr + "--数组长度:" + arr.length );
			}
	     	
	     	function c() {
	     		//二维数组
	     		var arr = [];
	     		arr[0] = [1,false,3];
	     		arr[1] = [3.14,2];
	     		arr[2] = "abc1223"; 
	     		arr[3] = true;
	     		for ( var i = 0; i < arr.length; i++ ) {
	     			
     				for ( var j = 0; j < arr[i].length; j++ ) {
     					document.write( arr[i][j] +"  " );
	     			}
	     			document.write( "<br />" );
	     		}
	     		document.write( arr[3] +"  " );
	     	}
	     	
		</script>
		
	</head>
	<body>
		<input type="button"  value="定义方式1-演示1" onclick="a1();" />
		<input type="button"  value="定义方式1-演示2" onclick="a2();" />
		<input type="button"  value="定义方式1-演示3" onclick="a3();" />
		
		<input type="button"  value="定义方式2-演示1" onclick="b1();" />
		<input type="button"  value="定义方式2-演示2" onclick="b2();" />
		
		<input type="button"  value="演示二维数组" onclick="c();" />
		
	</body>
</html>

函数

定义函数格式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		   /* js中定义函数的格式:
			   function 函数名(参数列表){ //注意Java是“参数类型列表”
			            函数体;
			     [return 返回值;]
		   	   }
		   */
		   
		   //1 无参无返回值的函数
		   function a1(){
			   alert("aa...");
		   }
		
		   //2 有参有返回值
		   function add(a, b){
			   var s = a+b;
			   return s;
		   }
		   function a2(){
			   var ab = add(100,200);
			   alert("ab="+ ab );
		   }
		</script>
	</head>
	<body>
		<input type="button" value="演示1" onclick="a1();"> 
	    <input type="button" value="演示2" onclick="a2();"> 
	</body>
</html>

函数使用细节

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS语言演示---函数讲解2</title>
		<script type="text/javascript">
		   /* js函数的一些小细节---与Java不一样的地方:
			   1. 函数调用与参数
			   js中的函数不存在重载。定义了函数，只要通过该函数名就可以调用它，
			      调用不调用跟参数没有关系。参数匹配时，对应参数有数据传递时就接收，
			      没有就是undefined,多余的就不接收。
			   
			   js中的函数只以函数名来识别调用，跟参数没关系，参数只是用于传递数据。
			   
			       每个函数内部都有一个arguments[]用于接收并存储所有实参，
			       不管函数定义时的参数列表有没有  定义或接收。
			   */
		   function show(x,y){
			   alert(x+","+y);
		   }
		   function a1(){
			   show(1,8); //1,8
			   show(1); //1, undefined
			   show(1,2,3); //1,2
			   show("aa",0.6,3); //aa,0.6
		   }
		   
		   
		   function show2(x,y){
			   alert(x+","+y);
			   for(var i=0; i<arguments.length;i++){
				   document.write(arguments[i]+" ");
			   }
		   }
		   function a2(){
			   show2("aa", 0.6, 3, true); 
		   }
		   
		</script>
		
		<script type="text/javascript">
		 /* js函数的一些小细节---与Java不一样的地方:
		   2. 函数有别名
		             函数名只是函数对象的一个引用(变量)，
		             同一个函数对象可以有多个引用指向它(非声明时的名称就是别名)，
		             通过别名可以和原函数名一样访问该函数对象。
		   */
		   
		   function getNum(){
			 return 100;
		   }
		   
		   function b1(){
			   var v = getNum();
			 alert( v );
		   }
		   
		   function b2(){
			   //alert(getNum); //getNum.toString()
			   var aa=getNum;
			   //alert( aa ); //aa.toString()
			   alert( aa() ); //aa()和getNum()效果一样
		   }
		   
		</script>
	</head>
	<body>
		<input type="button" value="演示1-1" onclick="a1();"> 
	    <input type="button" value="演示1-2" onclick="a2();"> 
	  
	    <input type="button" value="演示2-1" onclick="b1();"> 
	    <input type="button" value="演示2-2" onclick="b2();"> 
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS语言演示---函数讲解3</title>
		<script type="text/javascript">
		   /* 可以用new的方式创建函数 ---动态函数，功能类似于Java中的类反射   */
		   function a1(){
			  var add = new Function("x,y","var sum; sum=x+y; return sum;");
			  var s = add(10,20);
			  alert("s="+s);
		   }
		   
		   
		   function a2(){
			   var p1 = document.getElementById("param").value;
			   var p2 = document.getElementById("fun1").value;
			   var f = new Function(p1,p2);
			   alert( f(10,20) );
		   }
		   
		   //JS的函数内部可以再定义函数，而Java不允许这样
		   //匿名函数
		   function a3(){
			   
			   var abc = function(a,b){
				   return a*b;
			   };
			   /*上面的代码等价于:
				 function ff(a,b){
				     return a*b;
			     }
			     var abc = ff;
			   */
			   
			   alert( abc(2,5) ); //通过别名调用匿名函数
			   
		   }
		   
		   function a4(){
			   /*以后事件注册时写成下面形式
			    btnObj.onclick=function(){
				      函数体.....
			    };
			   */
			   var btnObj = document.getElementById("btn1");
			   btnObj.onclick=function(){
				   alert("aaaa....");
			   };
			   alert("功能添加完毕!");
		   }
		   
		</script>
		
	</head>
	<body>
	   <input type="button" value="演示1" onclick="a1();"> <br/><br/>
	   
	   参数列表:<input type="text" id="param"/> <br/>
	   函数体:<input type="text" id="fun1"/> <br/>
	 <input type="button" value="演示2" onclick="a2();"> <br/><br/>
	 
	 <input type="button" value="匿名函数" onclick="a3();"> <br/><br/>
	 <input type="button" value="没功能" id="btn1">   
	 <input type="button" value="以后注册事件响应时常用匿名函数--给btn1注入功能" onclick="a4();"> <br/><br/>
	 
	</body>
</html>

数组与函数结合练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			function getMax( arr ){
				if ( typeof( arr ) == "undefined" ) {
					return undefined;
				}
				var max;
				if( arr.length > 0 ) {
					max = arr[0];
					for( var i = 1; i < arr.length; i++ ) {
						if ( arr[i] > max ){
							max = arr[i];
						}
					}
				}
				return max;
			}
			
			function sortArray( arr ){
				if ( typeof( arr ) == "undefined" ) {
					return undefined;
				}
				for ( var i = 0; i < arr.length - 1 ; i++ ) {
					for ( var j = i + 1; j < arr.length ; j++ ){
						if ( arr[i] > arr[j] ) {
							swap( arr, i , j );
						}
					}
				}
				alert( arr );
			}
			function swap( arr, x, y ){
				if ( typeof( arr ) == "undefined" ) {
					return ;
				}
				var temp = arr[x];
				arr[x] = arr[y];
				arr[y] = temp;
			}
			
			function searchElement( arr, val ){
				if ( typeof( arr ) == "undefined" ) {
					return undefined;
				}
				for ( var i = 0; i < arr.length; i++ ) {
					if( arr[i] == val ){
						return i;
					}
				}
				return -1;
			}
			
			function binarySearch( arr, val ){
				if ( typeof( arr ) == "undefined" ) {
					return undefined;
				}
				var left = 0;
				var right = arr.length - 1;
				var mid = Math.round( ( left + right ) / 2 - 0.5 );
				while ( left <= right ){
					if ( arr[mid] > val ){
						right = mid - 1;
					} else if ( arr[mid] < val ) {
						left = mid + 1;
					} else {
						return mid;
					}
					mid = Math.round( ( left + right ) / 2 - 0.5 );
				}
				
				return -1;
				
			}
			
			function reverseArray( arr ){
				if ( typeof( arr ) == "undefined" ) {
					return undefined;
				}
				var left = 0;
				var right = arr.length - 1;
				while ( left < right ) {
					swap( arr, left, right );
					left++;
					right--;
				}
			}
			
			var arr = [ 1,-3,10,2.14,6666,-77777 ];
			
			
			alert( getMax(arr) );
			
			alert( searchElement( arr, -4 ) );
			
			reverseArray( arr );
			alert("反转后：" + arr );
			
			sortArray( arr );
			
			alert( binarySearch( arr, 10 ) );
			
		</script>
	</head>
	<body>
		 <pre>
	       	  写一些具有如下功能的函数: 
	         getMax(arr), sortArray(arr), 
	         searchElement(arr,val), binarySearch(arr,val)
	         reverseArray(arr) 数组内容反转
	 	</pre>
		
	</body>
</html>