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'});
1
2
3
4
5
6
在函数内部通过对象属性的形式来获取值。

采用ES6解构的方式可以更加直观便捷地为函数传递对象参数。
先要明确对象解构的几点基本知识：

1.ES6的对象可以实现简写
const firstName = 'Stephen';
const lastName = 'Curry';
const person = {
  firstName,
  lastName,
}
console.log(person.firstName + ' ' + person.lastName); // Stephen Curry
1
2
3
4
5
6
7
这里的对象写法就等同于下面的写法：

const person = {
  firstName: firstName,
  lastName: lastName,
}
1
2
3
4
2.ES6的解构是用来给变量赋值的
const person = {
  firstName: 'Stephen',
  lastName: 'Curry',
};
const {firstName, lastName} = person;
console.log(firstName + ' ' + lastName);
1
2
3
4
5
6
结合 1 ，这里的 {firstName, lastName}实际上就是 {firstName: firstName, lastName: lastName},在这个对象里，显然冒号后面的属性值才是我们需要赋值的变量，解构会在右侧表达式对象中找到和左侧对象相同的属性名，以该属性值为对应变量赋值，如果没找到，那么该变量值为undefined。

有了上述的两点，我们可以将对象解构应用到为函数传递参数上
function sayName({ firstName, lastName }) {
  console.log( firstName + ' ' + lastName );// 注意这里可以直接访问到两个解构赋值的变量
}
let person = {
  firstName: 'Stephen',
  lastName: 'Curry'
}
sayName(person); // Stephen Curry
1
2
3
4
5
6
7
8
还可以给参数提供默认初始值：

function sayName({ firstName = 'foo', lastName = 'bar'}) {
  console.log( firstName + ' ' + lastName );
}
let person = {
  wrongFirstName: 'Stephen',
  lastName: 'Curry'
}
sayName(person); // foo Curry
--------------------- 
作者：RUCwang 
来源：CSDN 
原文：https://blog.csdn.net/RUCwang/article/details/83002819 
版权声明：本文为博主原创文章，转载请附上博文链接！