数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究在 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>
我们必须创建一个可以接受任意数量输入的函数。我们可以用两种方法来处理它。
- arguments 对象 (ES5)
- 剩余参数 (ES6)
arguments 对象 (ES5)
示例 2
JavaScript 中所有非箭头函数都可以访问名为 arguments 的局部 JavaScript 对象变量。传递给函数的参数值存储在一个名为 arguments 的类数组对象中，该对象在函数内部可用。
在本例中，让我们了解如何在 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
在使用 reduce 方法之前，必须使用 Array.from 方法将 arguments 对象转换为数组，因为它默认情况下不是数组。箭头函数无法处理 arguments 对象。
<!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>
以下是剩余参数和 arguments 对象之间的区别 -
剩余参数数组可以直接与所有数组方法（如 map、sort 和 filter）一起使用，但 arguments 对象不允许。在对 arguments 对象使用数组方法之前，必须先将其转换为真正的数组。
在函数的使用方式方面，剩余参数更简单，并且具有逻辑语法。
arguments 对象具有其他独特的附加功能（如 callee 属性）。
箭头函数无法访问 arguments 对象。
2K+ 次查看
