【 啊～原來如此！】PartII Day 2 挑戰-函式預設值
default parameter的運用
Published in
3 min readMar 28, 2021
在設定一個畫面有不同顯示模式的時候，我運用renderUsersCard()這個函式去渲染(render)畫面，當時我需要解決的問題是：如何讓網頁在點選模式按鈕時，可以讓renderUsersCard()這個函式能夠「知道」我在點選哪個按鈕，於是可以判斷現在要渲染什麼樣子的畫面。
解決方法
方法一：
設定一個全域變數，比如說displayMode = ‘list’，並讓renderUsersCard()這個函式去取用這個變數，並且在點選不同按鈕時重新賦值這個全域變數。
方法二：
在renderUsersCard()設定一個函式預設值，這樣也可以減少全域變數的數量。
function renderUsersCard(array, displayMode = 'list') {
if (displayMode = 'list') {
// code
} else {
// code
}
}Default parameter的小歷史
在ES6之前，這個方法其實並不這麼直覺，當時是運用parameter的特性：預設所有參數值為undefined，並技巧性的加入判斷式。
// 方法1
function addAB(a, b) {
b = typeof b !== 'undefined' ? b : 1
return a + b
}// 方法2：運用JS的自動轉型把undefined轉成false(keyword:falsy)
function addAB(a, b) {
b = b || 1
return a + b
}addAB(3) // 4
關於default parameter的應用
除了可以直接等於使用primitive type以外，其實也可以使用物件、陣列或甚至函數：
- 後設定的參數可以運用先前的：
function test(fir, sec = fir + ' do', thi = sec + ' well.') {
return [fir, sec, thi]}test('you') // [you, you do, you do well.]
test('you', 'I') // [you, I, I well.]
2. 設定parameter無值就報錯的方法：
// 步驟1：設定報錯function
function returnIfMissing() {
return alert('no parameter')
}// 步驟2：在其他funtion中使用
function renderDataPanel(dataArray = returnIfMissing()) {
return console.log(dataArray)}renderDataPanel() //畫面出現alert視窗
後續的就等之後再補充吧~~
