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 相关文章推荐
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
vue router 组件的高级应用实例代码
Apr 08 Javascript
vue解决跨域问题(推荐)
Nov 10 Javascript
JavaScript中的几种继承方法示例
Dec 06 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数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
angular共享依赖的解决方案分享
2020/10/15 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
python修改字典内key对应值的方法
2015/07/11 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
jupyter notebook 重装教程
2020/04/16 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
房地产销售大学生自我评价分享
2013/11/11 职场文书
优秀村官事迹材料
2014/01/10 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
刑事和解协议书范本
2014/11/19 职场文书
产品调价通知函
2015/04/20 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
MySQL创建管理LIST分区
2022/04/13 MySQL