JavaScript 函数中的无限参数
Posted
技术标签:
【中文标题】JavaScript 函数中的无限参数【英文标题】：Unlimited arguments in a JavaScript function 【发布时间】：2011-09-17 18:30:42 【问题描述】：javascript 函数可以接受无限参数吗？ 像这样的：
testArray(1, 2, 3, 4, 5...);
我正在尝试：
var arr = [];
function testArray(A)
arr.push(A);
但这不起作用（输出只是第一个参数）。或者唯一的方法是：
function testArray(a, b, c, d, e...)
谢谢
【问题讨论】：
作为替代方案，您可以有一个参数 - “无限”容器，例如数组（或对象），然后将所有内容作为数组传递，即使只有...([one_arg])...跨度>
注意直接回答问题No you can't.
【参考方案1】：
有一些遗留方法，但我更喜欢ES6 和更新的版本，所以如果我想实现这个，我写了如下：
const func = (...arg) => console.log(arg);
简单而前沿的技术。
【讨论】：
这不是完全有效的 JavaScript。我推荐这个问题的其他答案来解释这个特性。 @LucienGreathouse，感谢您的评论，我添加了括号，现在可以使用了，对不起。【参考方案2】：const outputDiv=document.querySelector('.output');
const output=(...x)=>
return outputDiv.innerhtml=x;
output(1,2,3,4,['hello',5,6],true,null);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Practice</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,800;1,900&display=swap" rel="stylesheet">
<style>
bodyfont-family: 'Raleway', sans-serif; background-color: #060606;
.centerheight:100vh; width: 100%; display: grid;align-items:center;justify-content: center;
.outputfont-size: 15px;color: rgb(59, 59, 255);font-weight: 200;
</style>
</head>
<body>
<div class="center">
<div class='output'></div>
</div>
<script src="js.js"></script>
</body>
</html>【讨论】：
请解释为什么/如何解决问题，请参阅How To Answer【参考方案3】：Javascript ES5
function testArray()
for(index = 0; index < arguments.length; i++)
alert(arguments[index])
Javascript ES6
const testArray = (...arg) => console.log(arg)
【讨论】：
【参考方案4】：您也可以直接“投射”它，省去丑陋的循环：
var getArguments = function()
return arguments;
;
var foo = getArguments(1,2,3,4);
// console.log(foo.slice()); => TypeError: foo.slice is not a function
var foo = Object.values(foo);
console.log(foo); // => [ 1, 2, 3, 4 ]
foo.push(5);
console.log(foo); // => [ 1, 2, 3, 4, 5 ]
【讨论】：
【参考方案5】：使用 ECMAScript 6，您可以使用其余参数语法：
const testArray = (...args) =>
console.log(args);
;
testArray(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
【讨论】：
【参考方案6】：从 ECMAScript 2015（或 ES6）开始，我们还可以访问 rest parameters，这为我们提供了一种更简洁的方式来管理参数：
function foo(a, b, ...others)
console.log("a and b are ", a, b);
for (let val of others)
console.log(val);
foo(1, 2, 3, 4, 5);
在撰写本文时，Chrome 47+、Firefox 15+ 和 Edge 均支持此功能。该功能还可以通过 Babel 和 TypeScript 转译到 ES5 来使用。
【讨论】：
谢谢，这正是我想要的。尤其是 MDN 链接，我只是想不起它的名字。 :)【参考方案7】：有一个奇怪的“魔术”变量可以引用，称为“参数”：
function manyArgs()
for (var i = 0; i < arguments.length; ++i)
alert(arguments[i]);
它就像一个数组，但它不是一个数组。事实上，这太奇怪了，你根本不应该使用它。一种常见的做法是将它的值放入 real 数组中：
function foo()
var args = Array.prototype.slice.call(arguments, 0);
// ...
在该示例中，“args”将是一个普通数组，没有任何奇怪之处。 “参数”存在各种令人讨厌的问题，在 ECMAScript 5 中，它的功能将被缩减。
edit — 尽管使用 .slice() 函数确实很方便，但事实证明，将 arguments 对象从函数中传递出去会导致优化问题，以至于函数执行它可能根本没有得到优化。因此，将arguments 转换为数组的简单直接的方法是
function foo()
var args = [];
for (var i = 0; i < arguments.length; ++i) args[i] = arguments[i];
// ...
More about arguments and optimization.
【讨论】：
没有什么“神奇”或奇怪的地方，参数对象在 ECMA-262 中定义。它与数组的唯一相似之处是它的长度属性比它的最高数字属性名称多一个。除此之外，它只是一个具有属性的对象。 我很有诗意 :-) “参数”变量是很奇怪 - 它也有像“被调用者”属性这样的东西。 @SmartLemon 我不确定我完全明白你的意思。我并不是想无益。除了“从中提取尿液”之外，美国人对这种表达方式一无所知。 抱歉 xD。我想这不是那里的常见表达方式。就像在取笑它。在这种情况下，就像你在取笑这个问题，好像我们无论如何都应该知道一样。 这里详细解释***.com/questions/5145032/…【参考方案8】：function toArray()
return arguments;
var myargs = toArray(1, 2, 3, 4, 5, 6);
arguments 关键字在每个 js 函数中都可用
【讨论】：
arguments 不是“类型”Array，它只是一种“可迭代”，这在 JS 方面相当蹩脚。【参考方案9】：
var arr = [];
function testArray()
Array.prototype.push.apply(arr, arguments);
【讨论】：
以上是关于JavaScript 函数中的无限参数的主要内容，如果未能解决你的问题，请参考以下文章
如何将无限参数和一个或两个参数传递给 JavaScript 函数？ [复制]