今天我們要來介紹 ES6 新增的其餘參數及預設參數!

其餘參數 rest parameter

...numbers 可以讓我們表示不確定數量的參數，並將其視為一個陣列:

function getVal(...numbers){
    console.log(numbers);
}
getVal(1,24,5,6,7);//[[1, 24, 5, 6, 7]]

function getVal(first,...numbers){
    console.log(first,numbers);
}
getVal(1,24,5,6,7);//1 [24, 5, 6, 7]

這邊要注意到的是，只能在函式最後一個參數作使用，否則會報錯誤：

function getVal(...numbers,last){
    console.log(numbers);
}
//SyntaxError: Rest parameter must be last formal parameter

可能會有人認為我用之前的 arguments 就好了，為什麼要多學一個 其餘參數的用法？這邊我們來列出兩者的差異：

• arguments 是類陣列，無法使用一般陣列的方法像 map 、 sort，
  其餘參數為陣列則可以使用
• arguments 物件自身有額外的功能，例如 callee 屬性。

所以我們今天要寫一個由大到小排列的函式，用其餘參數就會輕鬆許多：

function mutilMax(...numbers){
    var sorted = numbers.sort((a,b)=>b-a);
    return sorted;
}
mutilMax(1,24,5,6,7);// [24, 7, 6, 5, 1]

如果用 arguments 需要先把它轉成陣列才能使用 ：

function mutilMax(){
	var arr = Array.from(arguments);
    var sorted = arr.sort((a,b)=>b-a);
    return sorted;
}
mutilMax(1,24,5,6,7);

預設參數 default parameter

有時候我們會希望函式傳進來的參數是固定值，像是：

function personCheck(name,check){
    return name+"  "+check;
}
personCheck("Ann","checked");//"Ann  checked"
personCheck("Lia","checked");//"Lia  checked"
personCheck("Una","checked");//"Una  checked"

這時候我們會作修改：

function personCheck(name,check){
    check = typeof(check) === "undefined" ? "checked":check;
    return name+"  "+checked;
}
personCheck("Ann");//"Ann  checked"
personCheck("Una");//"Una  checked"
personCheck("Jason","not here");//"Jason  not here"

這邊看到的 typeof(checked) === "undefined" ? "checked":checked 代表如果今天沒有傳入參數 checked 會是 undefined 則預設為 "checked" ，否則回傳傳入參數。

但是這樣還是很麻煩，能不能在精簡寫法呢？
幸好 ES6 提供了預設參數功能：

function personCheck(name,check = "checked"){
    return name+"  "+check;
}
personCheck("Ann");//"Ann  checked"
personCheck("Una");//"Una  checked"
personCheck("Jason","not here");//"Jason  not here"

如果指定了一個值，預設值就會被覆蓋。是不是方便很多了呢！

預設參數除了可以指派數字和字串，也能指派物件、陣列設置函式：

function personCheck(name,check = "checked",message = name+"  "+check){
    return message;
}
personCheck("Una");//"Una  checked"
personCheck("Jason","not here");//"Jason  not here"

但老實說，這程式的可讀性實在不怎麼好，所以要斟酌使用喔！

參考資料：
忍者 JavaScript 開發技巧探秘
MDN 其餘參數