ES6函式引數解構

常規的JavaScript若要給函式傳遞的引數是一個物件，需要像下面這樣來實現：

function sayName(person) {
  if(Object.prototype.toString.call(person) == '[object Object]') {
    console.log( `${person.firstName} ${person.lastName}`);    
  }
}
sayName({firstName: 'Stephen', lastName: 'Curry'});

在函式內部通過物件屬性的形式來獲取值。

採用ES6解構的方式可以更加直觀便捷地為函式傳遞物件引數。

先要明確物件解構的幾點基本知識：

1.ES6的物件可以實現簡寫

這裡的物件寫法就等同於下面的寫法：

2.ES6的解構是用來給變數賦值的

const person = {
  firstName: 'Stephen',
  lastName: 'Curry',
};
const {firstName, lastName} = person;
console.log(firstName + ' ' + lastName);

2.1解構賦值可以有預設值

 const {firstName = 'foo', lastName = 'bar'} = {};
 console.log(firstName 
 
+ ' ' + lastName);

有了上述的兩點，我們可以將物件解構應用到為函式傳遞引數上

function sayName({ firstName, lastName } = {}) {
  console.log( firstName + ' ' + lastName );// 注意這裡可以直接訪問到兩個解構賦值的變數
}
let person = {
  firstName: 'Stephen',
  lastName: 'Curry'
}
sayName(person); // Stephen Curry

還可以給引數提供預設初始值：

// 右邊的{}是函式引數的預設值，左邊的{firstName = 'foo', lastName = 'bar'}是函式的引數，也是變數宣告的地方。
 
// 變數分別有預設值，當不傳遞任何引數給函式的時候，變數就會使用預設值。
function sayName({ firstName = 'foo', lastName = 'bar'} = {}) {
  console.log( firstName + ' ' + lastName );
}
let person = {
  wrongFirstName: 'Stephen',
  lastName: 'Curry'
}
sayName(person); // foo Curry

思考一下下面這兩種寫法：

// 這種寫法，當不傳遞任何引數的時候，變數都有預設值；
// 但是，當傳遞引數的時候，firstName可能就沒有值了
function sayName({ firstName, lastName = 'bar'} = {firstName: 'lebron'}) {
  console.log( firstName + ' ' + lastName );
}
sayName(); // lebron bar

看起來像是也達到了提供引數變數預設值的效果，但是原因是右邊的firstName會作為物件解構賦值給左邊的firstName，這並不是標準的函式引數的預設值;
下面的例子中，傳遞的引數person會直接取代右邊的{firstName: 'lebron'}，然後被當作真正的解構賦值物件,從而造成firstName沒有預設值。

錯誤寫法2

// 注意這裡變數雖然有預設值，但是函式引數是沒有預設值的
function sayName({ firstName = 'foo', lastName = 'bar'}) {
    console.log( firstName, lastName );
  }
sayName({}); // foo bar
sayName(); // error

這種寫法僅僅是使用了物件解構來進行了變數宣告和賦予變數預設值，函式引數是沒有預設值的，所以在不傳遞任何引數的情況下會報錯。