Javascript数组与函数

一、数组(Array)

1.1我们之所以要用到数组可以放很多的数据,好比将很多的数据放入到盒子中,用到就可以取出来、

二、创建数组的方式

2.1 使用Array构造函数

	<script type="text/javascript">
		//通过Array()构造函数
		var arr1=new Array();//创建一个空数组
		var arr2=new Array(10);//创建一个长度为20的数组
		var arr3=new Array("姓名","casf",100);
		console.log(arr1);
		console.log(arr2);
		console.log(arr3);		
	</script>

2.2 使用数组字面量

	<script type="text/javascript">
		var arr1=[];//创建空数组
		var arr2=[40,"30",true];
		console.log(arr1);		
		console.log(arr2);			
	</script>

首先定义数组有两种方式

	<script type="text/javascript">
		//定义一个数组
		var per=["张","男",18];
		console.log(per);
		var per1=[];
		per1[0]="李";
		per1[1]="女";
		per1[2]=16;
		console.log(per1);		
	</script>

数组中的数据放到栈中,栈是先进后出

队列是先进先出

每一个数组都会有索引,从0开始是数组的第一位

2.3.1规定数组的长度

	<script type="text/javascript">
		var arr=[123,"fdsf",324,23,324];
		arr.length=100;
		console.log(arr);
		
		var arr1=[123,"fdsf",324,23,324];		
		console.log(arr1.length);
	</script>

2.3.2根据索引取出数据

	<script type="text/javascript">
		var arr=[123,"fdsf",324,23,324];
		console.log(arr);
		console.log(arr[0]);
		console.log(arr[arr.length]);//undefined  因为arr.length为5二索引是0到4
		console.log(arr[arr.length-1]);//324	
	</script>

练习一:定义一个数组,往数组中存入个人信息并输出

	<script type="text/javascript">
		//定义一个数组,往数组中存入个人信息并输出
		var num=[1,2,3,4,5,6,7];
		for(var i=0;i<num.length;i++){
			var item=num[i];
			console.log(item);
		}
	</script>

练习二:遍历数组将偶数找出

	<script type="text/javascript">
		//定义一个数组,往数组中存入个人信息并输出
		var num=[1,2,3,4,5,6,7];
		for(var i=0;i<num.length;i++){
			var item=num[i];
			console.log(item);
		}
	</script>

练习三:求一数组中最大值最小值

	<script type="text/javascript">
		//求一数组中最大值最小值
		var num=[23,45,566,768,434,234,665,4,67,-67];
		var max=num[0];
		var min=num[0];//最大值,最小值
		var maxsy,minsy;//最大索引,最小索引
		for(var i =1;i<num.length;i++){
			//如果数组中的元素大于我们定义的初始值
			if(num[i]>max){
				//把这个元素赋值给最大值,并把索引改变
				max=num[i];
				maxsy=i;
			}
			if(num[i]<min){
				min=num[i];
				minsy=i;
			}
			
		}
		console.log(max);
		console.log(min);
		console.log(maxsy);
		console.log(minsy);
	</script>

练习四:数组中值为零的去掉不为零存入到一个新数组中

	<script type="text/javascript">
		//数组中值为零的去掉不为零存入到一个新数组中
		var num=["战三",434,44,23,0,33,5423,0,0,24,35,12,2,0,6,4,0];
		var newnum=[];
		//遍历数组
		for(var i=0;i<num.length;i++){
			if(num[i]!==0){
				newnum[newnum.length]=num[i];
			}
		}
		console.log(newnum);
	</script>

二、函数的划分

按参数个数                           有参函数

                                            无参函数

按返回值                              有返回值函数

                                            无返回值函数

按编写函数对象划分              系统函数

                                            自定义函数

三、函数基本定义:函数时完成特定功能的一段代码,也就是可以重复执行的代码块,如

Mathfloor(),    Mathrandem()

作用:将经常调用的代码,封装起来,需要时调用就行了

3.1 定义函数

function  函数名(参数1,参数2,.......){

            函数体

}

函数名();

下面我就来写一个最简单的函数调用

        <script type="text/javascript">
		//定义函数输出10
		function log (){
			console.log(10);
		}
		alert(000);
		debugger;//断点
		//调用函数
		log();
	</script>

