深刻 JavaScript 中的默認參數！

譯者：前端小智
做者：Tania Rascia
來源：flatlogic.com

點贊再看，微信搜索 【大遷世界】,B站關注 【前端小智】這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

最近開源了一個 Vue 組件，還不夠完善，歡迎你們來一塊兒完善它，也但願你們能給個 star 支持一下，謝謝各位了。javascript

github 地址：https://github.com/qq44924588...前端

我是小智，今天，咱們來說講默認參數。vue

在 ES6 中，JS引入了默認函數參數。若是未向函數調用提供實參，則容許開發人員用默認值初始化函數。以這種方式初始化函數參數將使函數更容易閱讀，更不易出錯，併爲函數提供默認行爲。這也幫助咱們避免因爲傳入未定義的參數和解構不存在的對象而產生的錯誤。java

在本文中，咱們將學習一下形參和實參之間的區別，瞭解如何在函數中使用默認形參，瞭解支持默認形參的其餘方法，並瞭解哪些類型的值和表達式能夠用做默認形參。git

實參和形參

在解釋默認函數參數以前，重要的是要知道參數的默認值是什麼。因此咱們先回顧函數中實參和形參之間的區別。github

在下面的代碼中，咱們建立一個函數，該函數返回一個給定數的立方：數組

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

此示例中的x變量是一個參數-傳遞給函數的命名變量，參數必須始終包含在變量中。接着，咱們來調用一下這個函數：微信

cube(10) // 1000

在這種狀況下，10是一個參數—調用時傳遞給函數的值。一般，值也能夠用變量，如：dom

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
}

這樣避免因解構不存在的對象而致使的錯誤。

如今咱們已經看到了默認參數如何與不一樣的數據類型一塊兒工做，下面咱們來看看多個默認參數如何協同工做。

使用多個默認參數

首先，聲明一個帶有多個默認參數的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('前端小智', '前端開發')

console.log(user) // {name: "前端小智", 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

總結

在本文中，咱們瞭解了什麼是默認函數參數以及如何使用它們。如今，咱們可使用默認參數來幫助保持函數的整潔和易於閱讀。還能夠預先將空對象和數組分配給參數，以便在處理從對象中檢索值或遍歷數組等狀況時減小複雜性和代碼行數。

我是小智，咱們下期見！

編輯中可能存在的bug無法實時知道，過後爲了解決這些bug,花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://www.taniarascia.com/d...

交流

文章每週持續更新，能夠微信搜索 【大遷世界】 第一時間閱讀，回覆 【福利】 有多份前端視頻等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，歡迎Star。

本文同步分享在博客「前端小智」（SegmentFault）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。