使用可变数量的输入 arguments 编写 function

Question

I have a javascript function whose number of input arguments is not known ( has variable number of arguments) and it has also an input dictionary argument called "kwargs" argument which can have some other arguments as (key,value), like this:

function plot( data, kwargs={}){
}

I want to get both the "name" and "value" of the arguments in the body of the function when I call the function with a number of arguments. 假设我想要像这样调用 function：

plot(lines, xlabel="Project", 
        ylabel="Investor", 
        xfmt="%", xscale=100, yfmt="%.", yscale=100)

我想在 function 定义中获得“xlable”、“Project”、“ylabel”、“Investor”、“xfmt”、“%”等（可能还有更多参数）。

我该如何写'情节' function def？

Answer 1

function plot( data, kwargs={},...restArguments){
                                                }

然后您可以通过 restArguments 数组获取值，但您无法获取 arguments 的名称。

Answer 2

由于 JavaScript 不支持命名 arguments，因此您最好的选择是使用下面描述的字典方法来处理变量参数。

你可以：

1. 使用字典作为参数。 这将允许您通过其属性名称访问“参数”。
   但是，这将要求调用者传递一个 object，它可能会在每次调用 function 时创建，从而给您的程序带来一些额外的开销。
2. 使用arguments object 。 这适用于每个版本的 ECMAScript。
   但是，您必须使用等于命名参数数量的偏移量来访问它。
3. 使用Rest 参数语法。 这从 ES6 开始有效，建议使用arguments方法。

请注意，如果不进行一些重构，您将无法使用方法 2 和 3。

使用字典

以object为参数，使用属性为实际参数。 这样，您可以（某种程度上）通过它们的标识符来引用它们。

这将使：

function aFunc(aVar, anotherVar, aThirdVar) {
  console.log(aVar, anotherVar, aThirdVar);
}

对此：

function aFunc(data) {
  console.log(data.aVar, data.anotherVar, data.aThirdVar);
}

新的 function 可以这样调用：

aFunc({aVar: 5, anotherVar: 10, aThirdVar: 20}); // Works
// -- or --
// Note the un-ordered properties
aFunc({aThirdVar: 20, aVar: 5, anotherVar: 10}); // Also works

但是，这会带来以下问题：

• 函数的调用方式并不直观
• 为属性定义回退值必须以非本地方式实现。
  可以通过这样的短路来实现这一点： data.var ||= 'fallback-value'; .
• IDE 无法在执行前静态检查您的代码是否存在错误
• 参数列表对开发人员没有帮助
• 最重要的是：必须通过实际的 object。 这很可能是为一次调用创建的，当 function 被多次调用时，这会给程序带来不必要的开销。

使用这种方法的优点是：

• “参数”定义为 object 的属性。 这使词汇 scope 保持干净（-er）。
  但是，这不应成为决定选择哪种方法的因素。
• 由于 object 的属性（默认情况下）是可枚举的，因此您既可以获得属性的名称，也可以获得它的值（这可能是您的目标）。

使用arguments object

由于arguments存在于所有版本的 ECMAScript 中，因此当目标是（相当多的）向后兼容性时，我会推荐这种方法。

arguments is present in any function execution context, meaning in both function declarations as well as function expressions , however not in arrow-function (lambda) expressions (added in ES6; for ES6 usage, using the Rest Parameter-syntax is recommended anyway).

使用它，您可以使用 function 的参数以及访问 function 的参数列表中未列出的任何其他参数。

引用谷歌的 JavaScript 风格指南：

采用可变数量 arguments 的函数应具有名为 var_args 的最后一个参数。 您可能不会在代码中引用 var_args； 使用 arguments 阵列。

请注意，仅仅因为谷歌这样做并不意味着这是一个人应该编码的方式。 它只是在处理 Google 代码时如何编码的指南（。）。

以下是遵循 Google 风格指南的示例：

function aFunc(first, second, var_args) {
  console.log(first, second, arguments[2], arguments[3]);
}

aFunc(5, 10, 20); // => '5 10 20 undefined'

使用 Rest 参数语法

ES6 中引入了 Rest 参数语法和箭头函数 (lambda) 表达式。

由于建议使用此方法而不是使用arguments object，因此在决定使用两者中的哪一个时，应尝试实施此方法，因为访问其余参数更直观，它也适用于箭头函数表达式，并且 Z55276C10D84E1DF7713B441E 参数为一个实际的数组。

因为 Rest 参数是一个实际的数组，所以可以使用扩展语法以及Array继承的任何功能，这与arguments object 不同。

这是一个类似于arguments对象方法的示例，现在使用 Rest 参数语法代替：

function aFunc(first, second, ...rest) {
  console.log(first, second, rest[0], rest[1]);
}

aFunc(5, 10, 20);