追求JS小姊姊系列 Day16 -- 方函式的能力展現：有小弟真好 -- 函式參數

13th鐵人賽 javascript

南國安迪

團隊好想工作室V5.0

2021-10-01 16:31:54

819 瀏覽

分享至

追求JS小姊姊系列 Day16 -- 方函式的能力展現：有小弟真好 -- 函式的參數

tags: `2021鐵人賽`

前情提要

沒說什麼，用工具人運作來講了一個故事

方函式：說起來（電話響）... 喂？有字串姐的東西？你收了吧？好喔，先這樣。
我：...你經營物流？
方函式：我小弟參數打來的，他負責幫我收取JS跟姐妹們的東西

參數 parameters

它可接收物件（陣列、函式、物件）、或各基本型別值的值

function testParameters([a, b, c], { name, intersted }, cool) {
  console.log(a + b + c, "我是陣列傳入內容");
  console.log(name + intersted, "我是物件傳入內容");
  console.log(cool(), "我是函式傳入內容");
  return a + b + c;
}
testParameters(
  [1, 2, 3],
  { name: "Andy", intersted: " watching movie" },
  function cool(i) {
    return 1;
  }
);

//也可解構參數，有更靈活的運用
//把name裡面的a,b,c拆解出來
function destructingInput({name:[a,b,c]}){
    console.log(a+b+c);
    return a+b+c;
}

let x = {name:[1,2,3]};
destructingInput(x);

在上面的案例，我除了基本示範將物件、陣列、函式傳入函式外，也有試著做簡易的參數解構賦值。

解構賦值的部分，可食用這篇: D11 - 分子料理解構賦值 Destructing Assignment（雖然小魯其實也沒吃過分子料理）

函式參數的預設值為undefined

function beforeEs6(a,b){
    return a + b; // 1 + undefined 
}
//少輸入一個引數值就得到意外的結果
console.log(beforeEs6(1));//get NaN

//解決方式：函式內加入條件判斷
function beforeEs6(a,b){
    if(b === undefined) b =1
    return a + b;
}

像這樣少輸入引數引發的各種問題，在ES6的預設參數以及不定參數出現後，提供你更多的變通方法。

不定參數 `...restParameters`:

1. 不定參數本身是一個陣列(所有引數內容依序裝入陣列)
所以，各類的Array.properties它都可以使用

下面先證明一下它確實是陣列：

//Number + restParameter
function trys(first,...afterSeconds){
    //透過Array.isArray來判斷，會回傳 true / false
    console.log(Array.isArray(afterSeconds));
    
}
trys()

每個函式只能有一個不定參數，且只能擺在最後一個參數位置

function oneRestParameters(...firstRest,test){
    console.log(firstRest + test,"我是只有一個不定參數的情境");
    return firstRest + test;
}
oneRestParameters(1,2,3)
function addTwoRestParameters(...firstRest,test,...secondRest){
    console.log(firstRest + test + secondRest,,"我是有兩個不定參數的情境");
}
addTwoRestParameters(1,2,3,4)

所以上述兩個執行都會報錯，因為上面有提過不定參數只有一個且要放在最後。

3. 就算沒有輸入引數值，不定參數本身也會建立一個空陣列

function trys(first,...afterSeconds){
    console.log(first);
    console.log(afterSeconds);
    return first + afterSeconds;
}
console.log(trys(1));

預設參數 defaultParameters

可預先為參數賦值，各型別都可以：

基本型別(primitive)賦值

function befores(a,b=1){
    return a +b;
}
//就算少輸入也不會得到意外的結果
befores(1); // get 2

複合型別(no-primitive)


function befores([a,b,c]=[]){
    return a + b + c;
}
//沒輸入引數也不會報錯
console.log(befores());

console.log(befores([1,2,3]));

預設參數遇到falsy值時 falsy值有哪些參考

function inputFalsyValue(value = 1){
    return value;
}
//falsy值
console.log(inputFalsyValue("")); //""
console.log(inputFalsyValue(null)); //null
console.log(inputFalsyValue(undefined)); // 1 ?!
console.log(inputFalsyValue(0)); //0

為何null能成功傳入，但undefined卻回傳1呢？
目前所知JS內部機制在檢測函式傳入值時，只要是undefined，就會啟動預設參數的機制。
欲知更多相關：Handling the distinction between undefined- and null-parameters in JavaScript