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傳
• 參參數運算

使用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能讓我們用如此簡介的語法設置參數的缺省值。

與解構賦值默認值結合使用

這里有兩種寫法需要區分一下：

function m1({x=0,y=0} = {}){
  return [x,y];
}
function m2({x,y} = {x:0,y:0}){
  return [x,y];
}
m1({x:3});//[3,0]
m2({x:3});//[3,undefined]
m1({});//[0,0]
m2({});//[undefined,undefined]

參數默認值的位置

通常情況下，定義了默認值的參數應該是函數的尾參數。因為這樣比較容易看出，到底省略了哪些參數，如果非尾部的參數設置默認值，實際上這個參數是無法省略的。

如果有默認值的參數都不是尾參數，這時，無法只省略該參數而不省略其后的參數，除非顯示輸入undefined。如果傳入undefined，那么就會觸發默認值，但是null沒有這個效果。

函數的length屬性

如果函數指定了默認值后，函數的length屬性就不會包含有默認值的參數。這是因為length屬性的含義是，該函數預期傳入的參數個數，某個參數指定默認值之后，預期傳入的參數個數就不包括這個參數了，同理，rest參數也不會計入length屬性。

函數參數默認值的類型

（1）變量
如果函數參數的默認值是一個變量，則該變量所處的作用域和其他變量的作用域規則相同，即是先前函數的作用域，然后再是全局作用域。

（2）函數
如果函數A的參數默認值是函數B，那么由于函數的作用域是其聲明的時候所在的作用域，函數B的作用域就在全局作用域而不是函數A的作用域。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。