JS 函式 - HackMD

# JS 函式 :bulb: 函式被發明，用以簡化程式中重複的相同/相似的片段 ## 函式內的溝通方式 - 呼叫端傳遞參數給被呼叫端 - 被呼叫端 - 收到參數並運算 - `return`關鍵字會停止函式，回傳值給呼叫端 ```javascript=! // 定義名為plus的函式(function))，包含名為num1和num2的參數(Parameter) function plus(num1, num2) { return num1 * num2; } // 呼叫plus函式(執行) plus(2, 6); ``` --- ## 參數-預設值 :bulb:當該參數為`null`或`undefined`，則使用預設值 ```javascript=! // 預設值為Guest function welcome(temp = 'Guest') { console.log('Welcome', temp); } welcome('Jonny'); // => Welcome Jonny welcome(); // => Welcome Guest ``` ## 參數-不定量(Varargs) :bulb:`...`作為前綴，並置於所有參數之後 ```javascript=! function sum(num1, num2, ...restOfNum) { let result = 0; for (let temp of restOfNum) { result += temp; } return result; } console.log(sum(1, 10, 100, 1000)); ``` --- ## 選項物件(Option object) :accept:運用 `||`運算子的短路求值，設定預設值 ```javascript=! function record(temp1) { const temp2 = { user: temp1.user || 'guest', age: temp1.gender || '---' } console.log(temp2); } record({}); // => { user: 'guest', age: '---' } record({ user: 'Jonny' // => { user: 'Jonny', age: '---' } }); ``` --- ## 函式特性 :accept:作為參數被傳遞，稱作回呼函式(Callback function) :bulb:作為參數被傳遞時，寫回呼函式名稱即可，不須再加`()` ```javascript= /** * 迭代tempArr，讓每個tempElement都執行一次tempCalc函式 * @param tempArr 要被迭代的陣列 * @param tempCalc 要執行的函式 */ function merge(tempArr, tempCalc) { for(let tempElement of tempArr) { tempCalc(tempElement); } } // 宣告名為arr的陣列 const arr = [1, 2, 3, 4, 5]; // 定義名為callbackCalc的函式 function callbackCalc(n) { console.log(n * n); } // 呼叫merge函式(執行) merge(arr, callbackCalc); ``` ### 簡寫-匿名函式(接續上述案例) :accept:省去`函式名` ```javascript=13 // 呼叫merge函式(執行) merge(arr, function (n) { console.log(n * n); }); ``` ### 簡寫-箭頭函式(接續上述案例) :accept:省去關鍵字`function` ```javascript=13 merge(arr, (n) => { console.log(n * n); }); ``` ### 簡寫-省略圓括號(接續上述案例) :accept:用於只有1個參數時 :exclamation:當沒有參數時，需保留空的`()` ```javascript=13 merge(arr, n => { console.log(n * n); }); ``` ### 簡寫-省略大括號、關鍵字return、;(接續上述案例) :accept:用於函式內只有1行程式時 ```javascript=13 merge(arr, n => console.log(n * n)); ``` ### Immediately Invoked Functions Expression(接續上述案例) :accept:先將整個函式用`()`包起來，其後再將想傳遞的參數用`()`包起來，表示立刻呼叫函式 ###### tags: `frontend` `jsnote` [:arrow_right: Back to Front End Homepage :arrow_left:](/S-c0eqQmS16D8tcTx4ae1g)