函式預設值是乙個很提高魯棒性的東西(就是讓程式更健壯)
mdn關於函式預設引數的描述:函式預設引數允許在沒有值或undefined被傳入時使用預設形參。
es5使用邏輯或||來實現
眾所周知,在es5版本中,並沒有提供的直接方法供我們我們處理函式預設值
所以只能夠自己去增強函式的功能,一般會這麼來做:
function dosomething (程式設計客棧name, age)
我們將函式的兩個引數name與age進行預設值的處理,如果沒有則使用預設值。
在執行一下函式後,好像並沒有什麼不對:
dosomething() // default name, 18
dosomething('niko') // niko , 18
dosomething(, 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 (age === undefined)
console.log(name, age)
}使用三元運算子簡化操作
或者我們簡寫成三元運算子形式的:
function dosomething (name, age)
使用函式進行封裝
但是如果我們每寫乙個函式,都要重複的去做這些操作
未免太麻煩了,所以,我們對這個邏輯進行乙個簡單的封裝:
function defaultvalue (val, defaultval)
function dosomething (name, age)
這樣就很簡潔的在es5實現了函式預設引數的邏輯
one momre things
關於上邊的defaultvalue函式實現方法,我們在合理的使用弱型別語言的優勢後
可以使用這種方式來省去三元運算子的操作:
function defaultvalue ()
我們知道,arguments表示函式所有的實參
我們使用arguments[0]獲取第乙個實參,然後與undefined進行全等比較
在外層將表示式的結果轉換為number,然後將這www.cppcns.com個值作為下標獲取arguments中對應的引數。
因為是由boolean值轉變而來,所以只會存在0、1兩種選項。
也就實現了上邊三元運算子的功能。
es6es6版本的函式預設值基本上就是我們上邊實現的那種套路了
但是因為是原生的,所以會有相應的新語法,能夠更簡潔的使用:
function dosomething (name = 'default name', age = 18)
es6中提供了新的語法,可以讓我們在函式宣告引數後邊直接寫= [defaultvalue]的這種形式來設定某個引數的預設值。
直接使用這種方式,省去了在函式內部進行預設值的檢查,能夠讓函式專注的做它應該做的事情。
如何針對某些必填引數丟擲異常
es6這種新語法能夠讓我們很好的針對某個必填引數進行錯誤提醒:
function requireparams ()
function dosomething (name = requireparams(), age = 18)
如果name引數為undefined,就會觸發預設值規則
然後呼叫requireparams函式,而我們在函式中直接throw了乙個error
複雜結構引數的預設值處理
上邊的處理都是針對簡單的基本型別資料進行處理的,但如果我們有如下的乙個函式:
function init () {}
init()
如果在es5環境下,針對這種引數的預設值處理將會變得無比複雜
首先要判斷這乙個引數是否存在,然後在判斷引數中的所有key是否存在
而在es6中,可以這樣來做:
function init ( = {})
init()
首先在析構函式的後邊新增預設值= {},然後針對每一項引數新增預設值,很簡潔的就實現了我們的需求。
es5版本的polyfill**在倉庫中的位置:defaultvalue
參考資料
1.mdn
總結以上所述是小編給大家介紹的在es5與es6環境下處理函式預設引數的實現方法,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回覆大家的
本文標題: 在es5與es6環境下處理函式預設引數的實現方法
本文位址:
如何在ES5與ES6環境下處理函式預設引數
函式預設值是乙個很提高魯棒性的東西 就是讓程式更健壯 mdn關於函式預設引數的描述 函式預設引數允許在沒有值或undefined被傳入時使用預設形參。眾所周知,在es5版本中,並沒有提供的直接方法供我們我們處理函式預設值 所以只能夠自己去增強函式的功能,一般會這麼來做 function dosome...
ES5與ES6建構函式
function 函式名 引數 函式名.prototype.方法名 function class 類名 方法名稱 1.定義建構函式 es5 function 函式名定義 es6 class 類名定義 注 class建構函式類名後沒有 2.定義例項化物件屬性和屬性值 es5 function 函式中定...
ES6函式比對ES5函式
這裡只做簡單的es6函式與es5函式對比,把es6函式中新增的方法或者用法介紹一下。方便大家學習 記憶。隨著社會發展,瀏覽器肯定會在不久全部支援es6語法,因為現在的ie8使用者都很少了,做web前端將不再受此束縛!其他語言已經支援函式引數預設值,咱們js也不會落後的。例 es6寫法 a 預設值10...