在ES5與ES6環境下處理函式預設引數的實現方法

2022-10-08 14:36:13 字數 2558 閱讀 3799

函式預設值是乙個很提高魯棒性的東西(就是讓程式更健壯)

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...