掌握JS函數中的幾種參數形式（函數基礎）

時間 2019-11-06

標籤掌握函數幾種參數形式基礎欄目 JavaScript 简体版

原文原文鏈接

做者：Dmitri Pavlutin
譯者：前端小智
來源：dmitripavlutin

阿里雲最近在作活動，低至2折，有興趣能夠看看：
https://promotion.aliyun.com/...

爲了保證的可讀性，本文采用意譯而非直譯。javascript

函數是一段結合在一塊兒執行特定任務的代碼，函數通常使用參數與外部進行交互。要編寫簡潔高效的JS代碼，必須掌握函數參數。html

在本文中，會使用一些有趣的例子來解釋 JS 必須有效地處理函數參數的全部特性。前端

1.函數參數

JS 函數能夠有任意數量的參數。我們來定義具備0、1和2個參數的函數。java

// 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 代替。git

例如，我們用一個參數調用函數sum()(它有兩個參數)github

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。ide

若是有必要，能夠驗證參數是不是 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屬性）。