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 相关文章推荐
javascript EXCEL 操作类代码
Jul 30 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 Javascript
Bootstrap table使用方法总结
May 10 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
JavaScript实现HSL拾色器
May 21 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
PHP生成UTF8文件的方法
2010/05/15 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
js表单登陆验证示例
2016/10/19 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
django框架如何集成celery进行开发
2017/05/24 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
python日志logging模块使用方法分析
2019/05/23 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
简单说说tomcat的配置
2013/05/28 面试题
师范大学应届生求职信
2013/11/21 职场文书
大学学生个人总结
2015/02/15 职场文书