[[380694]]

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

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

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

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

實參和形參

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

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

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

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

cube(10) // 1000 

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

const number = 10 
 
cube(number) // 1000 

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

cube() // NaN 

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

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

默認參數(shù)語法

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

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

相反，使用默認參數(shù)可以用更少的代碼實現(xiàn)相同的目標。可以通過使用等式賦值運算符(=)為多維數(shù)據(jù)集中的參數(shù)設置默認值，如下所示：

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

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

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

cube(2)  // 8 

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

cube(undefined)  // 125 

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

默認參數(shù)數(shù)據(jù)類型任何原始值或對象都可以用作默認參數(shù)值。首先，使用 number, string,boolean,object， array和null 作為默認值來設置參數(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ù)的情況下調用這些函數(shù)時，它們都將使用默認值：

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

注意，在默認參數(shù)中創(chuàng)建的任何對象都將在每次調用函數(shù)時創(chuàng)建。默認參數(shù)的一個常見用例是使用這種行為從對象中獲取值。如果我們試圖從一個不存在的對象中解構或訪問一個值，它將拋出一個錯誤。但是，如果默認參數(shù)是一個空對象，那么它只會給出undefined的值，而不會拋出錯誤。

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

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

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

使用多個默認參數(shù)

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

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

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

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

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

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

當調用這個函數(shù)時，必須調用帶有兩個參數(shù)的defaultFirst():

efaultFirst(undefined, 2)  // 3 

實戰(zhàn)中的事例，下面是一個函數(shù)，它的作用是創(chuàng)建一個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數(shù)組保留在函數(shù)調用之外，則該數(shù)組仍將起作用。

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

函數(shù)調用作為默認參數(shù)除了原始類型和對象外，調用函數(shù)的結果可以用作默認參數(shù)。

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

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

現(xiàn)在每次調用 cube 結果可能都會不一樣：

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

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

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

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

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

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

我是小智 ，我們下期見!

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

本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯(lián)系大遷世界公眾號。