[[380694]]

本文已經(jīng)過原作者 Tania Rascia 授權(quán)翻譯

我是小智，今天，我們來講講默認(rèn)參數(shù)。

在 ES6 中，JS引入了默認(rèn)函數(shù)參數(shù)。如果未向函數(shù)調(diào)用提供實(shí)參，則允許開發(fā)人員用默認(rèn)值初始化函數(shù)。以這種方式初始化函數(shù)參數(shù)將使函數(shù)更容易閱讀，更不易出錯(cuò)，并為函數(shù)提供默認(rèn)行為。這也幫助我們避免由于傳入未定義的參數(shù)和解構(gòu)不存在的對(duì)象而產(chǎn)生的錯(cuò)誤。

在本文中，我們將學(xué)習(xí)一下形參和實(shí)參之間的區(qū)別，了解如何在函數(shù)中使用默認(rèn)形參，了解支持默認(rèn)形參的其他方法，并了解哪些類型的值和表達(dá)式可以用作默認(rèn)形參。

實(shí)參和形參

在解釋默認(rèn)函數(shù)參數(shù)之前，重要的是要知道參數(shù)的默認(rèn)值是什么。所以我們先回顧函數(shù)中實(shí)參和形參之間的區(qū)別。

在下面的代碼中，我們創(chuàng)建一個(gè)函數(shù)，該函數(shù)返回一個(gè)給定數(shù)的立方：

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

此示例中的x變量是一個(gè)參數(shù)-傳遞給函數(shù)的命名變量，參數(shù)必須始終包含在變量中。接著，我們來調(diào)用一下這個(gè)函數(shù)：

cube(10) // 1000 

在這種情況下，10是一個(gè)參數(shù)—調(diào)用時(shí)傳遞給函數(shù)的值。通常，值也可以用變量，如：

const number = 10 
 
cube(number) // 1000 

如果沒有將參數(shù)傳遞該函數(shù)，函數(shù)將隱式地使用undefined作為默認(rèn)值：

cube() // NaN 

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

這種自動(dòng)的行為有時(shí)會(huì)造成問題。在某些情況下，我們希望參數(shù)具有一個(gè)值，即使沒有向函數(shù)傳遞參數(shù)。這就是默認(rèn)參數(shù)特性派上用場(chǎng)的地方。

默認(rèn)參數(shù)語法

如果沒有默認(rèn)參數(shù)，我們就需要顯式檢查undefined的值才能設(shè)置默認(rèn)值，如以下示例所示：

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

相反，使用默認(rèn)參數(shù)可以用更少的代碼實(shí)現(xiàn)相同的目標(biāo)?？梢酝ㄟ^使用等式賦值運(yùn)算符(=)為多維數(shù)據(jù)集中的參數(shù)設(shè)置默認(rèn)值，如下所示：

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

現(xiàn)在，在不帶參數(shù)的情況下調(diào)用多維數(shù)據(jù)集函數(shù)時(shí)，它將為x賦5并返回計(jì)算而不是NaN：

傳遞參數(shù)時(shí)，它仍將按預(yù)期運(yùn)行，而忽略默認(rèn)值：

cube(2)  // 8 

需要注意的一個(gè)地方，默認(rèn)參數(shù)值還將覆蓋作為函數(shù)的參數(shù)傳遞的undefined ，如下所示：

cube(undefined)  // 125 

這里是使用默認(rèn)參數(shù) 5 來計(jì)算的，顯示的傳遞 undefined 會(huì)被忽略。

默認(rèn)參數(shù)數(shù)據(jù)類型任何原始值或?qū)ο蠖伎梢杂米髂J(rèn)參數(shù)值。首先，使用 number, string,boolean,object， array和null 作為默認(rèn)值來設(shè)置參數(shù)。

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) 

在不帶參數(shù)的情況下調(diào)用這些函數(shù)時(shí)，它們都將使用默認(rèn)值：

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

注意，在默認(rèn)參數(shù)中創(chuàng)建的任何對(duì)象都將在每次調(diào)用函數(shù)時(shí)創(chuàng)建。默認(rèn)參數(shù)的一個(gè)常見用例是使用這種行為從對(duì)象中獲取值。如果我們?cè)噲D從一個(gè)不存在的對(duì)象中解構(gòu)或訪問一個(gè)值，它將拋出一個(gè)錯(cuò)誤。但是，如果默認(rèn)參數(shù)是一個(gè)空對(duì)象，那么它只會(huì)給出undefined的值，而不會(huì)拋出錯(cuò)誤。

