【ES6基礎】預設引數值

前端達人發表於2019-02-17
【ES6基礎】預設引數值

如果呼叫函式的過程中，定義的引數缺失，此引數變數的值則會是undefined。怎麼給缺失的引數賦值預設值，在ES6之前，沒有簡潔的語法設定缺失引數的預設值，但是我們一般可以這麼編寫程式碼解決缺失引數預設值：

function myFunction(x, y, z) {
 x = x === undefined ? 1 : x;
 y = y === undefined ? 2 : y;
 z = z === undefined ? 3 : z;
 console.log(x, y, z); //Output "6 7 3"
 }
 myFunction(6, 7);複製程式碼

這種寫法是不是比較麻煩？預設值的設定是不是不夠直觀？

在ES6中，我們可以用更簡潔的語法進行實現，通過本篇文章你將學習到以下內容：

  • 使用ES6語法宣告引數預設值
  • 使用undefined傳參
  • 引數運算

本篇文章閱讀時間大約5分鐘

使用ES6語法宣告引數預設值

我們可以使用ES6簡潔的語法，如下示例進行宣告函式引數的預設值：

function myFunction(x = 1, y = 2, z = 3) {
 console.log(x, y, z); 
}
myFunction(6,7); // Outputs 6 7 3複製程式碼

在上述程式碼示例中，我們在呼叫此函式中傳遞了前兩個引數，因此引數的預設值(即x=1和y=2)將會被覆蓋(即x=6和y=7)。由於第三個引數預設，因此z使用預設值，將會是3。

使用undefined傳參

如果我們想讓具體某個引數使用預設值，我們可以使用undefined進行賦值，如下段程式碼所示：

function myFunction(x = 1, y = 2, z = 3) {
   console.log(x, y, z); // Outputs "1 7 9"
 }
 myFunction(undefined,7,9);複製程式碼

是不是很簡單，只需要使用undefined，我們就可以指定具體某個引數使用預設值。

引數運算

在ES6中我們不僅可以給引數預設賦值具體的數值，同時引數賦值支援引數的邏輯運算進行賦值，如下段程式碼所示：

function myFunction(x = 1, y = 2, z = x + y) {
   console.log(x, y, z); // Output "6 7 13"
 }
 myFunction(6,7);複製程式碼

在上述程式碼中，我們只傳入了前兩個引數，第三個引數預設，第三個引數的值預設值是則會是前兩個引數之和。

小節

今天的內容就到這裡，當我們在開發一些工程應用通用元件時，都需要暴露一些介面以供使用。而這些介面的友好性是決定這個元件質量的一大指標，其中引數預設值（預設值）的完善程度同時也影響介面的友好性，感謝ES6能讓我們用如此簡介的語法設定引數的預設值。

E6相關文章

【ES6基礎】let和作用域

【ES6基礎】const介紹

更多精彩內容，請微信關注”前端達人”公眾號！

【ES6基礎】預設引數值

相關文章