3.2 函数的声明

3.2.1 函数直接声明方式,2,函数表达式声明方式,3,使用function构造函数(封装框架时会用到)

        <script type="text/javascript">
		//1、函数声明方式 
		function log (){
			console.log(10);
		}
		//调用函数
		log();
		//2、函数表达式声明方式
		var add=function(){
			console.log(1+3);
		}
		add();
		//3、使用function构造函数
		var add2=new Function(console.log(5+3));
		
	</script>

3.2.2 函数直接声明与表达式声明的方式不同

函数直接声明可以先将当前作用域的函数声明提到整个作用域的坐前面,而函数表达式申明不行,

        <script type="text/javascript">
		console.log(sum(10,20));
		//函数直接声明
		function sum(num1,num2){
			return num1+num2;
		}
		
	</script>
        <script type="text/javascript">
		//函数表达式声明不能,报错
		console.log(add(20,30));
		var add=function (num1,num2){
			return num1+num2;
		}
	</script>


3.3 函数的参数有两种(形参和实参)形参就是给实参实际站位的

例如,a,b 就是形参,调用函数时(实参)传入的值为实参,

练习一:求两个数的和

        <script type="text/javascript">
		function add(a,b){
			console.log(a+b);
		}
		add(1,2);//3
	</script>

*注意:在其他的语言中实参的个数必须和形参的个数形同,而在js中不会报错,它会将实参从前往后一一对应到形参,多的无效

拓展:求多个数的和

        <script type="text/javascript">
		//求多个数的和
		function sum(numArr){
			var num=0;
			for(var i=0;i<numArr.length;i++){
				num+=numArr[i];
			}
			console.log(num);
		}
		
		sum([1,2,3]);
	</script>

3.4 arguments对象

简单的利用 arguments对象输出数组

<script type="text/javascript">
		//arguments对象
		function sum(){
			console.log(arguments);//输出实参的个数
		}
		sum(1,2,3);//输出类似数组其实不是数组的伪数组
	</script>

arguments对象中还有一个callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数和

	<script type="text/javascript">
		function showcallee() {
			var a = '这是a';
			var b = '这是b';
			var c = a + b;

			console.log(arguments.callee);
			return c; 
		}
		showcallee();
	</script>


利用arguments对象求多个数的和

        <script type="text/javascript">
		//arguments对象
		function sum(){
			var num=0;
			for(var i=0;i<arguments.length;i++){
				num+=arguments[i];
			}
			console.log(num);
			console.log(arguments.length);//输出实参的个数
			console.log(sum.length);//输出形参的个数
			
		}
		sum(1,2,3);//输出类似数组其实不是数组的伪数组
	</script>

3.5 函数返回值return

当一个函数被调用,通常会从函数的开始执行到结束,如果想提前结束该函数的执行可以用return语句,return语句后面所有语句都将不会执行,一般return语句返回结果,

        <script type="text/javascript">
		function sum(){
			console.log(1);//只输出1
			return(10);//返回最终功能性的函数值
			console.log(2);//不会输出2
		}
		sum();
		console.log(sum());//undefined		
	</script>

*注意:1、如果函数使用return语句,那么跟在return后面的值就成了函数的返回值

            2、如果函数使用return语句但是后面没有值,那么函数返回undefined;

            3、推荐要么始终有有效的返回值,要么不适用

练习一:求数字是奇数还是偶数

<script type="text/javascript">
		//请写出一个数是不是偶数
		function os(num){
			if(num%2===0){
				return "偶数";
			}
			else{
				return "奇数";
			}
		}
		console.log(os(7));
	</script>

练习二:请写出Mathmin(x,y)函数

        <script type="text/javascript">
		//请写出Math.min(x,y)的函数
		console.log(Math.min(1,2));
	</script>
        <script type="text/javascript">
		function min(a,b){
			if(a>b){
				return b;
				
			}
			else{
				return a;
			}
		}
		console.log(min(11,2));
	</script>

四、匿名函数

4.1 用在绑定事件的时候

运行时点击任意位置执行点击事件

        <script type="text/javascript">
		document.onclick=function(){
			alert(1);
		}
	</script>

