JavaScript函數

  • 10
  • 0
  • JS
  • 2020-10-01

自定義函數的方法

  • 利用function指令定義
  • 利用Funtion建構子定義
  • 利用函數常值定義
  • 利用箭頭函數定義

function指令定義

語法

function 函數名稱(參數1,參數2){
  敘述句;
  return 傳回值;
}

實作練習

function getSum(x,y){//函數的參數稱為假參數
		var sum=x+y;
		return sum;
	}
	var sum=getSum(2,2);//呼叫端的參數稱為真參數
	console.log(sum);//4

Function建構子定義

語法

var 變數名稱=new Function(參數,函數本體);

實作練習

//改寫function指令定義
var getSum=new Function('x','y','return x+y');
	console.log(getSum(2,2));//4

依照參考書內容的建議,若非必要請以使用function指令定義函數為優先選擇,程式會較容易閱讀


利用函數常值定義

語法

var 函數變數=function(參數1,參數2){函數本體}//這裡的function稱為匿名函數

實作練習

//改寫function指令定義
var getSum=function(x,y){
		return x+y;
	}
	console.log(getSum(3,3));//9

箭頭函數

箭頭函數是ES6新增的方法

語法

(參數)=>{函數本體}

實作練習

//改寫函數常值定義
var getSum=(x,y)=>{//即使沒有參數()也要保留
		return x+y;
	}
	console.log(getSum(4,3));
//如果只有一個參數可以省略()
//如果是單行敘述可以省略{}
//假如處理後的值就是回傳值,return也可以省略
var getSum=x=>x+x;

定義函數四個注意事項

  1. return指令後不可換行
  2. 函數也是一種資料型別
  3. function指令是靜態結構(可在呼叫後定義)
  4. 函數常值/Function建構子在執行時才會解析(要在呼叫前定義)

變數範圍

全域變數

可在整個程式中參考

在函數外宣告

區域變數

只能在定義的函數中參考

在函數內宣告

區域變數要在函數開始時就先宣告否則會出現undefined


參數的寫法

不驗證參數個數

function show(val){
		console.log(val);
	}
	show();//這裡會是undefined
	show('ABC');//顯示ABC
	show('ABC','DEF');//因為假參數只有一個,所以會忽略第二個參數,只顯示ABC

驗證參數個數

function show(val){
		if(arguments.length!=1){//arguments是負責管理參數的物件,只能在函數內使用
			alert('參數數量錯誤');
		}else{
			console.log(val);
		}
	}
	show();
	show('ABC');
	show('ABC','DEF');

設定參數的預設值

function addNumber(x,y){
		if(x==undefined){x=1;}
		if(y==undefined){y=1;}
		return x+y;
	}
	console.log(addNumber(1));

具名參數

function addNumber(args){
		if(args.x==undefined){args.x=1;}
		if(args.y==undefined){args.y=1;}
		return args.x+args.y;
	}
	console.log(addNumber({
		x:2
	}));//結果會得到3

ES6的參數寫法

設定參數預設值

function addNumber(x=1,y=1){//指派的預設值不可為 null/false/0,否則不會套用
		return x+y;
	}
	console.log(addNumber(5));//得到6
//如果不是每個參數都有預設值,有預設值的參數要放在最後
function addNumber(x=1,y){...}//如果呼叫端只傳一個參數會造成錯誤

定義可變長度參數

function addNumber(...val){//可變長度參數是在前面加上...,傳入的任意參數都將記錄在陣列中
		let result=0;
		for(let num of val){
			result+=num;
		}
		return result;
	}
	console.log(addNumber(1,2,9,8,7));

具名參數

function addNumber({x=2,y=3}){
		return x+y;
	}
	console.log(addNumber({x:1}));//因為只有傳入x參數所以得到4

函數呼叫與回傳值

多回傳值指派多個變數

function getMaxMin(...val){
		return [Math.max(...val),Math.min(...val)];
	}
	let[x,y]=getMaxMin(10,20,30,40,50);//將回傳的最大與最小值分別指派給x,y
	console.log(x);//50
	console.log(y);//10

遞迴函數

自己呼叫自己的函數

function recFunction(n){
		if(n!=0){
			return n*recFunction(n-1)
		}
		return 1;
	}
	console.log(recFunction(10));

函數當參數(高階函數)

function argFunction(data,f){//f參數就是show函數
		for(var key in data){
			f(key,data[key])
		}
	}
	function show(key,val){
		console.log(key+':'+val);
	}
	var ary=[1,2,3,4,5,6,7];
	argFunction(ary,show);//將show函數當成參數傳遞

匿名函數

通常使用在當作參數的函數(Callback),使用完系統就回收

function argFunction(data,f){
		for(var key in data){
			f(key,data[key])
		}
	}
	/*function show(key,val){
		console.log(key+':'+val);
	}*/
	var ary=[1,2,3,4,5,6,7];
	argFunction(ary,function(key,val){
		console.log(key+':'+val);
	});//使用匿名函數改寫