在JavaScript中将数组作为函数参数传递


Passing an array as a function parameter in JavaScript

我想使用数组作为参数调用函数：

1
2
3
4
5
6
const x = ['p0', 'p1', 'p2'];
call_me(x[0], x[1], x[2]); // I don't like it

function call_me (param0, param1, param2 ) {
  // ...
}

是否有更好的方法将x的内容传递到call_me()中？

1
2
const args = ['p0', 'p1', 'p2'];
call_me.apply(this, args);

参见Function.prototype.apply()的MDN文档。

如果环境支持ecmascript 6，则可以使用spread参数：

1
call_me(...args);
相关讨论

为什么不传递整个数组，并根据需要在函数内部进行处理？

1
2
3
4
5
6
7
8
var x = [ 'p0', 'p1', 'p2' ];
call_me(x);

function call_me(params) {
  for (i=0; i<params.length; i++) {
    alert(params[i])
  }
}
相关讨论

假设这个调用是一个全局函数，所以您不希望设置它。

1
2
var x = ['p0', 'p1', 'p2'];
call_me.apply(null, x);

在ES6标准中，有一个新的排列运算符...可以做到这一点。

1
call_me(...x)

除IE外，所有主要浏览器都支持它。

spread操作符可以做许多其他有用的事情，并且链接文档在显示这一点上做得非常好。

正如Kaptajnkold回答的那样

1
2
var x = [ 'p0', 'p1', 'p2' ];
call_me.apply(this, x);

您也不需要为call-me函数定义每个参数。你只需使用arguments。

1
2
3
4
5
6
function call_me () {
    // arguments is a array consisting of params.
    // arguments[0] == 'p0',
    // arguments[1] == 'p1',
    // arguments[2] == 'p2'
}
相关讨论

注意这个

1
2
3
4
5
6
7
function FollowMouse() {
    for(var i=0; i< arguments.length; i++) {
        arguments[i].style.top = event.clientY+"px";
        arguments[i].style.left = event.clientX+"px";
    }

};

//————————————————————————————————————————————————————————————————————————————————————————————————————————————--

HTML页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body onmousemove="FollowMouse(d1,d2,d3)">

<p>
Follow1
</p>
<p>
Follow2
</p>
<p>
Follow3
</p>


</body>

可以用任何参数调用函数

1
<body onmousemove="FollowMouse(d1,d2)">

或

1
<body onmousemove="FollowMouse(d1)">
相关讨论

函数参数也可以是数组：

1
2
3
4
5
function foo([a,b,c], d){
  console.log(a,b,c,d);
}

foo([1,2,3], 4)

当然，还可以使用spread：

1
2
3
4
5
function foo(a, b, c, d){
  console.log(a, b, c, d);
}

foo(...[1, 2, 3], 4)

使用Spread运算符时，必须注意它必须是最后传递的或唯一传递的参数。否则就会失败。

1
2
3
4
5
6
7
8
9
10
11
function callMe(...arr){ //valid arguments
    alert(arr);
}

function callMe(name, ...arr){ //valid arguments
    alert(arr);
}

function callMe(...arr, name){ //invalid arguments
    alert(arr);
}

如果需要将数组作为起始参数传递，可以执行以下操作：

1
2
3
4
function callMe(arr, name){
    let newArr = [...arr];
    alert(newArr);
}

答案已经给出了，但我只想给我一块蛋糕。在JS的上下文中，您想要实现的是称为method borrowing，即当我们从一个对象中获取一个方法并在另一个对象的上下文中调用它时。采用数组方法并将其应用于参数是很常见的。我给你举个例子。

所以我们有"super"散列函数，它以两个数字作为参数，并返回"super safe"散列字符串：

1
2
3
4
5
function hash() {
  return arguments[0]+','+arguments[1];
}

hash(1,2); //"1,2" whoaa

到目前为止还不错，但是我们对上面的方法没有什么问题，它是受约束的，只适用于两个数字，这不是动态的，让我们让它适用于任何数字，而且您不必通过一个数组(如果您仍然坚持可以)。好了，说够了，我们战斗吧！

自然的解决方案是使用arr.join方法：

1
2
3
4
5
function hash() {
  return arguments.join();
}

hash(1,2,4,..); //  Error: arguments.join is not a function

哦，伙计。不幸的是，这行不通。因为我们调用的是散列(arguments)，arguments对象既可以是iterable，也可以是array-like，但不是真正的数组。下面的方法怎么样？

1
2
3
4
5
function hash() {
  return [].join.call(arguments);
}

hash(1,2,3,4); //"1,2,3,4" whoaa

这个把戏叫江户十一〔五〕。

我们从一个规则数组[].join.中借用了一个join方法，并使用[].join.call在arguments的上下文中运行它。

为什么有效？

这是因为本地方法arr.join(glue)的内部算法非常简单。

从规范中几乎"原样"提取：

1
2
3
4
5
6
7
Let glue be the first argument or, if no arguments, then a comma",".
Let result be an empty string.
Append this[0] to result.
Append glue and this[1].
Append glue and this[2].
…Do so until this.length items are glued.
Return result.

所以，从技术上讲，它需要这个并将这个[0]、这个[1]…等连接在一起。它是有意以这样的方式编写的(不是巧合，很多方法都遵循这种做法)。这就是为什么它也适用于this=arguments.。

1-可以将数组加入到字符串中2-让它运行3呼叫分离

1
2
3
4
5
6
7
8
var fruits = ["Banana","Orange","Apple","Mango"];
function myFunction(name)
{
    var nameArray = name.split(',');
.
.
.
}

调用方法：

1
myFunction(fruits.join(','));

甚至

1
myFunction("orange,Apple,fruits");