4.2 定时器

        <script type="text/javascript">
		//定时器
		setInterval (function(){
			console.log(111);
		},1000);
	</script>

4.3 自调用的函数(闭包)在一个闭包中放匿名函数

        <script type="text/javascript">
		(function() {
			alert("hello")
		})();
	</script>

五、回调函数

回调函数就是通过函数调用函数,如果你把函数的指针作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数,一般用于递归中(也就是自己调用自己)。

练习:用回调函数做一个计算器

	<script type="text/javascript">
		//简单的计算器
		function fangf(num1,num2,huidiao){
			return huidiao(num1,num2);
		}
		//加减乘除方法
		function jiafa(a,b){
			return a+b;
		}
		function jianf(a,b){
			return a-b;
		}
		function chengf(a,b){
			return a*b;
		}
		function chufa(a,b){
			return a/b;
		}
		console.log(fangf(10,20,jiafa));
		console.log(fangf(10,20,jianf));
		console.log(fangf(10,20,chengf));
		console.log(fangf(10,20,chufa));
	</script>

练习二:求fibonacci的第n个数  1,1,2,3,5,8,13,21,...

	<script type="text/javascript">
		//求fibonacci的第n个数
		//1,1,2,3,5,8,13,21,...
		function fang(n){
			if(n===1||n===2){
				return 1;
			}
			else{
				return fang(n-1)+fang(n-2)
			}
			
		}
		console.log(fang(8));
	</script>

练习二:求n个数相加1+2+3+.....

	<script type="text/javascript">
		//求n个数相加1+2+3+.....
		function sum(n){
			if(1===n){
				return 1;
			}
			else{
				return n+sum(n-1);
			}
		}
		console.log(sum(100));
	</script>

练习三:从前有座山,山里有个庙...

	<script type="text/javascript">
		//从前有座山,山里有个庙...
		var i =100;
		function fangf(){
			i--;
			//递归的结束条件
			if(i>=10){
				console.log("从前有座山,山里有个庙"+i);
				//递归的调用
				fangf();
			}
		}
		fangf();
	</script>

六、变量的作用域

6.1 块级作用域

在其他的语言中,任何作用域中的语句都属于一个块,在这之中定义的所有变量在代码块外是不能访问的,但是js可以访问

        <script type="text/javascript">
		{
			var a=1;
			
		}
		console.log(a);
	</script>

6.2 全局变量和局域变量

	<script type="text/javascript">
		var b=2;//全局变量
		{
			var a=1;//全局变量
			
		}
		function sum(){
			var c=3;//局域变量
			console.log(c);
			
		}
		console.log(a);
		console.log(b);
		sum();
		//console.log(c);会报错因为局域变量在外部不能直接访问
	</script>
练习一:
	<script type="text/javascript">
		var color = "yellow";
		function getcolor() {
			var anothercolor = "red";

			function swapcolor() {
				var tmpcolor = color;//yellow
				color = anothercolor;//red
				anothercolor = tmpcolor;//yellow
			}
			swapcolor();
		}
		getcolor();
		console.log(color);//red
	</script>

输出red

练习二:

	<script type="text/javascript">
		var num=10;
		fun();
		function fun(){
			console.log(num);
			var num=30;
		}//输出undefined
	</script>

首先我们进入到fun()方法中,首先输出num的时候会默认定义一个num,相当于如下代码所以为undefined

	<script type="text/javascript">
		var num=10;
		fun();
		function fun(){
			var num;
			console.log(num);
//			var num=30;
		}//输出undefined
	</script>

练习三

	<script type="text/javascript">
		var a=18;
		fun();
		function fun(){
			var b=2;
			console.log(a);
			console.log(b);
			var a="123";			
		}//输出undefined和2
	</script>

练习四:

<script type="text/javascript">
		fun();
		console.log(c);//输出9
		console.log(b);//输出9
		console.log(a);//报错

		function fun() {
			var a = b = c = 9;
			console.log(a);//输出9
			console.log(b);//输出9
			console.log(c);//输出9
		}
	</script>




















猜你喜欢

转载自blog.csdn.net/xm_w_xm/article/details/80154138