ES6函数默认参数(Default Parameters)
语言更新时每一个新增的特性都是从千百万开发者需求里提取过来的,规范采用后能减少程序员的痛苦,带来便捷。
我们经常会这么写
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: 少传了参数
ES6函数默认参数(Default Parameters)的更多相关文章
- 如何在ES5与ES6环境下处理函数默认参数
函数默认值是一个很提高鲁棒性的东西(就是让程序更健壮)MDN关于函数默认参数的描述:函数默认参数允许在没有值或undefined被传入时使用默认形参. ES5 使用逻辑或||来实现 众所周知,在ES5 ...
- JavaScript函数的默认参数(default parameter)
JavaScript函数的默认参数(default parameter) js函数参数的默认值都是undefined, ES5里,不支持直接在形参里写默认值.所以,要设置默认值,就要检测参数是否为un ...
- 【转】Python函数默认参数陷阱
[转]Python函数默认参数陷阱 阅读目录 可变对象与不可变对象 函数默认参数陷阱 默认参数原理 避免 修饰器方法 扩展 参考 请看如下一段程序: def extend_list(v, li=[]) ...
- Python面试题目之Python函数默认参数陷阱
请看如下一段程序: def extend_list(v, li=[]): li.append(v) return li list1 = extend_list(10) list2 = extend_l ...
- Python进阶-函数默认参数
Python进阶-函数默认参数 写在前面 如非特别说明,下文均基于Python3 一.默认参数 python为了简化函数的调用,提供了默认参数机制: def pow(x, n = 2): r = 1 ...
- C++函数重载遇到了函数默认参数情况
一.C++中的函数重载 什么是函数重载? 我的理解是: (1)用一个函数名定义不同的函数: (2)函数名和不同参数搭配时函数会有不同的含义: 举例说明: #include <stdio.h> ...
- ES6新特性(函数默认参数,箭头函数)
ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...
- C++函数默认参数(转)
在代码中使用到了函数的默认参数,在函数的定义和实现中都填写的默认参数,结果出现了错误: 代码: #ifndef FIRSTPAGE_H #define FIRSTPAGE_H #include < ...
- 【matlab】设定函数默认参数
C++/java/python系列的语言,函数可以有默认值,通常类似如下的形式: funtion_name (param1, param2=default_value, ...) 到了matlab下发 ...
随机推荐
- Java程序内存的简单分析
这篇文章将简单的说明下当我们运行Java程序时JVM(Java虚拟机)的内存分配情况. 首先我们先来感观的认识下几个名词: 1.栈,一般来说,基本数据类型直接在栈中分配空间,局部变量(在方法代码段中定 ...
- Android应用开发基础之十一:新特性
Fragment 用途:在一个Activity里切换界面,切换界面时只切换Fragment里面的内容 生命周期方法跟Activity一致,可以理解把其为就是一个Activity 定义布局文件作为Fra ...
- vsftp "上传 553 Could not create file"
我在LINUX下VSftp建立一个FTP服务器,但从WINDOWS使用FTP时,无法上传也无法下载!出错如下 ftp>; ls 200 PORT command successful. Cons ...
- 轻松掌握:JavaScript装饰者模式
装饰者模式 在传统的面向对象语言中,给对象添加功能常常使用继承的方式,但继承的方式会带来问题:当父类改变时,他的所有子类都将随之改变. 当JavaScript脚本运行时,在一个对象中(或他的原型上)增 ...
- 学习笔记:腾讯云——服务器mysql操作
1.进入数据库 (注意:在linux系统下要进入mysql所在的文件夹下才能打开数据库) 操作1:进入到指定目录下 命令行:cd /opt/lampp/bin 操作2:进入到数据库 命令行:./mys ...
- [javascript svg fill stroke stroke-width rx ry ellipse 属性讲解] svg fill stroke stroke-width ellipse 绘制椭圆属性讲解
<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...
- Sharepoint 文档库根据文件夹层级展示
类似于资源管理器,效果如下 步骤 打开Sharepoint Desinger,编辑Allitems.aspx页面 在PlaceHolderMain里面插入代码,黄色部分需要替换 <table s ...
- [转]MOSS通过此命令注册模板,web应用程序可以根据stp模块生成网站集
注:C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\bin stsadm –o add ...
- android加固系列—3.加固前先学会破解,静态修改so
[版权所有,转载请注明出处.出处:http://www.cnblogs.com/joey-hua/p/5138585.html] 项目jni的关键代码(项目地址见文章底部),获取当前程序的包名com. ...
- 如何自定义ViewGroup
依照惯例,先从一个例子说起. 很简单,3张扑克牌叠在一起显示.这个布局效果该如何实现呢?有的同学该说了,这很简单啊,用RelativeLayout或FrameLayout,然后为每一个扑克牌设置mar ...