Web---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>
 
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34928644/article/details/80694099
文章标签: JavaScript
想对作者说点什么? 我来说一句

asp过滤数组重复数据,函数.asp

2010年04月13日 1KB 下载

通过函数 返回数组

2012年08月20日 296B 下载

PHP100视频教程第一季6

2010年04月25日 14.5MB 下载

(第六讲) PHP数组的创建修改使用

2011年11月14日 14.54MB 下载

javascript控制语句函数数组ppt

2014年05月25日 751KB 下载

delphi 字符串、数组函数

2014年10月16日 34KB 下载

php函数总结大全

2014年06月23日 59KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