在 JavaScript 中将数组作为函数参数传递
Posted
技术标签:
【中文标题】在 JavaScript 中将数组作为函数参数传递【英文标题】：Passing an array as a function parameter in JavaScript 【发布时间】：2011-02-20 19:31:49 【问题描述】：我想调用一个使用数组作为参数的函数：
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】：const args = ['p0', 'p1', 'p2'];
call_me.apply(this, args);
请参阅 MDN 文档以获取 Function.prototype.apply()。
如果环境支持 ECMAScript 6，您可以使用 spread argument 代替：
call_me(...args);
【讨论】：
附带说明，如果有人想传递关联数组（命名键），请使用对象。来自 php（并且总是由 google 引导到这个线程），这让我花了一段时间才弄清楚。然后，您可以将整个对象作为参数传递。 w3schools.com/js/js_objects.asp 感谢您指出“传播”论点！不知道。 @timhc - 你的旁注评论很有趣，但我无法解析它（我是一个通过几个教程工作的 javascript 菜鸟）。在 JS 中，关联数组是根据几个教程的对象。 @timhc22 ，当使用 json 对象作为参数传递给函数时，不要忘记 Parameter Destruction 以获得更好的可读性【参考方案2】：为什么不传递整个数组并在函数内部根据需要进行处理？
var x = [ 'p0', 'p1', 'p2' ];
call_me(x);
function call_me(params)
for (i=0; i<params.length; i++)
alert(params[i])
【讨论】：
这是因为我无法修改 call_me()。它是在其他一些库中定义的，不可能与 API 混淆。 +1，因为即使它没有回答最初的问题，也可能是 100K+ 浏览此页面的人正在寻找的内容。 有人能解释一下“call_me(x)”行在做什么吗？它似乎是一个没有 function 关键字的函数名？它到底在做什么？ @swam 这是对call_me 函数的调用。它只是在末尾缺少一个分号。
@swam 它正在执行声明的 call_me(params) 函数。【参考方案3】：
在 ES6 标准中有一个新的 spread operator ... 正是这样做的。
call_me(...x)
除 IE 外，所有主流浏览器都支持。
展开运算符可以做许多其他有用的事情，链接文档在展示这一点方面做得非常好。
【讨论】：
新链接：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…【参考方案4】：假设 call_me 是一个全局函数，所以你不要期望它被设置。
var x = ['p0', 'p1', 'p2'];
call_me.apply(null, x);
【讨论】：
【参考方案5】：正如@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'
【讨论】：
这是一种非常糟糕的做法......如果你查看函数，你将无法看到函数需要什么，并且每个参数都是可选的。【参考方案6】：在使用扩展运算符时，我们必须注意它必须是最后一个或唯一一个传递的参数。否则会失败。
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);
【讨论】：
【参考方案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页面
<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)">
【讨论】：
这显然是答案的一部分。调用后肯定需要“参数”来恢复数组。谢谢！【参考方案8】：函数参数也可以是数组：
function foo([a,b,c], d)
console.log(a,b,c,d);
foo([1,2,3], 4)当然也可以使用spread:
function foo(a, b, c, d)
console.log(a, b, c, d);
foo(...[1, 2, 3], 4)【讨论】：
【参考方案9】：您可以以更基本的形式使用扩展运算符
[].concat(...array)
对于返回数组但预期作为参数传递的函数
例子：
function expectArguments(...args)
return [].concat(...args);
JSON.stringify(expectArguments(1,2,3)) === JSON.stringify(expectArguments([1,2,3]))
【讨论】：
【参考方案10】：答案已经给出，但我只想分一杯羹。你想要实现的在 JS 的上下文中称为method borrowing，当我们从一个对象中获取一个方法并在另一个对象的上下文中调用它时。采用数组方法并将它们应用于参数是很常见的。让我举一个例子。
所以我们有“超级”散列函数，它以两个数字作为参数并返回“超级安全”散列字符串：
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 对象既是可迭代的又是类数组的，但不是真正的数组。下面的方法怎么样？
function hash()
return [].join.call(arguments);
hash(1,2,3,4); // "1,2,3,4" whoaa
诀窍叫method borrowing.
我们从常规数组[].join. 中借用join 方法，并使用[].join.call 在arguments 的上下文中运行它。
为什么会起作用？
那是因为native方法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.
所以，从技术上讲，它需要 this 并将 this[0]、this[1] ...等连接在一起。它是有意以允许任何类似这样的数组的方式编写的（并非巧合，许多方法都遵循这种做法）。这就是为什么它也适用于this=arguments.
【讨论】：
【参考方案11】：有更好的方法使用 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;
【讨论】：
【参考方案12】：你可以使用展开语法
例如：
function print(...inpu)
console.log(...inpu)
var arry = ['p0','p1','p2']
print(...arry)这里是链接：modzilla spread syntax refrence document
【讨论】：
以上是关于在 JavaScript 中将数组作为函数参数传递的主要内容，如果未能解决你的问题，请参考以下文章