JS：函數的參數的默認值

Question

在一些語言中，你可以爲函數的參數設置默認值：

function Foo(arg1 = 50, arg2 = 'default') { 
    //... 
} 

你如何做到這一點在JavaScript？

Answer 1

在JavaScript中，任何未設置的值都會給出值undefined。這意味着，如果你想爲一個功能設置默認值，你的第一線需要做個檢查，看看如果這些值沒有定義：

function Foo(arg1, arg2) { 
    if (typeof(arg1) === "undefined") { arg1 = 50; } 
    if (typeof(arg2) === "undefined") { arg2 = "default"; } 
} 

您可以採取一些捷徑，如果你大致知道這些值是什麼：

function Foo(arg1, arg2) { 
    arg1 = arg1 || 50; 
    arg2 = arg2 || "default"; 
} 

但是，如果這些參數是虛假的，它們將被替換。這意味着，如果Arg1爲空字符串，null，undefined，false或0它會被改爲50，所以要小心，如果你選擇使用它

Answer 2

你將不得不做，在函數體：

function Foo(arg1 ,arg2) { 
    if(typeof arg1 === 'undefined') 
     arg1 = 50; 

    if(typeof arg2 === 'undefined') 
     arg2 = 'default'; 
    //... 
} 

另一種方式來測試他們undefined或null是這樣的：

function Foo(arg1 ,arg2) { 
    if(arg1 == undefined) 
     arg1 = 50; 

    if(arg2 == undefined) 
     arg2 = 'default'; 
    //... 
} 

有些人不喜歡它，因爲因爲它只是一個全局屬性，所以可以覆蓋undefined的值。只要它沒有被覆蓋，這將工作正常。如果參數是null或undefined，它們將被設置爲默認值。

Answer 3

我更喜歡== null檢查，而不是typeof(arg1) === undefined（如jQuery的庫在內部：http://docs.jquery.com/JQuery_Core_Style_Guidelines#JSLint）。它不僅更簡潔，而且還處理null和undefined，因此客戶端代碼可以通過null並獲取默認應用。

也可以將函數包裝在提供默認值的另一個函數中。 prototypejs庫有一個提供argumentNames()的函數（或者如果你不想使用原型，你可以借用實現 - 它只是一個應用於函數toString()的結果的正則表達式）。

所以你可以做這樣的事情：

var Foo = defaults(Foo, { arg1: 50, arg2: 'default' }); 
function Foo(arg1, arg2) { 
    //... 
} 

和defaults()實施將是這個樣子：

function defaults(fn, def) { 
    return function() { 
    var arg_names = fn.argumentNames(); 
    var nArgs = args.length; 
    for (var nArg = 0; nArg < nArgs; ++nArg) { 
     if (arguments[nArg] == null && arg_names[nArg] in def) 
     arguments[nArg] = def[arg_names[nArg]]; 
    } 
    fn.apply(this, arguments); 
    } 
} 

當然，這是未經測試的代碼，它的表述方式，它需要Prototype庫。但是，所有的說，在函數內部的== null的做法是更自然的Javascript，更容易調試（你沒有其他的功能層到步），我覺得它更容易閱讀：

function Foo(arg1, arg2) { 
    if (arg1 == null) arg1 = 50; 
    if (arg2 == null) arg2 = 'default'; 
} 

Answer 4

如ES2015（ES6）的，默認參數可以設置像這樣：

function multiply (a, b = 2) { 
    return a * b; 
} 
multiply(5); // 10