使用参数数组调用函数

Question

我可以在 JavaScript 中以方便的方式调用带有参数数组的函数吗？

示例：

var fn = function() {
    console.log(arguments);
}

var args = [1,2,3];

fn(args);

我需要

arguments

成为

[1,2,3]

，就像我的数组一样。

Answer 1

自从ES6推出后，你可以在函数调用中起诉扩展语法：

const args = [1,2,3];

fn(...args);

function fn() {
  console.log(arguments);
}

在 ES6 之前，你需要使用

apply

。

var args = [1,2,3];
fn.apply(null, args);

function fn() {
  console.log(arguments);
}

两者都会产生等效的函数调用：

fn(1,2,3);

请注意，我使用

null

作为

apply

示例的第一个参数，它将在严格模式下将

this

关键字设置为

window

或

fn

内的全局对象 (

undefined

)。

此外，您应该知道

arguments

对象不是一个数组，它是一个类似数组的对象，其中包含与用于调用函数的参数相对应的数字索引，这是一个

length

属性，可为您提供使用的参数数量。

在 ES6 中，如果想要以数组的形式访问可变数量的参数，还可以在函数参数列表中使用 rest 语法：

function fn(...args) {
  args.forEach(arg => console.log(arg))
}

fn(1,2,3)

在 ES6 之前，如果您想从

arguments

对象创建数组，通常使用

Array.prototype.slice

方法。

function fn() {
  var args = Array.prototype.slice.call(arguments);
  console.log(args);
}

fn(1,2,3);

编辑：为了回应您的评论，是的，您可以使用

shift

方法并将其返回值设置为函数的上下文（

this

关键字）：

fn.apply(args.shift(), args);

但请记住，

shift

将从原始数组中删除第一个元素，并且您的函数将在没有第一个参数的情况下被调用。

如果您仍然需要使用所有其他参数调用函数，您可以：

fn.apply(args[0], args);

如果您不想更改上下文，您可以提取函数中的第一个参数：

function fn(firstArg, ...args) {
   console.log(args, firstArg);
}

fn(1, 2, 3, 4)

在 ES5 中，这会更冗长一些。

function fn() {
  var args = Array.prototype.slice.call(arguments),
        firstArg = args.shift();

  console.log(args, firstArg);
}

fn(1, 2, 3, 4);

Answer 2

在 ECMAScript 6 中，您可以使用 扩展语法 (

...

) 来实现此目的。比

Function.prototype.apply()

更简单易懂。

代码示例：

const fn = function() {
  console.log(arguments);
}

const args = [1,2,3];

fn(...args);

Answer 3

只需使用Function.prototype.apply()，它适用于新旧浏览器。

就您而言，它很简单：

var fn = function() {
    console.log(arguments);
}

var args = [1,2,3];

fn.apply(null, args);

注意：空值位于对象实例的位置，在本例中不适用。如果调用对象的方法，请改为传递对象。