Jeff的隨手筆記

學習當一個前端工程師

0%

『JavaScript 基礎』 arguments跟 parameters以及 spread

Posted on In

Imgur

這是一門在Udemy 課程，是同學介紹的。主要是因為想要運用到過年前這段時間好好的增進自己的JavaScript的基礎能力，讓自己能往前端工程師更近一步。主要還是會以筆記的形式做呈現！

Parameters(參數)

其實在我們介紹function時我們就已經認parameters了：

1
2
3
4
5
function greet(firstName, lastName, language) {
  console.log(firstName)
  console.log(lastName)
  console.log(language)
}

程式碼中的firstName, lastName, language就是parameters。
在其他程式語言裡面，如果有參數但我在呼叫時卻沒有給，在執行時通常都會出現問題，但在JavaScript裡即便你沒有給參數他還是會執行，只是會給出undefined
是不是覺得很熟悉又出現undefined，沒錯會造成這個原因又是Hoisting。
至於用強制轉換概念設定預設值或是在參數中建立預設值，因為在前幾篇介紹過了就不再特別說明了。

Arguments(引數)

argument是傳遞給function的所有parameters之集合，不用管相對應的參數是否有明確定義，也就是說，arguments會包含所有你放入function中的參數值（自己感覺有點像React 裡的props）。
來看一下以下範例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function greet(firstName, lastName, language) {
 
    language = language || 'en';
    
    if (arguments.length === 0) {
        console.log('Missing parameters!');
        console.log('-------------');
        return;
    }
    
    console.log(firstName);
    console.log(lastName);
    console.log(language);
    console.log(arguments);
    console.log('arg 0: ' + arguments[0]);
    console.log('-------------');
    
}

greet();
greet('John');
greet('John', 'Doe');
greet('John', 'Doe', 'es');

我們會得到以下的結果：

Imgur

每一次的arguments都會分別顯示在該次函式中有哪些參數值

注意看arguments回傳的值，我們會注意到是斜體的 [ ] ，這就是之前有學習到的Array-like。

Array-like(類陣列)並不是真的陣列，因此arguments回傳的值並不具備所有陣列所具有的特徵。

但由於Array-like裡面會有length的屬性，因此我們可以使用：

1
2
3
4
5
if (arguments.length === 0) {
        console.log('Missing parameters!');
        console.log('-------------');
        return;
    }

這段code。（要不是上了這堂課我還真的不知道有arguments）

Spread

簡單來說，就是它可以把函數中許多的參數(arguments)或陣列中許多的元素(elements)形成一個新的變數。

由於課堂上沒有做過多的說明，附上MDN連結以及鐵人賽文章方便後續複習。