JavaScript 函数总结

一、函数

1.函数的概念

函数：就是封装一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用

2.函数的使用

2.1 声明、调用函数

函数的使用：声明函数、调用函数

/*1.声明函数
function 函数名(){
	//函数体
}*/
function sayHi(){
	console.log('hi~~');
}
//(1) function 是声明函数的关键字 必须小写
//(2) 函数是做某件事情，函数名一般是动词 sayHi
//(3) 函数不调用，自己不执行

/*2.调用函数
函数名();*/
sayHi();

2.2 函数的封装

函数的封装：把一个或者多个功能通过函数的方式封装起来，对外值提供一个简单的函数接口

3.函数的参数

3.1 形参和实参

参数	说明
形参	形式上的参数 函数定义的时候传递的参数 当然并不知道是什么
实参	实际上的参数 函数调用的时候传递的参数 实参是传递给形参的

参数的作用：在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去

//1. 函数可以重复相同的代码
function cook(){  
	console.log('大笨蛋')
}
cook(); 
cook(); 

//2.可以利用函数的参数实现函数重复不同的代码
function 函数名(形参1,形参2...){  //在声明函数的小括号里面是形参（形式上的参数）
	
}
函数名(实参1,实参2...);  //在函数调用的小括号里面是实参（实际的参数）

//3.形参和实参的执行过程
function cook(aru){  //形参是接受实参的 aru='你是大笨蛋' 形参类似于一个变量
	console.log(aru)
}
cook('你是大笨蛋'); 
cook('我不是'); 

//4.函数的参数可以有，也可以没有个数，不限

3.2 形参和实参个数不匹配问题

//函数形参实参个数匹配
function getSum(num1,num2){  
	console.log(num1+num2)
}
//1.如果形参和实参个数一致 则正常输出结果
getSum(1,2);  //3
//2.如果实参个数多于形参 会取形参的个数
getSum(1,2,3);  //3
//3.如果实参个数小于形参 多于的形参定义为undefined 最终的结果就是NaN
//形参可以看做是不同声明的变量 num2是一个变量但没有接受值，结果就是undefined
getSum(1);  //NaN
//建议：尽量让实参的个数和形参相匹配

3.4 小结

• 函数可以带参数也可以不带参数
• 声明函数的时候，函数名括号里面的是形参，形参的默认值是undefined
• 调用函数的时候，函数名括号里面的是实参
• 多个参数中间用逗号分隔
• 形参个数可以和实参个数不匹配，但结果不可预计，尽量要匹配

4.函数的返回值

4.1 return 语句

//函数的返回值格式
function 函数名(){  
	return 需要返回的结果；
}
函数名();  
//1.函数只是实现某种功能，最终结果需要返回给函数的调用者(函数名()) 通过return实现的
//2.只要函数遇到return 就把后面的结果 返回给函数的调用者  函数名()=return后面的结果

function getResult(){  
	return 666;
}
getResult();  //getResult()=666
console.log(getResult()); //666

function cook(aru){  
	return aru;
}
cook('你是大笨蛋'); 
console.log(cook('你是大笨蛋'));  //你是大笨蛋

//求任意两个数的和
function getSum(num1,num2){  
	return num1+num2;
}
getSum(1,2); 
console.log(getSum(1,2)); //3

4.2 return 终止函数

return语句之后的代码不被执行

//函数返回值注意事项
//1.return 终止函数
function getSum(num1,num2){  
	return num1+num2;  //return 后面的代码不会被执行
	alert('我是不会被执行的哦！')
}
console.log(getSum(1,2)); 

4.3 return 的返回值

return只能返回一个值。如果用逗号隔开多个值，以最后一个为准

//函数返回值注意事项
//1.return 终止函数
function getSum(num1,num2){  
	return num1+num2;  //return 后面的代码不会被执行
	alert('我是不会被执行的哦！')
}
console.log(getSum(1,2)); 
//2.return 只能返回一个值
function fn(num1,num2){  
	return num1,num2;  //返回的结果是最后一个值
}
console.log(fn(1,2)); //2
//3.求任意两个数的加减乘除结果
function getResult(num1,num2){  
	return [num1+num2,num1-num2,num1*num2,num1/num2];  //返回的结果是最后一个值
}
var re=getResult(1,2); //返回的是一个数组
console.log(re);  //[3,-1,2,0.5]

4.4 函数没有return 返回undefined

函数都是由返回值的
1.如果有return则返回return后面的值
1.如果没有return则返回undefined

