掌握JS函数中的几种参数形式（函数基础）

做者：Dmitri Pavlutin

译者：前端小智

来源：dmitripavlutin

---

阿里云最近在作活动，低至2折，有兴趣能够看看：promotion.aliyun.com/ntms/yunpar…

---

为了保证的可读性，本文采用意译而非直译。

函数是一段结合在一块儿执行特定任务的代码，函数通常使用参数与外部进行交互。要编写简洁高效的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: '前端小智' };
greet(person); // => 'Hello, 前端小智!'
复制代码

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

固然也能够结合默认参数：

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

greetWithDefault(); // => 'Hello, 无名氏!'
复制代码

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

可使用组合不一样类型解构的全部功能。例如，让咱们对同一个参数使用对象和数组解构。

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

const persons = [{ name: '王小智' }, { name: '王大治'}];
greeFirstPerson(persons); // => '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); // => 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); // => 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); // => 22
复制代码

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

剩余参数和 arguments对象的区别

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

• 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的全部实参。

• arguments对象不是一个真正的数组，而剩余参数是真正的 Array实例，也就是说你可以在它上面直接使用全部的数组方法，好比 sort，map，forEach或pop。

• arguments对象还有一些附加的属性 （如callee属性）。

6. 总结

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

当缺乏参数时，能够很容易地设置默认值。

JS 解构的全部功能均可以应用于参数。甚至能够将解构与默认参数结合使用。

arguments 是一个特殊的类数组对象，它包含函数调用时使用的全部参数。

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

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：dmitripavlutin.com/javascript-…

交流

阿里云最近在作活动，低至2折，有兴趣能够看看：promotion.aliyun.com/ntms/yunpar…

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

github.com/qq449245884…

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。