Sean's Blog

An image showing avatar

Hi, I'm Sean

這裡記錄我學習網站開發的筆記
歡迎交流 (ゝ∀・)b

LinkedInGitHub

Understand JavaScript #13 函式參數與 arguments、spread

本文主要內容為探討「函式參數」的相關知識,包含預設值、arguments 關鍵字、spread parameter 等等。

為參數設定預設值

其實在執行參數時,JavaScript 就會幫參數設定記憶體空間,並且設定預設值為 undefined。
所以如果調用時沒有傳入對應位置的參數,就會出現預設值 undefined 哩。

1function greet(firstname, lastname, language) {
2  console.log(firstname); // undefined
3  console.log(lastname); // undefined
4  console.log(language); // undefined
5}
6greet();
7

到了 ES6 我們可以直接為參數設定預設值,如果沒有傳入相對應位置的參數,就會使用該參數設定的預設值。

1function greet(firstname, lastname, language = 'en') {
2  console.log(firstname); // Damao
3  console.log(lastname); // Huang
4  console.log(language); // en
5}
6greet('Damao', 'Huang');
7

然而,如果要針對某些不支援 ES6 的瀏覽器做處理,我們就只能自己動手完成預設值的概念了。例如:當 language 是 undefined 的時候,會強制轉型為 false,最終就會得到 'en' 的值。

1function greet(firstname, lastname, language) {
2  language = language || 'en';
3  console.log(firstname);
4  console.log(lastname);
5  console.log(language);
6}
7greet('Damao', 'Huang');
8

ES5 的 arguments 關鍵字

之前我們提到,當我們執行函式時,創造一個新的執行環境,然後 JavaScript 會自動設定變數環境、給範圍鏈的外部環境參考,以及特殊關鍵字 this。

除了以上這些東西,JavaScript 還會設定另一個特殊關鍵字 arguments,它會「包含所有參數傳入的值」,並且形成一個類陣列 (Array-Like),辨認方法就是它是微微傾斜的中括號。

arguments

使用的方法很簡單,我們可以在函式內的任何地方呼叫它,另外也能搭配使用一些陣列的方法。

例如:使用 arguments.length 檢查有沒有傳入參數,如果是 0 就跳出函式。

1function greet(firstname, lastname, language) {
2  if (arguments.length === 0) {
3    console.log('Missing Parameters!');
4    console.log('--------------------');
5    return;
6  }
7  console.log(firstname);
8  console.log(lastname);
9  console.log(language);
10  console.log(arguments);
11  console.log('arg 0:', arguments[0]);
12  console.log('--------------------');
13}
14
15greet();
16greet('Damao', 'Huang', 'zh-tw');
17

ES6 的 spread parameter

到了 ES6 出現了 spread parameter,它的用法是 ...名稱,用途是將那些沒有直接寫出來的參數(此為 firstname、lastname、language 以外的參數),通通都包在這個名稱的陣列裡面。

1function greet(firstname, lastname, language, ...other) {
2  console.log(firstname);
3  console.log(lastname);
4  console.log(language);
5  console.log(other); // (2) ["test1", "test2"]
6}
7
8greet('Damao', 'Huang', 'zh-tw', 'test1', 'test2');
9

回顧

看完這篇文章,我們到底有什麼收穫呢?藉由本文可以理解到…

  • 函式初始化時會為參數設定預設值
  • 認識 ES5 的 arguments 關鍵字與應用方式
  • 認識 ES6 的 spread parameter

References