ECMAScript6函数默认参数


Posted in Javascript onJune 12, 2015

语言更新时每一个新增的特性都是从千百万开发者需求里提取过来的,规范采用后能减少程序员的痛苦,带来便捷。

我们经常会这么写

function calc(x, y) {
  x = x || 0;
  y = y || 0;
  // to do with x, y
  // return x/y
}

简单说就是x,y提供了一个默认值为0,不传时x, y以值0来运算。传了就以实际值计算。

又如定义一个ajax

function ajax(url, async, dataType) {
  async = async !== false
  dataType = dataType || 'JSON'
  // ...
}

自己用原生JS封装的一个简易ajax函数,url必填,async和dataType可选,即不填时默认同步请求和返回JSON格式数据。

再如定义一个矩形类

function Rectangle(width, height) {
  this.width = width || 200;
  this.height = height || 300;
}

new时不传任何参数,也会创建一个默认宽高为200*300的矩形。

无论是calc,ajax函数还是Rectangle类,我们都需要在函数体内做默认值的处理,如果语言自身处理岂不乐哉? ES6提供了该特性(Default Parameters),以下是用ES6新特性重写的calc,ajax,Rectangle。

function calc(x=0, y=0) {
  // ...
  console.log(x, y)
}
calc(); // 0 0
calc(1, 4); // 1 4
 
function ajax(url, async=true, dataType="JSON") {
  // ...
  console.log(url, async, dataType)
}
ajax('../user.action'); // ../user.action true JSON
ajax('../user.action', false); // ../user.action false JSON
ajax('../user.action', false, 'XML'); // ../user.action false XML
 
function Rectangle(width=200, height=300) {
  this.width = width;
  this.height = height;
}
var r1 = new Rectangle(); // 200*300的矩形
var r2 = new Rectangle(100); // 100*300的矩形
var r3 = new Rectangle(100, 500); // 100*500矩形

可以看到,ES6把默认值部分从大括号移到了小括号里,还减少了“||”运算,函数体从此瘦身了。参数默认值嘛,本来就应该在定义参数的地方,这样看起来简洁了不少。O(∩_∩)O

默认参数可以定义在任意位置,比如在中间定义一个

function ajax(url, async=true, success) {
  // ...
  console.log(url, async, success)
}

定义了一个默认参数async,url和success是必传的,这时需要把中间的参数置为undefined

ajax('../user.action', undefined, function() {
   
})

注意,不要想当然的把undefined改为null,  即使 null == undefined, 传null后,函数体内的async就是null不是true了。

以下几点需要注意:

1. 定义了默认参数后,函数的length属性会减少,即有几个默认参数不包含在length的计算当中

function calc(x=0, y=0) {
  // ...
  console.log(x, y)
}
function ajax(url, async=true, dataType="JSON") {
  // ...
  console.log(url, async, dataType)
}
console.log(calc.length); // 0
console.log(ajax.length); // 1

2. 不能用let和const再次声明默认值,var可以

function ajax(url="../user.action", async=true, success) {
  var url = ''; // 允许
  let async = 3; // 报错
  const success = function(){}; // 报错
}

另外比较有趣的是:默认参数可以不是一个值类型,它可以是一个函数调用

function getCallback() {
  return function() {
    // return code
  }
}
 
function ajax(url, async, success=getCallback()) {
  // ...
  console.log(url, async, success)
}

可以看到这里参数success是一个函数调用,调用ajax时如果没有传第三个参数,则会执行getCallback函数,该函数返回一个新函数赋值给success。这是一个很强大的功能,给程序员以很大的想象发挥空间。

例如,利用这个特性可以强制指定某参数必须传,不传就报错

function throwIf() {
  throw new Error('少传了参数');
}
 
function ajax(url=throwIf(), async=true, success) {
  return url;
}
ajax(); // Error: 少传了参数

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
图片自动缩小 点击放大
Jul 07 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 #Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 #Javascript
JS中产生标识符方式的演变
Jun 12 #Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 #Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 #Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 #Javascript
禁止按回车键提交表单的方法
Jun 11 #Javascript
You might like
PHP 判断变量类型实现代码
2009/10/23 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
python网页请求urllib2模块简单封装代码
2014/02/07 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
大四学年自我鉴定
2013/11/13 职场文书
商场活动策划方案
2014/01/24 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
师德师风建设方案
2014/05/08 职场文书
新党章心得体会
2014/09/04 职场文书
医学检验专业自荐信
2014/09/18 职场文书
高三英语复习计划
2015/01/19 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android