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 相关文章推荐
Webkit的跨域安全问题说明
Sep 13 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
js中运算符&& 和 || 的使用记录
Aug 21 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 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函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
在Django的视图(View)外使用Session的方法
2015/07/23 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
房屋租赁协议书
2014/10/18 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
2014年电教工作总结
2014/12/19 职场文书
运动会100米广播稿
2015/08/19 职场文书
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js