function settings(options = {}) { 
  const { theme, debug } = options 
 
  // Do something with settings 
} 

這樣避免因解構(gòu)不存在的對(duì)象而導(dǎo)致的錯(cuò)誤。

現(xiàn)在我們已經(jīng)看到了默認(rèn)參數(shù)如何與不同的數(shù)據(jù)類型一起工作，下面我們來看看多個(gè)默認(rèn)參數(shù)如何協(xié)同工作。

使用多個(gè)默認(rèn)參數(shù)

首先，聲明一個(gè)帶有多個(gè)默認(rèn)參數(shù)的sum()函數(shù)

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

此外，參數(shù)中使用的值可以在任何后續(xù)的默認(rèn)參數(shù)中使用，從左到右。例如，這個(gè)createUser函數(shù)創(chuàng)建了一個(gè)用戶對(duì)象userObj作為第三個(gè)參數(shù)，函數(shù)本身所做的就是返回userObj和前兩個(gè)參數(shù)

function createUser(name, rank, userObj = { name, rank }) { 
  return userObj 
} 
 
// Create user 
const user = createUser('前端小智', '前端開發(fā)') 
 
console.log(user) // {name: "前端小智", rank: "前端開發(fā)"} 

通常建議將所有默認(rèn)參數(shù)放在參數(shù)列表的末尾，以便可以輕松保留可選值。如果首先使用默認(rèn)參數(shù)，則必須顯式傳遞undefined才能使用默認(rèn)值。

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

當(dāng)調(diào)用這個(gè)函數(shù)時(shí)，必須調(diào)用帶有兩個(gè)參數(shù)的defaultFirst():

efaultFirst(undefined, 2)  // 3 

實(shí)戰(zhàn)中的事例，下面是一個(gè)函數(shù)，它的作用是創(chuàng)建一個(gè)DOM元素，并添加一個(gè)文本標(biāo)簽和類(如果存在的話)。

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']) 

此時(shí) greeting 的值為

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

如果將classNames數(shù)組保留在函數(shù)調(diào)用之外，則該數(shù)組仍將起作用。

const greeting2 = createNewElement('p', 'Hello!') 
 
console.log(greeting2) // p>Hello!</p> 

函數(shù)調(diào)用作為默認(rèn)參數(shù)除了原始類型和對(duì)象外，調(diào)用函數(shù)的結(jié)果可以用作默認(rèn)參數(shù)。

在下面代碼中，創(chuàng)建一個(gè)返回隨機(jī)數(shù)的函數(shù)，然后將結(jié)果用作多維數(shù)據(jù)集函數(shù)中的默認(rèn)參數(shù)值：

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

現(xiàn)在每次調(diào)用 cube 結(jié)果可能都會(huì)不一樣：

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

在以下示例中，將一個(gè)隨機(jī)數(shù)分配給x，該隨機(jī)數(shù)用作我們創(chuàng)建函數(shù)中的參數(shù)。然后，y參數(shù)將計(jì)算數(shù)字的立方根，并檢查x和y是否相等：

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

默認(rèn)參數(shù)甚至可以是函數(shù)定義，如本例所示，它將參數(shù)定義為內(nèi)部函數(shù)并返回參數(shù)的函數(shù)調(diào)用:

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

總結(jié)在本文中，我們了解了什么是默認(rèn)函數(shù)參數(shù)以及如何使用它們?，F(xiàn)在，我們可以使用默認(rèn)參數(shù)來幫助保持函數(shù)的整潔和易于閱讀。還可以預(yù)先將空對(duì)象和數(shù)組分配給參數(shù)，以便在處理從對(duì)象中檢索值或遍歷數(shù)組等情況時(shí)減少復(fù)雜性和代碼行數(shù)。

我是小智 ，我們下期見!

譯者：前端小智 作者：Tania Rascia 來源：flatlogic.com原文：https://www.taarascia.com/default-parameters-javascript/

本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。