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经典实例:正则表达式,找到匹配的文本
import java.util.regex.Matcher; import java.util.regex.Pattern; /** * Created by Frank */ public cla ...
- GJM : Python简单爬虫入门 (一) [转载]
版权声明:本文原创发表于 [请点击连接前往] ,未经作者同意必须保留此段声明!如有侵权请联系我删帖处理! 为大家介绍一个简单的爬虫工具BeautifulSoup BeautifulSoup拥有强大的解 ...
- something
var colors=['red','green','yellow']; console.log(colors)//['red','green','yellow'] console.log(color ...
- Context.js 右键菜单
ContextJS is a lightweight solution for contextual menus. Currently, there are two versions. The fir ...
- jQuery静态方法type使用和源码分析
jQuery.type方法是检测数据类型的工具方法,在分析其用法之前先总结下js给我们提供了那些监测数据类型的方法: 一.typeof 操作符 下面是测试代码 var data=[],a='123', ...
- C#关于word文档的书签替换操作
public void Get_Word(string gjbh) { try { DataSet ds = OperaterBase.GetDsBySql("select diffTabl ...
- 对比MS Test与NUnit Test框架
前言: 项目中进行Unit Test时,肯定会用到框架,因为这样能够更快捷.方便的进行测试. .Net环境下的测试框架非常多,在这里只是对MS Test和NUnit Test进行一下比较, 因为这两个 ...
- SharePoint2013 此产品的试用期已结束
今天使用SharePoint 2013创建页面的时候,突然提示“此产品的试用期已结束 ”. 网上解决办法: “将IIS的‘应用程序池’下网站集对应的‘宿主应用程序’的‘应用程序池标识’改为‘域管理员或 ...
- Android EditText输入最大值提示功能
public class LengthFilter implements InputFilter { public LengthFilter(int max) { mMax = max; } @Ove ...
- Mac本“安全性与隐私”里没有“任何来源”选项
打开"偏号设置"----->"安全性与隐私"----->"通用",里面没有"任何来源",怎么解决? 如果需要 ...