logo标签列表

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

javascriptarraysfunctioncall
368
我想使用数组作为参数调用一个函数：
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()？

12个回答
499
10
顺便提一下，如果有人想传递一个关联数组（即命名键），那么请使用对象。来自PHP（并且总是被谷歌引导到这个线程），我花了一些时间才明白这一点。你可以将整个对象作为参数传递。http://www.w3schools.com/js/js_objects.asp - timhc22
感谢指出“spread”参数！我不知道它。 - Thomas An
@timhc - 你的侧注评论很有趣，但我无法解析它（我是一个 JavaScript 新手，正在通过几个教程学习）。在 JS 中，根据几个教程，关联数组确实是一个对象。 - NateT
@timhc22，当使用JSON对象作为参数传递给函数时，请不要忘记使用参数解构以获得更好的可读性。 - Muhammad Omer Aslam
从来没想过有一天会用到它，现在终于要用到扩展参数了。 - Timo
146

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

var x = [ 'p0', 'p1', 'p2' ]; 
call_me(x);

function call_me(params) {
  for (i=0; i<params.length; i++) {
    alert(params[i])
  }
}
41
因为我无法修改call_me()函数。它是在另一个库中定义的，不能干扰该API。 - Robert
81
+1 是因为尽管它并没有回答原始问题，但这可能是查看该页面的100K+人正在寻找的内容。 - Ishikawa
有人能解释一下 "call_me(x)" 这行代码的作用吗？它似乎是一个没有函数关键字的函数名？它到底在做什么？ - swam
1
@swam 这是对call_me函数的调用。它只是缺少末尾的分号。 - SantiBailors
@swam正在执行声明的call_me(params)函数。 - Julio Rodriguez
69
在ES6标准中，有一个新的展开操作符...，它可以实现这个功能。
call_me(...x)

除了IE浏览器外，所有主流浏览器均支持它。
扩展运算符还可以执行许多其他有用的操作，相关文档已经很好地说明了这一点。
2
新链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax - Tim Morton
46
假设call_me是一个全局函数，因此您不希望设置this。
var x = ['p0', 'p1', 'p2'];
call_me.apply(null, x);
8
作为@KaptajnKold的回答所述，
var x = [ 'p0', 'p1', 'p2' ];
call_me.apply(this, x);

而且你不必为call_me函数定义每个参数。你只需要使用arguments

function call_me () {
    // arguments is a array consisting of params.
    // arguments[0] == 'p0',
    // arguments[1] == 'p1',
    // arguments[2] == 'p2'
}
4
这样的做法很糟糕...如果你查看函数，就无法看到它需要什么参数，因为每个参数都是可选的。 - Robin
7

在使用扩展运算符时，我们必须注意它必须是最后一个或唯一的参数传递。否则它会失败。

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

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

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

如果您需要将数组作为起始参数传递，则可以执行以下操作：
function callMe(arr, name){
    let newArr = [...arr];
    alert(newArr);
}
5

函数参数也可以是数组：

function foo([a,b,c], d){
  console.log(a,b,c,d);
}

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

当然也可以使用展开语法：

function foo(a, b, c, d){
  console.log(a, b, c, d);
}

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

4

你可以使用扩展运算符

例如：

function print(...inpu){
console.log(...inpu)
}
var arry = ['p0','p1','p2']
print(...arry)

这里是链接：Mozilla Spread Syntax参考文档
1
这在技术上是BoltKey在你写这篇文章1.5年前所写的相同答案。 - Harry
3
请注意这一点。
function FollowMouse() {
    for(var i=0; i< arguments.length; i++) {
        arguments[i].style.top = event.clientY+"px";
        arguments[i].style.left = event.clientX+"px";
    }

};
页面 
<body onmousemove="FollowMouse(d1,d2,d3)">

<p><div id="d1" style="position: absolute;">Follow1</div></p>
<div id="d2" style="position: absolute;"><p>Follow2</p></div>
<div id="d3" style="position: absolute;"><p>Follow3</p></div>


</body>

可以使用任何参数调用函数

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

或者

<body onmousemove="FollowMouse(d1)">
这显然是答案的一部分。在调用后，"arguments"绝对是必需的，以便获取数组。谢谢！ - FlorianB
1

你可以以更基本的形式使用展开运算符

[].concat(...array)

在返回数组的函数作为参数传递的情况下，
例如：
function expectArguments(...args){
  return [].concat(...args);
}

JSON.stringify(expectArguments(1,2,3)) === JSON.stringify(expectArguments([1,2,3]))
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接