2017年1月15日

[筆記] JavaScript ES6 中的函數預設值(default value)


在過去如過要在函式中建立預設值常常要利用到 JS 中強制轉換型別(coercion)的這種特性,但在 ES6 中則可以用相當簡易的方式就可以設定函式的預設值(default value),寫起來更簡潔方便,讓我們來看一下可以怎麼樣使用。

函式預設值的使用


函式預設值的使用非常簡單,只需要在函式中給予參數的地方用等號賦值就可以了,方式如下:

function add(x = 3, y = 5){
  console.log(x+y);
}

add();  // 8

也就是說,只要在 add 這個函式的參數位置寫 add(x =3, y=5) 就可以直接帶入預設值,因此雖然我在執行 add( ) 的時候沒有帶入任何的參數值,但它不會報錯,而是回傳 8 。

使用預設值的基本觀念


丟入的參數值會由前往後代入

假設我只給予後面的 y 預設值,如下:

function add(x, y = 5){
  console.log(x+y);
}

add(2);   // 7
add(2,8); // 10


這時候我可以只輸入一個參數是沒有問題的,這個值會先被丟到 x 這個參數。然而,如果我只給予前面的 x 預設值,如下:

function add(x = 3, y){
  console.log(x+y);
}

add(2);   // NaN
add(2,8); // 10


這時候當我輸入 add(2) 來執行這個函式時,因為 2 會先被帶入 x ,所以 x = 2;而 y 沒有被賦值,因此 y = undefined,這也使得最後回傳的結果會是 NaN。


0 意見:

張貼留言