ES6小技巧 - 使用解构赋值设置函数参数默认值

栏目: JavaScript · 发布时间: 7年前

内容简介:本文要说的并不是下面这种ES6的函数参数默认值:很多时候,我们在写一个构造函数时,可能需要传入很多参数,这时候就不可能使用函数参数一个一个的传入,而是传入一个对象当作参数。举个例子:一个函数,参数传入一个对象,对象里可以设置两个属性(a, b),a默认值为1,b默认值为2。

本文要说的并不是下面这种ES6的函数参数默认值:

function fn(a = 0, b = 1) {}
复制代码

很多时候,我们在写一个构造函数时,可能需要传入很多参数,这时候就不可能使用函数参数一个一个的传入,而是传入一个对象当作参数。

举个例子:一个函数,参数传入一个对象,对象里可以设置两个属性(a, b),a默认值为1,b默认值为2。

ES5

以前我们是这么设置函数参数默认值的:

function es5Fn (options) {
  options = options === undefined ? {} : options;
  var a = options.a === undefined ? 1 : options.a;
  var b = options.b === undefined ? 2 : options.b;
  console.log(a, b);
}
复制代码
  • 首先判断函数是否传入了一个对象,如果没有创建一个空对象。
  • 然后判断这个对象中是否含有a、b属性,没有将会设置为默认值。

ES6

function es6Fn ({a = 1, b = 2} = {}) {
  console.log(a, b);
}
复制代码

使用ES6解构赋值的方式设置默认值是不是简单了很多?

终于水完了这篇文章,如果有在开发H5(活动专题)页面的小伙伴看下我的脚手架~

X-BUILD是针对 H5 开发的一套自动化构建工具,致力于提升开发效率,减小开发难度。它可以让你在没有任何构建工具(例如 grunt 、 gulp 或 webpack 等工具)配置经验的情况下,帮你快速生成一个完整的前端工程,并可以打包代码和静态资源,使你的项目以最优异的性能上线。>>使用文档<<


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

运营有道:重新定义互联网运营

运营有道:重新定义互联网运营

李明轩 / 机械工业出版社 / 2017-7-31 / 69.00元

本书是前百度资深运营专家多年运营经验的总结,是作者运营千万级用户规模的大型互联网产品的实操经验复盘,是作者在“在行”上为近百位CEO和高管提供互联网运营咨询服务后对互联网运营需求的深入洞见。 本书的思想基础是“运营必须以用户为中心”,从产品、用户、市场3个维度对互联网运营重新进行了系统性的梳理:从道的层面解读并重新定义运营方法论,从术的层面围绕方法论提出行之有效的解决方法和实际案例。重点不在......一起来看看 《运营有道:重新定义互联网运营》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试