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）函數表達式也可以進行傳遞參數