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

这种写法仅仅是使用了对象解构来进行了变量声明和赋予变量默认值，函数参数是没有默认值的，所以在不传递任何参数的情况下会报错。