1. 程式人生 > >ES6 函式引數的預設值

ES6 函式引數的預設值

基本用法

在ES6之前,不能直接為函式的引數指定預設值,只能採取變通的方法。

function log(x,y){
    y = y||'world';
    console.log(x,y);
}
log('kkk');//kkk world

這種寫法的缺點在於:
如果引數y賦值了,但是對應的布林值為false,則該賦值不起作用。如果在呼叫函式的時候,傳入的y引數是一個空字串,那麼y就會被修改為預設值。
避免這個問題,需要先判斷一下:1.通過判斷值是否等於undefined,2.判斷arguments.length是否為1.

但是ES6允許為函式的引數設定預設值,即直接寫在引數定義的後面。

function log(x,y='world'){
    console.log(x,y);
}
log('hello'); //hello world

ES6語法的好處:
1.簡潔
2.閱讀程式碼的人可以看出哪些引數是可以省略的,不用檢視函式體或文件
3.有利於將來的程式碼優化,即使未來的版本即使拿掉這個引數,以前的程式碼也可以執行
還有引數變數是預設宣告的,不能在函式體內部再進行宣告。

與解構賦值預設值結合使用

這裡有兩種寫法需要區分一下:

function m1({x=0,y=0} = {}){
    return [x,y];
}
function m2({x,y} = {x:0,y:0})
{
return [x,y]; } m1({x:3});//[3,0] m2({x:3});//[3,undefined] m1({});//[0,0] m2({});//[undefined,undefined]

引數預設值的位置

通常情況下,定義了預設值的引數應該是函式的尾引數。因為這樣比較容易看出,到底省略了哪些引數,如果非尾部的引數設定預設值,實際上這個引數是無法省略的。
如果有預設值的引數都不是尾引數,這時,無法只省略該引數而不省略其後的引數,除非顯示輸入undefined。如果傳入undefined,那麼就會觸發預設值,但是null沒有這個效果。
函式的length屬性
如果函式指定了預設值後,函式的length屬性就不會包含有預設值的引數。這是因為length屬性的含義是,該函式預期傳入的引數個數,某個引數指定預設值之後,預期傳入的引數個數就不包括
這個引數了,同理,rest引數也不會計入length屬性。
函式引數預設值的型別


(1)變數
如果函式引數的預設值是一個變數,則該變數所處的作用域和其他變數的作用域規則相同,即是先前函式的作用域,然後再是全域性作用域。
(2)函式
如果函式A的引數預設值是函式B,那麼由於函式的作用域是其宣告的時候所在的作用域,函式B的作用域就在全域性作用域而不是函式A的作用域。