函數默認值是一個很提高魯棒性的東西(就是讓程序更健壯)
MDN關于函數默認參數的描述:函數默認參數允許在沒有值或undefined被傳入時使用默認形參。
ES5
使用邏輯或||來實現
眾所周知,在ES5版本中,并沒有提供的直接方法供我們我們處理函數默認值
所以只能夠自己去增強函數的功能,一般會這么來做:
function doSomething (name, age) { name = name || 'default name' age = age || 18 console.log(name, age)}我們將函數的兩個參數name與age進行默認值的處理,如果沒有則使用默認值。
在執行一下函數后,好像并沒有什么不對:
doSomething() // default name, 18doSomething('Niko') // Niko , 18doSomething(, 12) // default name, 12然而當我們執行這樣的代碼時,就會獲得一些超出預期的結果:
doSomething('Niko', 0) // Niko, 18能夠發現,對于參數0,我們上邊的默認參數實現方法是有問題的
就像下邊的四個表達式,都會輸出wrong,這很顯然不能夠滿足上邊MDN關于函數默認參數的定義:
console.log(0 || 'wrong')console.log('' || 'wrong')console.log(null || 'wrong')console.log(false || 'wrong')正確的姿勢
所以,在ES5中正確的默認值處理應該是這樣:
function doSomething (name, age) { if (name === undefined) { name = 'default name' } if (age === undefined) { age = 18 } console.log(name, age)}使用三元運算符簡化操作
或者我們簡寫成三元運算符形式的:
function doSomething (name, age) { name = name === undefined ? 'default name' : name age = age === undefined ? 18 : age console.log(name, age)}使用函數進行封裝
但是如果我們每寫一個函數,都要重復的去做這些操作
未免太麻煩了,所以,我們對這個邏輯進行一個簡單的封裝:
function defaultValue (val, defaultVal) { return val === undefined ? defaultVal : val}function doSomething (name, age) { name = defaultValue(name, 'default name') age = defaultValue(age , 18) console.log(name, age)}這樣就很簡潔的在ES5實現了函數默認參數的邏輯
one momre things
關于上邊的defaultValue函數實現方法,我們在合理的使用弱類型語言的優勢后
可以使用這種方式來省去三元運算符的操作:
function defaultValue () { return arguments[+(arguments[0] === undefined)]}我們知道,arguments表示函數所有的實參
我們使用arguments[0]獲取第一個實參,然后與undefined進行全等比較
在外層將表達式的結果轉換為Number,然后將這個值作為下標獲取arguments中對應的參數。
|
新聞熱點
疑難解答
圖片精選