1. 首页
  2. 前端基础

掌握JS函数中的几种参数形式(函数基础)

函数是一段结合在一起执行特定任务的代码,函数一般使用参数与外部进行交互。要编写简洁高效的JS代码,必须掌握函数参数。

在本文中,会使用一些有趣的例子来解释 JS 必须有效地处理函数参数的所有特性。

1.函数参数

JS 函数可以有任意数量的参数。咱们来定义具有012个参数的函数。


// 0 个参数 function zero() { return 0; } // 1 个参数 function identity(param) { return param; } // 2 个参数 function sum(param1, param2) { return param1 + param2; } zero(); // Js中文网 => 0 identity(1); // Js中文网 => 1 sum(1, 2); // Js中文网 => 3

上面的3个函数调用传入的参数个数与函数定义参数个数相同。当然传入参数比定义参数个数少的时候, JS 允许咱们这样,不会报错,缺少会使用 undefined 代替。

例如,咱们用一个参数调用函数sum()(它有两个参数)


function sum(param1, param2) { console.log(param1); // 1 console.log(param2); // undefined return param1 + param2; } sum(1); // Js中文网 => 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); // Js中文网 => 1

当然还有更好做法,就是使用默认参数,来看看。

2. 默认参数

ES6 默认参数特性允许使用默认值初始化参数。这种比上面介绍的方法更好、更简洁。

接着使用ES6默认参数特性将param2默认为0


function sum(param1, param2 = 0) { console.log(param2); // Js中文网 => 0 return param1 + param2; } sum(1); // Js中文网 => 1 sum(1, undefined); // Js中文网 => 1

现在如果没有传入第二个参数,param2 就默认为 0 。

注意,如果将undefined设置为第二个参数sum(1, undefined)param2也将初始化为0

3.解构参数

在JS函数参数中,咱特别喜欢的是解构的特性。可以将内联参数的对象或数组进行解构。这个特性使得从参数对象中提取一些属性非常有用

function greet({ name }) {
  return `Hello, ${name}!`;
}

const person = { name: '前端小智' };
greet(person); // Js中文网 => 'Hello, 前端小智!'

{ name }是应用于对象解构的参数。

当然也可以结合默认参数

function greetWithDefault({ name = '无名氏' } = {}) {
  return `Hello, ${name}!`;
}

greetWithDefault(); // Js中文网 => 'Hello, 无名氏!'

{name = 'Unknown'} ={} 默认为空对象。

可以使用组合不同类型解构的所有功能。例如,让我们对同一个参数使用对象和数组解构。

function greeFirstPerson([{ name }]) {
  return `Hello, ${name}!`;
}

const persons = [{ name: '王小智' }, { name: "JS中文网"}];
greeFirstPerson(persons); // Js中文网 => 'Hello, 王小智!'

[{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); // Js中文网 => 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();

但这问题不。 可以使剩余参数访问箭头函数内的所有参数。来 look look。

5. 剩余参数

剩余参数语法允许咱们将一个不定数量的参数表示为一个数组

老样子,来 see see。


function sumArgs(...numbers) { console.log(numbers); // [5, 6] return numbers.reduce((sum, number) => sum + number); } sumArgs(5, 6); // Js中文网 => 11

...numbers是一个剩余参数,它将成为一个由剩余参数组成的真数组[5,6]。由于numbers 是一个数组,所以就可以使用数组自有方法reduce(与类数组对象的参数相反)。

如果不想在剩余参数中收集所有参数,则可以组合常规参数剩余参数


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); // Js中文网 => 22

multiplier 是一个常规参数,它获取第一个参数的值。然后剩下的参数...numbers 接收剩余的参数。

剩余参数和 arguments对象的区别

剩余参数和 arguments对象之间的区别主要有三个:

  • 剩余参数只包含那些没有对应形参的实参,而 arguments 对象包含了传给函数的所有实参。
  • arguments对象不是一个真正的数组,而剩余参数是真正的 Array实例,也就是说你能够在它上面直接使用所有的数组方法,比如 sortmapforEachpop
  • arguments对象还有一些附加的属性 (如callee属性)。

6. 总结

除了基本用法之外,JS在处理函数参数时还提供了许多有用的特性。

当缺少参数时,可以很容易地设置默认值。

JS 解构的所有功能都可以应用于参数。甚至可以将解构与默认参数结合使用。

arguments 是一个特殊的类数组对象,它包含函数调用时使用的所有参数。

作为arguments的更好替代,可以使用剩余参数特性。它也保存参数列表,但是,它将它们存储到数组中。

*

码农进阶题库,每天一道面试题 or Js小知识 https://www.javascriptc.com/interview-tips/

作者:Dmitri Pavlutin
译者:前端小智
链接:https://dmitripavlutin.com/javascript-function-parameters/

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:掌握JS函数中的几种参数形式(函数基础)

链接:https://www.javascriptc.com/3459.html

« Js中文网周刊第64期
JavaScript内存是如何管理的»
Flutter 中文教程资源

相关推荐

QR code