在 Javascript 中向函数传递未知数量的参数
术语"参数"和"函数的参数"在 JavaScript 中经常被当作同义词使用，尽管两者之间存在实质性区别。函数参数包含在定义函数时。在定义函数时，您还可以指定变量列表；这些变量称为函数参数。另一方面，"函数参数"是我们在调用或执行新创建的函数时传递的值。
在 JavaScript 中，函数声明中列出的变量用作参数值。函数定义中的参数在我们创建函数时使用。下面提供的语法显示了可以放在括号内并用逗号分隔的参数数量。
示例 1
无论函数声明指示什么，JavaScript 都允许您在调用函数时传递任意数量的参数。函数参数长度不受限制。
在此示例中，让我们通过创建一个接受两个参数的函数来理解基本示例。任何数量的输入都将始终产生相同的结果，因为它仅接受前两个参数。
<!DOCTYPE html> <html> <title>Passing unknown number of arguments to a function in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="text-align:center"> <script> // function with two parameters function addPara(x, y) { return x + y; } document.write(addPara(5, 3) +'<br>'); // 8 document.write(addPara(5, 3, 2)); // 8 </script> </body> </html>
我们必须创建一个可以接受任意数量输入的函数。我们有两种方法可以处理它。
- 参数对象 (ES5)
- 剩余参数 (ES6)
参数对象 (ES5)
示例 2
JavaScript 中的所有非箭头函数都可以访问称为参数的本地 JavaScript 对象变量。提供给函数的参数的值存储在名为参数的类似数组的对象中，该对象可在函数内部访问。
在此示例中，让我们了解如何在 ES5 中编写一个接受 n 个参数的函数 −
<!DOCTYPE html> <html> <title>Passing unknown number of arguments to a function in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="text-align:center"> <script> // function with n number of parameters function addPara() { let addNum = 0; for (let i = 0; i < arguments.length; i++) { addNum += arguments[i]; } return addNum; } document.write(addPara(5, 10, 15) +'<br>'); // 30 document.write(addPara(10, 20, 30, 40, 50) +'<br>'); // 150 document.write(addPara(10, 20, 10, 20)); // 60 </script> </body> </html>
示例 3
除非使用 Array.from 方法将参数对象转换为数组，否则无法使用 reduce 方法，因为默认情况下它不是数组。箭头函数无法处理参数对象。
<!DOCTYPE html> <html> <title>Passing unknown number of arguments to a function in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="text-align:center"> <script> // function with n number of parameters function addPara() { let arg = Array.from(arguments); return arg.reduce(function (acc, cur) { return acc + cur; }) } document.write(addPara(5, 10, 15) +'<br>'); // 30 document.write(addPara(10, 20, 30, 40, 50) +'<br>'); // 150 document.write(addPara(10, 20, 10, 20)); // 60 </script> </body> </html>
剩余参数 (ES6)
示例 4
为了处理无限数量的参数，剩余参数 提供了一种更简单、更干净的方法。上一个示例现在应包含一个 剩余参数。我们可以使用与 扩展运算符 具有相同语法的 剩余参数 向我们的函数传递无限数量的参数。
<!DOCTYPE html> <html> <title>Passing unknown number of arguments to a function in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="text-align:center"> <script> // using rest parameter in ES6 function addPara(...args){ return args.reduce(function (acc, cur) { return acc + cur; }) } document.write(addPara(5, 10, 5) +'<br>'); // 20 document.write(addPara(10, 20, 10, 20, 30) +'<br>'); // 90 document.write(addPara(10, 20, 10, 20)); // 60 </script> </body> </html>
以下是其余参数和参数对象之间的区别 -
其余参数数组可以直接应用于所有数组方法，例如 map、sort 和 filter，但不允许使用参数对象。在对参数对象使用数组方法之前，必须先将其转换为真正的数组。
就函数的使用方式而言，其余参数更直接，语法合乎逻辑。
arguments 对象具有其独有的附加功能(如 callee 属性)。
箭头函数无法访问参数对象。
