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: 少传了参数