【ES6 教程】第一章 新的ES6語法04—如何設(shè)置函數(shù)參數(shù)的默認(rèn)值
英文 | https://www.javascripttutorial.net
翻譯 | 楊小愛
TL;DR
function say(message='Hi') {console.log(message);}say(); // 'Hi'say('Hello') // 'Hello'
say() 函數(shù)中消息參數(shù)的默認(rèn)值為'Hi'。
在 JavaScript 中，默認(rèn)函數(shù)參數(shù)允許我們在沒有值或undefined傳遞給函數(shù)的情況下，使用默認(rèn)值初始化命名參數(shù)。
Arguments vs. Parameters
有時，我們可以互換使用術(shù)語Arguments和Parameters。但是，根據(jù)定義，Parameters是我們在函數(shù)聲明中指定的內(nèi)容，而Arguments是我們傳遞給函數(shù)的內(nèi)容。
考慮以下 add() 函數(shù)：
function add(x, y) {return x + y;}add(100,200);
在本例中，x 和 y 是 add() 函數(shù)的參數(shù)，傳遞給 add() 函數(shù)的值 100 和 200 是參數(shù)。
為函數(shù)設(shè)置 JavaScript 默認(rèn)參數(shù)
在 JavaScript 中，參數(shù)的默認(rèn)值為 undefined。這意味著如果我們不將參數(shù)傳遞給函數(shù)，它的參數(shù)將具有 undefined 的默認(rèn)值。
請參見以下示例：
function say(message) {console.log(message);}say(); // undefined
say() 函數(shù)接受 message 參數(shù)。因?yàn)槲覀儧]有將任何參數(shù)傳遞給 say() 函數(shù)，所以 message 參數(shù)的值是undefined。
假設(shè)我們想給 message 參數(shù)一個默認(rèn)值 10。
實(shí)現(xiàn)此目的的典型方法是測試參數(shù)值并在undefined時，使用三元運(yùn)算符分配默認(rèn)值：
function say(message) {message = typeof message !== 'undefined' ? message : 'Hi';console.log(message);}say(); // 'Hi'
在這個例子中，我們沒有將任何值傳遞給 say() 函數(shù)。因此，消息參數(shù)的默認(rèn)值是undefined。在函數(shù)內(nèi)部，我們?yōu)?span style="font-size: 16px;text-align: left;">message變量重新分配了 Hi 字符串。
ES6 為我們提供了一種更簡單的方法來設(shè)置函數(shù)參數(shù)的默認(rèn)值，如下所示：
function fn(param1=default1, param2=default2,..) {}
在上面的語法中，我們使用賦值運(yùn)算符 (=) 和參數(shù)名稱后的默認(rèn)值來設(shè)置該參數(shù)的默認(rèn)值。例如：
function say(message='Hi') {console.log(message);}say(); // 'Hi'say(undefined); // 'Hi'say('Hello'); // 'Hello'
程序怎么運(yùn)作
在第一個函數(shù)調(diào)用中，我們沒有將任何參數(shù)傳遞給 say() 函數(shù)，因此，message參數(shù)采用默認(rèn)值“Hi”。
在第二個函數(shù)調(diào)用中，我們將 undefined 傳遞給 say() 函數(shù)，因此 message 參數(shù)也采用了默認(rèn)值“Hi”。
在第三個函數(shù)調(diào)用中，我們將 'Hello' 字符串傳遞給 say() 函數(shù)，因此 message 參數(shù)將字符串 'Hello' 作為默認(rèn)值。
更多 JavaScript 默認(rèn)參數(shù)示例
讓我們看一些更多的例子來了解一些用于設(shè)置函數(shù)參數(shù)默認(rèn)值的可用選項(xiàng)。
1) 傳遞未定義的參數(shù)
以下 createDiv() 函數(shù)在文檔中創(chuàng)建一個具有特定高度、寬度和邊框樣式的新 <div> 元素：
function createDiv(height = '100px', width = '100px', border = 'solid 1px red') {let div = document.createElement('div');div.style.height = height;div.style.width = width;div.style.border = border;document.body.appendChild(div);return div;}
以下不向函數(shù)傳遞任何參數(shù)，因此 createDiv() 函數(shù)使用參數(shù)的默認(rèn)值。
createDiv();
假設(shè)我們要使用默認(rèn)值作為高度和寬度參數(shù)以及特定的邊框樣式。在這種情況下，我們需要將undefined值傳遞給前兩個參數(shù)，如下所示：
createDiv(undefined,undefined,'solid 5px blue');
2) 評估默認(rèn)參數(shù)
JavaScript 引擎會在我們調(diào)用函數(shù)時評估默認(rèn)參數(shù)。請參見以下示例：
function put(toy, toyBox = []) {toyBox.push(toy);return toyBox;}console.log(put('Toy Car'));// -> ['Toy Car']console.log(put('Teddy Bear'));// -> ['Teddy Bear'], not ['Toy Car','Teddy Bear']
該參數(shù)可以采用函數(shù)結(jié)果的默認(rèn)值。
考慮以下示例：
function date(d = today()) {console.log(d);}function today() {return (new Date()).toLocaleDateString("en-US");}date();
date() 函數(shù)采用一個參數(shù)，其默認(rèn)值是 today() 函數(shù)的返回值。today() 函數(shù)以指定的字符串格式返回今天的日期。
當(dāng)我們聲明 date() 函數(shù)時，today() 函數(shù)在我們調(diào)用 date() 函數(shù)之前尚未計(jì)算。
我們可以使用這個特性來使參數(shù)成為強(qiáng)制性的。如果調(diào)用者沒有傳遞任何參數(shù)，我們會拋出如下錯誤：
function requiredArg() {throw new Error('The argument is required');}function add(x = requiredArg(), y = requiredArg()){return x + y;}add(10); // erroradd(10,20); // OK
3) 在默認(rèn)值中使用其他參數(shù)
我們可以為參數(shù)分配一個引用其他默認(rèn)參數(shù)的默認(rèn)值，如以下示例所示：
function add(x = 1, y = x, z = x + y) {return x + y + z;}console.log(add()); // 4
在 add() 函數(shù)中：
y 的默認(rèn)值設(shè)置為 x 參數(shù)。
z 的默認(rèn)值是 x 和 y 的和
add() 函數(shù)返回 x、y 和 z 的總和。
參數(shù)列表似乎有自己的范圍。如果引用尚未初始化的參數(shù)，則會報(bào)錯。例如：
function subtract( x = y, y = 1 ) {return x - y;}subtract(10);
錯誤信息：
Uncaught ReferenceError: Cannot access 'y' before initialization
使用函數(shù)
我們可以使用函數(shù)的返回值作為參數(shù)的默認(rèn)值。例如：
let taxRate = () => 0.1;let getPrice = function( price, tax = price * taxRate() ) {return price + tax;}let fullPrice = getPrice(100);console.log(fullPrice); // 110
在 getPrice() 函數(shù)中，我們調(diào)用了 taxRate() 函數(shù)來獲取稅率，并使用這個稅率從價格中計(jì)算出稅額。
參數(shù)對象
函數(shù)內(nèi)部參數(shù)對象的值arguments是我們傳遞給函數(shù)的實(shí)際參數(shù)的數(shù)量。例如：
function add(x, y = 1, z = 2) {console.log( arguments.length );return x + y + z;}add(10); // 1add(10, 20); // 2add(10, 20, 30); // 3
現(xiàn)在，我們應(yīng)該了解了 JavaScript 默認(rèn)函數(shù)參數(shù)以及如何有效地使用它們了。
總結(jié)
以上就是本節(jié)的全部內(nèi)容，通過這節(jié)的學(xué)習(xí)，我們知道了如何設(shè)置函數(shù)參數(shù)的默認(rèn)值，如果還有不了解的朋友，請?jiān)僬J(rèn)真閱讀一遍。
推薦閱讀
【ES6 教程】第一章 新的ES6語法01—let：使用let關(guān)鍵字聲明塊范圍的變量
【ES6 教程】第一章 新的ES6語法02—var 和 let 的區(qū)別
學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號
