网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

ES6函数参数解构

ES6函数参数解构

常规的JavaScript若要给函数传递的参数是一个对象,需要像下面这样来实现:

成都创新互联从2013年开始,先为岳阳县等服务建站,岳阳县等地企业,进行企业商务咨询服务。为岳阳县企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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的对象可以实现简写

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

这里的对象写法就等同于下面的写法:

const person = {
  firstName: firstName,
  lastName: lastName,
}

2.ES6的解构是用来给变量赋值的

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

结合 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

还可以给参数提供默认初始值:


function sayName({ firstName = 'foo', lastName = 'bar'} = {}) {
  console.log( firstName + ' ' + lastName );
}
let person = {
  wrongFirstName: 'Stephen',
  lastName: 'Curry'
}
sayName(person); // foo Curry

思考一下下面这种写法:

function sayName({ firstName, lastName = 'bar'} = {firstName: 'lebron'}) {
  console.log( firstName + ' ' + lastName );
}
sayName(); // lebron bar

看起来像是也达到了提供参数默认值的效果,但是原因是右边的firstName会作为对象解构赋值给左边的firstName,这并不是函数参数的默认值;
下面的例子中,传递的参数person会直接取代右边的{firstName: 'lebron'},然后被当作真正的解构赋值对象。


function sayName({ firstName, lastName = 'bar' } = {firstName: 'lebron'}) {
  console.log( firstName + ' ' + lastName );
}
let person = {
  wrongFirstName: 'Stephen',
  lastName: 'Curry'
}
sayName(person); // undefined Curry

网页标题:ES6函数参数解构
标题路径:http://bjjierui.cn/article/ghpgpo.html

其他资讯