JavaScript-參數(argument)與其餘參數(spread)

函式執行時的參數變數

重新複習一下，當函式被呼叫執行時，會創建一個新的執行環境，而在創建階段的同時，JavaScript引擎會設定幾個東西：

• 「變數環境」用來包住變數
• 給範圍鍊(Scope Chain)的「外部參考環境」
• 特殊關鍵字「this」
• 另一個特殊關鍵字「arguments」

即使我沒有在函式中宣告過arguments這個變數，當我在執行環境中直接呼叫arguments這個關鍵字，會印出有傳入值的所有參數。

function greet(firstName,lastName,language){
    console.log(arguments);
}
greet('Amy','Lin','En');

印出的東西會是由斜體中括號 [] 呈現，有點像陣列，可是不太一樣，我們稱作為array-like，只有部分陣列的功能。

預設參數為undefined

在JavaScript中，可以呼叫函式卻不傳入任何參數。因為當函式被呼叫執行時，在創建階段就會先在記憶體空間設定好這些值為undefined，所以並不會出錯。

function greet(firstName, lastName, language){
    console.log(firstName);
    console.log(lastName);
    console.log(language);
}

greet();

當我執行印出函式中的參數時，因為未傳入、賦予值給參數，所以就會印出預設值為undefined。

由左到右傳入參數值

JavaScript可以處理為傳入參數的函式，也可以處理只傳入部分參述的函式。

function greet(firstName, lastName, language){
    console.log(firstName);
    console.log(lastName);
    console.log(language);
    console.log('--------------')
}

greet('Amy');
greet('Amy','Lin');
greet('Amy','Lin','English')

也就是說，當我宣告一個函式時，函式中的參數有三個，而當我呼叫執行時，我可以選擇不傳入值，也可以選擇只傳入一個或兩個，當然也可以傳入三個，可是要記得，一定是由左至右傳入設定做處理。

ES6語法:預設參數

當不確定每次函式被呼叫時，會傳入幾個參數，卻不希望未被設定的參數值為undefined，在ES6版本中，可以自定義為參數設定預設值。

function greet(firstName, lastName, language='English'){
    console.log(firstName);
    console.log(lastName);
    console.log(language);
}
    
greet();

也就是當呼叫函式時，若沒有給予language這個參數的值，則會在函式中賦值’language’給該參數。

不過因為這種ES6語法只適用於部分瀏覽器，所以下述寫法，也可以達成相同的目的。

function greet(firstName, lastName, language){
    
    language = language||'English';
    
    console.log(firstName);
    console.log(lastName);
    console.log(language);
}
greet();

當呼叫greet()卻沒有傳入language參數的值，執行到上述第三行程式碼時，則會判斷出language為undefined，所以賦予值為’English’。

下方獨立解析這行「自定義參數預設值」程式碼意思。

language = language||'English'

其中看到兩個運算子，分別是’=’以及’||’，因為’||’的優先權較高，所以會先執行這個部分，接著才去執行’=’。

首先，執行’||’左邊的程式碼，若language為undefined，會被強制轉型為falese，而繼續執行’||’右邊的程式碼，獲得’English’的這個值。

接著，執行’=’的動作，就會將’English’賦值給變數language。

其餘參數(spread parameter)

其餘參數是arguments被傳入函式時，還沒有被指定變數名稱的引數。

function greet(firstName, lastName, ...otherP){
    console.log(otherP);
}

greet('Amy','Lin','female','English')

其餘參數的變數名稱可以自定義，範例中使用otherP代表其餘參數。
所以剩餘沒有被直接寫出來的參數，就會被包進這個otherP陣列中。