如何理解和掌握 JavaScript 函数参数? 下面本篇文章就来给大家介绍一下 JavaScript 函数中的几种参数形式. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
函数是一段结合在一起执行特定任务的代码, 函数一般使用参数与外部进行交互. 要编写简洁高效的 JS 代码, 必须掌握函数参数.
在本文中, 会使用一些有趣的例子来解释 JS 必须有效地处理函数参数的所有特性.
1. 函数参数
JS 函数可以有任意数量的参数. 咱们来定义具有 0,1 和 2 个参数的函数.
- // 0 个参数
- function zero() {
- return 0;
- }
- // 1 个参数
- function identity(param) {
- return param;
- }
- // 2 个参数
- function sum(param1, param2) {
- return param1 + param2;
- }
- zero(); // => 0
- identity(1); // => 1
- sum(1, 2); // => 3
上面的 3 个函数调用传入的参数个数与函数定义参数个数相同. 当然传入参数比定义参数个数少的时候, JS 允许咱们这样, 不会报错, 缺少会使用 undefined 代替.
例如, 咱们用一个参数调用函数 sum()(它有两个参数)
- function sum(param1, param2) {
- console.log(param1); // 1
- console.log(param2); // undefined
- return param1 + param2;
- }
- sum(1); // => NaN
只有一个参数调用该函数: sum(1). 这样 param1 的值是 1, 但是第二个参数 param2 是会用 undefined 初始化的.
param1 + param2 的值为 1 + undefined, 结果为 NaN.
如果有必要, 可以验证参数是否是 undefined , 并提供一个默认值.
- function sum(param1, param2) {
- if (param2 === undefined) {
- param2 = 0;
- }
- return param1 + param2;
- }
- sum(1); // => 1
当然还有更好做法, 就是使用默认参数, 来看看.
2. 默认参数
ES6 默认参数特性允许使用默认值初始化参数. 这种比上面介绍的方法更好, 更简洁.
接着使用 ES6 默认参数特性将 param2 默认为 0.
- function sum(param1, param2 = 0) {
- console.log(param2); // => 0
- return param1 + param2;
- }
- sum(1); // => 1
- sum(1, undefined); // => 1
现在如果没有传入第二个参数, param2 就默认为 0 .
注意, 如果将 undefined 设置为第二个参数 sum(1, undefined), param2 也将初始化为 0.
3. 解构参数
在 JS 函数参数中, 咱特别喜欢的是解构的特性. 可以将内联参数的对象或数组进行解构. 这个特性使得从参数对象中提取一些属性非常有用
- function greet({ name }) {
- return `Hello, ${name}!`;
- }
- const person = { name: 'John Smith' };
- greet(person); // => 'Hello, John Smith!'
{ name }是应用于对象解构的参数.
当然也可以结合默认参数:
- function greetWithDefault({ name = 'Unknown' } = {}) {
- return `Hello, ${name}!`;
- }
- greetWithDefault(); // => 'Hello, Unknown!'
{name = 'Unknown'} ={} 默认为空对象.
可以使用组合不同类型解构的所有功能. 例如, 让我们对同一个参数使用对象和数组解构.
- function greeFirstPerson([{ name }]) {
- return `Hello, ${name}!`;
- }
- const persons = [{ name: 'John Smith' }, { name: 'Jane Doe'}];
- greeFirstPerson(persons); // => 'Hello, John Smith!'
[{name}]的解构较为复杂, 它提取数组的第一项, 然后从中对象读取 name 属性.
4. arguments 对象
JS 函数的另一个很好的特性是能够用可变参数调用同一个函数. 这样可以使用 arguments 对象来获取传入的所有参数.
arguments 对象是所有 (非箭头) 函数中都可用的局部变量. 你可以使用 arguments 对象在函数中引用函数的参数.
例如, 对函数的参数求和:
- function sumArgs() {
- console.log(arguments); // { 0: 5, 1: 6, length: 2 }
- let sum = 0;
- for (let i = 0; i <arguments.length; i++) {
- sum += arguments[i];
- }
- return sum;
- }
- sumArgs(5, 6); // => 11
arguments 是一个对应于传递给函数的参数的类数组对象.
有个问题是, 每个函数作用域都定义了自己的 arguments 对象. 因此, 可能需要一个额外的变量来访问外部函数作用域 arguments:
- function outerFunction() {
- const outerArguments = arguments;
- return function innerFunction() {
- // outFunction arguments
- outerArguments[0];
- };
- }
4.1 箭头函数情况
有一种特殊情况: 箭头 w 函数中没有 arguments .
- const sumArgs = () => {
- console.log(arguments);
- return 0;
- };
- // throws: "Uncaught ReferenceError: arguments is not defined"
- sumArgs();
但这问题不. 可以使 REST 参数访问箭头函数内的所有参数. 来 look look.
5. REST 参数
ES2015 REST 参数语法允许咱们将一个不定数量的参数表示为一个数组.
让我们使用 REST 参数对参数求和:
- function sumArgs(...numbers) {
- console.log(numbers); // [5, 6]
- return numbers.reduce((sum, number) => sum + number);
- }
- sumArgs(5, 6); // => 11
...numbers 是一个 REST 参数, 它将成为一个由 REST 参数组成的真数组[5,6]. 由于 numbers 是一个数组, 所以就可以使用数组自有方法 reduce(与 arguments 类数组对象的参数相反).
虽然该 arguments 对象在箭头函数中不可用, 但其余参数在这里正常工作:
- const sumArgs = (...numbers) => {
- console.log(numbers); // [5, 6]
- return numbers.reduce((sum, number) => sum + number);
- }
- sumArgs(5, 6); // => 11
如果不想在 REST 参数中收集所有参数, 则可以组合常规参数和 REST 参数.
- function multiplyAndSumArgs(multiplier, ...numbers) {
- console.log(multiplier); // 2
- console.log(numbers); // [5, 6]
- const sumArgs = numbers.reduce((sum, number) => sum + number);
- return multiplier * sumArgs;
- }
- multiplyAndSumArgs(2, 5, 6); // => 22
multiplier 是一个常规参数, 它获取第一个参数的值. 然后 REST 参数...numbers 接收其余的参数.
请注意, 每个函数最多可以有一个 REST 参数. 其余参数必须位于函数参数列表的最后.
REST 参数和 arguments 对象的区别
REST 参数和 arguments 对象之间的区别主要有三个:
REST 参数只包含那些没有对应形参的实参, 而 arguments 对象包含了传给函数的所有实参.
arguments 对象不是一个真正的数组, 而 REST 参数是真正的 Array 实例, 也就是说你能够在它上面直接使用所有的数组方法, 比如 sort,map,forEach 或 pop.
arguments 对象还有一些附加的属性 (如 callee 属性).
6. 总结
除了基本用法之外, JS 在处理函数参数时还提供了许多有用的特性.
当缺少参数时, 可以很容易地设置默认值.
JS 解构的所有功能都可以应用于参数. 甚至可以将解构与默认参数结合使用.
arguments 是一个特殊的类数组对象, 它包含函数调用时使用的所有参数.
作为 arguments 的更好替代, 可以使用 REST 参数特性. 它也保存参数列表, 但是, 它将它们存储到数组中.
来源: http://www.css88.com/web/javascript/16109.html