iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
自我挑戰組

JavaScript老學徒筆記—馬步篇系列 第 18

【Day17】期間限定:函式的參數

函式會將參數傳入函式裡面,讓它們成為函式裡的變數,讓程式碼去做運算。參數只能在函式裡刷存在感(期間限定?),一旦函式執行完畢,就會被消失。(Mission Impossible音樂響起......)

arguments物件

一般的函式長成這個樣子:

const multiply = function funA(numA, numB){
	return numA + numB;
}
//呼叫multiply()函式
multiply(1,2)  //2

plus(1,2),小括號中的1跟2就是參數,傳到multiply這個函式,numA就是1,numB就是2,傳出來的值就是2。

JavaScript呼叫函式的時候,不會對函式的數量做檢查,超過函式小括號裡面函式數量的參數,沒有配對到的就會被以undefined定義。如果呼叫函式的時候,參數數量少於函式小括號裡面定義的數量,也會以undefined表示。

如果擔心呼叫函式的時候,傳入函式的參數少於函式定義的參數數量,沒有配對到的參數會變成undefined,也可以幫參數指定預設值。

const plus = function funA(numA = 0, numB = 0){
	return numA + numB;
}
//呼叫plus()函式
plus(5)  //2

當函式被呼叫的時候,會生成一個arguments物件,裡面的放的就是呼叫函式的時候,小括號裡面放的「參數」。

argruments物件並非陣列,它是帶有「索引」特性的物件,擁有length屬性,而且只能在函式裡面使用。這意味著:就算我們呼叫函式時帶入的變數數量超過原本函式設定的數量,也可以利用迴圈把超過預設數量的變數撈出來運算,還可以透過使用arguments物件讓函式能夠呼叫數量不定的引數

const plus = function (numA,numB){
	var num = 0;
  console.log(arguments.length);   
	for( var i = 0;  arguments.length > i; i++ ){
		num += arguments[i];
	}	
	return num;
}
//呼叫plus()函式
plus(1,2,3,4,5,6)  
//console.log(arguments.length)會跑出6
//然後參數相加的部分會跑出21

其餘參數(...args)

前面提到的箭頭函式,並沒有arguments物件可以使用,但是ES6提供了「其餘參數」(rest parameter)讓箭頭函式來使用。

只要在函式的小括號中以...三個點開頭,後面接上參數名稱,就變成了「其餘參數」(rest parameter),所有參數都存在裡面。而且「其餘參數」是一個陣列,所有陣列的方法它都可以使用。

const plus = (...args) => {
	var num = 0;
  console.log(args.length);   
	for( var i = 0;  args.length > i; i++ ){
		num += args[i];
	}	
	return num;
}
//呼叫plus()函式
plus(1,2,3,4,5,6)
//console.log(args.length)會跑出6
//然後參數相加的部分會跑出21

arguments物件與 ...args其餘參數都讓函式在取用參數的時候,不用拘泥於原本定義的參數數量,讓參數的使用有更大的彈性與擴充性。


上一篇
【Day16】箭頭函式
下一篇
【Day18】瀏覽器物件模型--BOM
系列文
JavaScript老學徒筆記—馬步篇35

尚未有邦友留言

立即登入留言