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

我想调用一个函数使用数组作为参数:

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()?

744882 次浏览
小开
最佳答案 
const args = ['p0', 'p1', 'p2'];
call_me.apply(this, args);

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

如果环境支持ECMAScript 6，你可以使用传播参数代替:

call_me(...args);
小开

为什么不传递整个数组并在函数中根据需要处理它呢?

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


function call_me(params) {
for (i=0; i<params.length; i++) {
alert(params[i])
}
}
小开

假设call_me是一个全局函数，因此不需要设置此值。

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

正如@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'
}
小开

注意这

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页面

<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)">
小开

在ES6标准中，有一个新的传播算子 ...，它正是这样做的。

call_me(...x)

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

展开操作符可以做许多其他有用的事情，链接的文档在这方面做得非常好。

小开

函数参数也可以是数组:

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)

小开

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

所以我们有一个"super"哈希函数，它接受两个数字作为参数，并返回"super安全"的哈希字符串:

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


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

到目前为止还不错，但我们对上面的方法有一些问题，它是受约束的，只适用于两个数字，这不是动态的，让我们让它适用于任何数字，加上你不必传递一个数组(如果你仍然坚持，你可以)。好了，说够了，我们打吧!

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

function hash() {
return arguments.join();
}


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

哦,男人。不幸的是，这行不通。因为我们调用hash(arguments)和arguments object是可迭代的和类数组的，但不是一个真正的数组。下面的方法怎么样?

function hash() {
return [].join.call(arguments);
}


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

这个技巧叫做method borrowing.

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

为什么它能起作用?

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

从规范中几乎“按原样”提取:

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.

小开

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

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);
}
小开

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

[].concat(...array)

对于返回数组但希望作为参数传递的函数

例子:

function expectArguments(...args){
return [].concat(...args);
}


JSON.stringify(expectArguments(1,2,3)) === JSON.stringify(expectArguments([1,2,3]))
小开

使用JSON而不是数组有更好的方法!

   // Call a function with a Json Key / Value Pair:
sendMail({param1: p1, param2: p2});


// Function definition and usage of value pairs:
function sendMail(data){
var parameter1 = data.param1;
var parameter2 = data.param2;
}
小开

您可以使用扩展语法

例如:

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

这里是链接:Modzilla传播语法参考文档

提交答案