深入 JavaScript 中的默認參數！
本文已經過原作者 Tania Rascia 授權翻譯
我是小智，今天，我們來講講默認參數。
在 ES6 中，JS引入了默認函數參數。如果未向函數調用提供實參，則允許開發人員用默認值初始化函數。以這種方式初始化函數參數將使函數更容易閱讀，更不易出錯，并為函數提供默認行為。這也幫助我們避免由于傳入未定義的參數和解構不存在的對象而產生的錯誤。
在本文中，我們將學習一下形參和實參之間的區別，了解如何在函數中使用默認形參，了解支持默認形參的其他方法，并了解哪些類型的值和表達式可以用作默認形參。
實參和形參
在解釋默認函數參數之前，重要的是要知道參數的默認值是什么。所以我們先回顧函數中實參和形參之間的區別。
在下面的代碼中，我們創建一個函數，該函數返回一個給定數的立方：
- 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
- }
這樣避免因解構不存在的對象而導致的錯誤。
現在我們已經看到了默認參數如何與不同的數據類型一起工作，下面我們來看看多個默認參數如何協同工作。
使用多個默認參數
首先，聲明一個帶有多個默認參數的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
總結在本文中，我們了解了什么是默認函數參數以及如何使用它們?，F在，我們可以使用默認參數來幫助保持函數的整潔和易于閱讀。還可以預先將空對象和數組分配給參數，以便在處理從對象中檢索值或遍歷數組等情況時減少復雜性和代碼行數。
我是小智 ，我們下期見!
譯者：前端小智 作者：Tania Rascia 來源：flatlogic.com原文：https://www.taarascia.com/default-parameters-javascript/
本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。
