如何在ES5與ES6環境下處理函式預設引數

2022-02-08 16:42:45 字數 2939 閱讀 4455

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

mdn關於函式預設引數的描述:函式預設引數允許在沒有值或undefined被傳入時使用預設形參。

眾所周知,在es5版本中,並沒有提供的直接方法供我們我們處理函式預設值

所以只能夠自己去增強函式的功能,一般會這麼來做:

function

dosomething (name, age)

我們將函式的兩個引數nameage進行預設值的處理,如果沒有則使用預設值。

在執行一下函式後,好像並沒有什麼不對:

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,然後將這個值作為下標獲取arguments中對應的引數。

因為是由boolean值轉變而來,所以只會存在01兩種選項。

也就實現了上邊三元運算子的功能。

es6版本的函式預設值基本上就是我們上邊實現的那種套路了

但是因為是原生的,所以會有相應的新語法,能夠更簡潔的使用:

function dosomething (name = 'default name', age = 18)

es6中提供了新的語法,可以讓我們在函式宣告引數後邊直接寫= [defaultvalue]的這種形式來設定某個引數的預設值。

直接使用這種方式,省去了在函式內部進行預設值的檢查,能夠讓函式專注的做它應該做的事情。

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

mdn

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

函式預設值是乙個很提高魯棒性的東西 就是讓程式更健壯 mdn關於函式預設引數的描述 函式預設引數允許在沒有值或undefined被傳入時使用預設形參。es5使用邏輯或 來實現 眾所周知,在es5版本中,並沒有提供的直接方法供我們我們處理函式預設值 所以只能夠自己去增強函式的功能,一般會這麼來做 fu...

ES6與ES5差別簡述

es6與es5差別 1 es6新增了let命令,用來宣告變數。它的用法類似於var,但是所宣告的變數,只在let命令所在的 塊內有效。a 1 b undefined let不像var存在變數提公升,即變數一定要宣告之後才能使用。2 塊級作用域 es5只有全域性作用域和函式作用域,沒有塊級作用域。3 ...

es5繼承與es6繼承

es5中的繼承方式 1.原型鏈繼承 缺點 1.建立例項時無法像父類建構函式傳遞引數 2.因為指定了原型,所以不能實現多繼承 3.父類建構函式上的屬性被所有子類共用,給原型上的屬性賦值會改變其他子類的屬性值 es5 const parent function name,age parent.proto...