允许JavaScript函数接受任意数量的参数

Question

我希望下面的函数更加灵活，如果在参数中定义了多个回调函数，它可以接受这些函数。

$(function() {
    function icisDashBox(colorElem, thisWidth, thisHeight, completeCallBack) {
        $(colorElem).colorbox({
        transition: 'none',
        innerWidth: thisWidth,
        innerHeight: thisHeight,
        opacity: '0.5',
        onOpen: function() { 

        },
        onLoad: function() { 

        },
        onComplete:function() { 
            $('#cboxLoadedContent').wrap('<div id="icis_dialog_msg" />'); 

            completeCallBack();

        },
        onCleanup: function() { 

        },      
        onClosed: function() {
            $('#cboxLoadedContent').unwrap(); 
        }
    });
}

icisDashBox('.example9', '500', '500', completeFunction);

function completeFunction() {

    var fooClass = $("#colorbox").addClass("FOO");

    var barClass = $("#colorbox").addClass("BAR");

    var ajaxCnt = $.ajax({
        type: "GET",
        url: "http://www.payso.me.uk",
        dataType: "html",
        success: function(data) {
            $("#colorbox").addClass("AJAX SUCCESS");
        }
    });

    return {
        x : fooClass,
        y : barClass,
        z : ajaxCnt                         
    };
}

所以在理想情况下，我的函数应该像这样，不需要明确声明任何参数：

function icisDashBox() { function code here }

这是否可能？如果参数未定义，我该如何处理呢？

例如，如果一个函数调用有多个回调函数定义，而另一个只有一个，是否有一种方式可以处理缺少回调函数的情况。

谢谢,

:)

- RyanP13

Answer 1

你可以使用关键字arguments，它是传递参数的数组形式，像这样：

function myFunc() {
   if(arguments.length > 0)     //be sure to check if there are any...
     var arg1 = arguments[0];
}

然而，更好的方法是接受一个对象，例如：

function myFunc(settings) {
   settings = settings || {};   //in case it was called as just: myfunc()
   var something = settings.something || "default value";
}

你可以这样调用它：

myFunc({ something: "value", somethingElse: "otherValue" });

这种方法允许您接受任意数量的参数，并且可以有任意数量的可选参数，而无需大量使用 myFunc(null, null, null, "value") 这样的调用来仅提供所需的参数，此外它们是命名的，我认为这样更易于维护。 这是插件的编辑版本，以演示这一点。

- Nick Craver

---

@RyanP13 - 不是全局变量，因为它是参数名称，它只在函数内部有效，你已经涵盖了这一点 :) - Nick Craver

+1 对于传递对象，还要记住，每当遇到无法记住参数的情况时（例如，您的函数需要5个整数），请重构为使用对象。 - Ivo Wetzel

@RyanP13 - 试试这个，更紧凑，更易于维护 :) http://jsfiddle.net/nick_craver/7NZ7M/1/ - Nick Craver

@RyanP13 - 是的，你需要匿名函数，否则它会立即运行代码，所以你需要onLoadCall: function() { $('body').prepend('<span class="prepend"/>'); }作为选项。如果是命名函数，你只需要写option: functioName，不需要括号。 - Nick Craver

@RyanP13 - 它正在检查传递的是一个函数，所以如果你使用onCompleteCall: "bob"，它不会因为尝试执行"bob".call(this)而出错，因为字符串不具有.call()函数...这只是一种安全检查 :) - Nick Craver

Answer 2

使用 arguments 变量。

function TestMe()
{
   var args = arguments;

   for (var a in args)
   {
     alert(args[a]);
   }
}

现在您可以向 TestMe 函数传递任意数量的参数：

TestMe(1);
TestMe(1,2,3);
TestMe(1,2,3,4,5,6);
TestMe.apply(this, [1,2,3,4,5]); 

etc.

- Piotr

Answer 3

只需循环遍历arguments对象：https://developer.mozilla.org/en/JavaScript/Reference/Functions_and_function_scope/Arguments

- Quentin

Answer 4

感谢展开运算符，现在你可以这样做：

function myFunction(...params) {
  console.log(...params);
}

myFunction('Many arguments', 1, {two: 3}, ["four", 5]);

// to access one by one
function oneByOne(...params) {
  params.map(param => {
   console.log(param);   
  });
}

oneByOne('Many arguments', 1, {two: 3}, ["four", 5]);

- Lasithds

Answer 5

是的，这是可能的，以下是一个例子：

function myfunct()
{

  var arguments = myfunct.arguments;

  for (var i = 0; i < arguments.length; i++)
        {

                alert("Argument " + i + " value = " + arguments[i]);

            }

}

您可以通过任意数量的参数调用此函数：

myfunct("foo");

myfunct("foo","bar");

- Youssef

Answer 6

最近，您现在可以使用展开运算符和剩余参数，如此处所述 - 将未知数量的参数传递到JavaScript函数中

- mzyrc