ES6函數參數解構

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

這種寫法僅僅是使用了對象解構來進行了變量聲明和賦予變量默認值，函數參數是沒有默認值的，所以在不傳遞任何參數的情況下會報錯。