//函数返回值注意事项
//1.return 终止函数
function getSum(num1,num2){  
	return num1+num2;  //return 后面的代码不会被执行
	alert('我是不会被执行的哦！')
}
console.log(getSum(1,2)); 
//2.return 只能返回一个值
function fn(num1,num2){  
	return num1,num2;  //返回的结果是最后一个值
}
console.log(fn(1,2)); //2
//3.求任意两个数的加减乘除结果
function getResult(num1,num2){  
	return [num1+num2,num1-num2,num1*num2,num1/num2];  //返回的结果是最后一个值
}
var re=getResult(1,2); //返回的是一个数组
console.log(re);  //[3,-1,2,0.5]
//4.函数如果有return，则返回的是return后面的值，如果没有return，则返回undefined
function fun1(){  
	return 666;  
}
console.log(fun1());  //返回666
function fun2(){  
	  
}
console.log(fun2());  //返回undefined

4.5 break，continue，return的区别

• break：结束当前的循环体（如for、while）
• continue：跳出本次循环，继续执行下次循环（如for、while）
• return：不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码

5.arguments的使用

当我们不确定有多少个参数传递的时候，可以用arguments来获取，在JavaScirpt中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参

//arguments的使用  只有函数才有arguments对象 而且是每个函数都内置好了这个arguments
function fn(){  
	//console.log(arguments); //里面存储了所有传递过来的实参  [1,2,3]
	//console.log(arguments.length); //3
	//console.log(arguments[2]);  //3
	//我们可以按照数组的方式遍历arguments
	for (var i = 0;i < arguments.length;i++){
		console.log(arguments[i]);
	}
}
fn(1,2,3); 
fn(1,2,3,4,5);
//伪数组 并不是真正意义上的数组
//1.具有数组的length属性
//2.按照索引的方式进行存储的
//3.它没有真正数组的一些方法pop() push()等等

6.案例

//利用函数求任意个数的最大值
function getMax(){  
	var max = arguments[0];
	for (var i = 1;i < arguments.length;i++){
		if (arguments[i]>max){
			max = arguments[i];
		}
	}
	return max;
}
console.log(getMax(1,2,3));
console.log(getMax(11,2,34,5,100,50));

//利用函数翻转任意数组  reverse翻转
function reverse(arr){  
	var newArr = [0];
	for (var i = arr.length-1;i >= 0;i--){
		newArr[newArr.length] = arr[i];
	}
	return newArr;
}
var arr1 = reverse([1,3,4,6,7])
console.log(arr1);  //[7,6,4,3,1]
var arr2 = reverse(['red','pink','blue'])
console.log(arr2);  //['blue','pink','red']

//利用函数冒泡排序 sort排序
function sort(arr){  
	for (var i = 0;i <arr.length-1;i++){
		for (var j = 0;j <arr.length-i-1;j++){
			if (arr[j]>arr[j+1]{
				var temp = arr[j];
				arr[j] = arr[j+1];
				arr[j+1] = temp;
		    }
		}
	}
	return arr;
}
var arr1 = sort([1,4,2,9])
console.log(arr1);  //[1,2,4,9]

//利用函数判断闰年
function isRunYear(year){  
	//如果是闰年我们返回true，否则返回false
	var flag = false;
	if (year%4 == 0 && year % 100 !=0 || year % 400 == 0){
		flag = true;
	}
	return flag;
}
console.log(isRunYear(2000));  //true 闰年

//用户输入年份，输出当前年份2月份的天数
function backDay(){  
	var year = prompt('请输入年份:');
	if(isRunYear(year)){
		alert('当前年份是闰年2月份有29天');
	} else {
		alert('当前年份是平年2月份有28天');
	}
}
backDay();  

//判断是否为闰年的函数
function isRunYear(year){  //调用函数需加小括号
	//如果是闰年我们返回true，否则返回false
	var flag = false;
	if (year%4 == 0 && year % 100 !=0 || year % 400 == 0){
		flag = true;
	}
	return flag;
}

7.函数可以调用另外一个函数

//函数是可以相互调用的
function fn1(){  
	console.log(111); 
	fn2();  //在fn1函数里面调用了fn2函数
	console.log('fn1'); 
}

function fn2(){  
	console.log(222); 
	console.log('fn2'); 
}
fn1();
//111 222 fn2 fn1

8.函数的两种声明方式

//函数的2中声明方式
//1.利用函数关键字自定义函数（命名函数）
function fn(){  
	
}
fn()
//2.函数表达式（匿名函数）
var 变量名 = function (){};
var fun = function (aru){
	console.log('我是函数表达式');   //我是函数表达式
	console.log(aru);   //你是最棒的
};
fun('你是最棒的');
//（1）fun是变量名  不是函数名
//（2）函数表达式声明方式跟声明变量差不多，只不过变量存的是值，而函数表达式存的是函数
//（2）函数表达式也可以进行传递参数