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 相关文章推荐
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 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中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
php实现微信发红包功能
2018/07/13 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
python登录QQ邮箱发信的实现代码
2013/02/10 Python
python selenium 弹出框处理的实现
2019/02/26 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
汽车专业毕业生推荐信
2013/11/12 职场文书
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
公司新员工的演讲稿注意事项
2014/01/01 职场文书
校长寄语大全
2014/04/09 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
自我检讨报告
2015/01/28 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
女性健康讲座主持词
2015/07/04 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书