實參和形參

在解釋預設函式引數之前，重要的是要知道引數的預設值是什麼。所以我們先回顧函式中實參和形參之間的區別。

在下面的程式碼中，我們建立一個函式，該函式返回一個給定數的立方：

function cube(x) {
  return x * x * x
}

此示例中的x變數是一個引數-傳遞給函式的命名變數，引數必須始終包含在變數中。接著，我們來呼叫一下這個函式：

cube(10) // 1000

在這種情況下，10是一個引數—呼叫時傳遞給函式的值。 通常，值也可以用變數，如：

const number = 10

cube(number) // 1000

如果沒有將引數傳遞該函式，函式將隱式地使用undefined作為預設值：

cube() // NaN

在本例中，cube()試圖計算undefined * undefined * undefined的值，結果是NaN。

這種自動的行為有時會造成問題。在某些情況下，我們希望引數具有一個值，即使沒有向函式傳遞引數。這就是預設引數特性派上用場的地方。

預設引數語法

如果沒有預設引數，我們就需要顯式檢查undefined的值才能設定預設值，如以下示例所示：

function cube(x) {
  if (typeof x === 'undefined') {
    x = 5
  }

  return x * x * x
}

cube()

相反，使用預設引數可以用更少的程式碼實現相同的目標。 可以通過使用等式賦值運算子（=）為多維資料集中的引數設定預設值，如下所示：

function cube(x = 5) {
  return x * x * x
}

現在，在不帶引數的情況下呼叫多維資料集函式時，它將為x賦5並返回計算而不是NaN：

傳遞引數時，它仍將按預期執行，而忽略預設值：

cube(2)  // 8

需要注意的一個地方，預設引數值還將覆蓋作為函式的引數傳遞的undefined ，如下所示：

cube(undefined)  // 125

這裡是使用預設引數 5 來計算的，顯示的傳遞 undefined 會被忽略。

預設引數資料型別

任何原始值或物件都可以用作預設引數值。 首先，使用number,string,boolean,object，array和null 作為預設值來設定引數。

const defaultNumber = (number = 42) => console.log(number)
const defaultString = (string = 'Shark') => console.log(string)
const defaultBoolean = (boolean = true) => console.log(boolean)
const defaultObject = (object = { id: 7 }) => console.log(object)
const defaultArray = (array = [1, 2, 3]) => console.log(array)
const defaultNull = (nullValue = null) => console.log(nullValue)

在不帶引數的情況下呼叫這些函式時，它們都將使用預設值：

defaultNumber()  // 42
defaultString()  // "Shark"
defaultBoolean() // true
defaultObject()  // {id: 7}
defaultArray()   // (3) [1, 2, 3]
defaultNull()    // null

注意，在預設引數中建立的任何物件都將在每次呼叫函式時建立。預設引數的一個常見用例是使用這種行為從物件中獲取值。如果我們試圖從一個不存在的物件中解構或訪問一個值，它將丟擲一個錯誤。但是，如果預設引數是一個空物件，那麼它只會給出undefined 的值，而不會丟擲錯誤。

function settings(options = {}) {
  const { theme, debug } = options

  // Do something with settings
}

這樣避免因解構不存在的物件而導致的錯誤。

現在我們已經看到了預設引數如何與不同的資料型別一起工作，下面我們來看看多個預設引數如何協同工作。

http://www.ssnd.com.cn 化妝品OEM代加工

使用多個預設引數

首先，宣告一個帶有多個預設引數的sum()函式

function sum(a = 1, b = 2) {
  return a + b
}

sum() // 3

此外，引數中使用的值可以在任何後續的預設引數中使用，從左到右。例如，這個createUser函式建立了一個使用者物件userObj作為第三個引數，函式本身所做的就是返回userObj和前兩個引數

function createUser(name, rank, userObj = { name, rank }) {
  return userObj
}

// Create user
const user = createUser('前端web', '前端開發')

console.log(user) // {name: "前端web", rank: "前端開發"}

通常建議將所有預設引數放在引數列表的末尾，以便可以輕鬆保留可選值。 如果首先使用預設引數，則必須顯式傳遞undefined才能使用預設值。

function defaultFirst(a = 1, b) {
  return a + b
}

當呼叫這個函式時，必須呼叫帶有兩個引數的defaultFirst():

efaultFirst(undefined, 2)  // 3

實戰中的事例，下面是一個函式，它的作用是建立一個DOM元素，並新增一個文字標籤和類(如果存在的話)。

function createNewElement(tag, text, classNames = []) {
  const el = document.createElement(tag)
  el.textContent = text

  classNames.forEach((className) => {
    el.classList.add(className)
  })

  return el
}

const greeting = createNewElement('p', 'Hello!', ['greeting', 'active'])

此時 greeting 的值為

<p class="greeting active">Hello!</p>

如果將classNames陣列保留在函式呼叫之外，則該陣列仍將起作用。

const greeting2 = createNewElement('p', 'Hello!')

console.log(greeting2) // p>Hello!</p>

函式呼叫作為預設引數

除了原始型別和物件外，呼叫函式的結果可以用作預設引數。

在下面程式碼中，建立一個返回隨機數的函式，然後將結果用作多維資料集函式中的預設引數值：

function getRandomNumber() {
  return Math.floor(Math.random() * 10)
}


function cube(x = getRandomNumber()) {
  return x * x * x
}

現在每次呼叫 cube 結果可能都會不一樣：

cube()  // 512
cube()  // 64

在以下示例中，將一個隨機數分配給x，該隨機數用作我們建立函式中的引數。 然後，y引數將計算數字的立方根，並檢查x和y是否相等：

function doesXEqualY(x = getRandomNumber(), y = Math.cbrt(cube(x))) {
  return x === y
}

doesXEqualY() // true

預設引數甚至可以是函式定義，如本例所示，它將引數定義為內部函式並返回引數的函式呼叫:

function outer(
  parameter = function inner() {
    return 100
  }
) {
  return parameter()
}

// Invoke outer function
outer() // 100

總結

在本文中，我們瞭解了什麼是預設函式引數以及如何使用它們。現在，我們可以使用預設引數來幫助保持函式的整潔和易於閱讀。還可以預先將空物件和陣列分配給引數，以便在處理從物件中檢索值或遍歷陣列等情況時減少複雜性和程式碼行數。