es6函数默认参数与手动设置默认参数的区别

函数默认参数

之前我们不能直接为函数指定默认参数，因此很多时候为了保证传入的参数具备一个默认值，我们常常使用如下的方法：

function add(x, y) {
    var x = x || 20;
    var y = y || 30;
    return x + y;
}

console.log(add()); // 50

这种方式并不是没有缺点，比如当我传入一个x值为false（或运算符判断为假的时候），这个时候任然会取到默认值，就不是我们的本意了。

来看看ES6的默认值写法：

function add(x = 20, y = 30) {
    return x + y;
}

console.log(add());

Babel代码转化： 

"use strict";

function add() {
    var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 20;
    var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 30;

    return x + y;
}

console.log(add());

 在实际开发中给参数添加适当的默认值，可以让我们对函数的参数类型有一个直观的认知。

const ButtonGroupProps = {
    size: 'normal',
    className: 'xxxx-button-group',
    borderColor: '#333'
}

export default function ButtonGroup(props = ButtonGroupProps) {
    ... ...
}

 

* 函数的length属性
	* 指定了参数默认值以后，length将返回没有指定默认值的参数个数。
	* 指定了默认值后，length属性将失真，（我觉得这是相对说的，因为这时候length表示的必传参数。）
	* length属性的含义是，该函数预期传入的参数个数。某个参数指定默认值后，预期传入的
	* 就不包含这个了，说白了就是必传参数。
	* 同理，rest参数也不计入length属性
	console.log((function(a){}).length); //1
	console.log((function(a=5){}).length); //0
	console.log((function(...args){}).length); //0

参数默认值是一个变量，这个变量的作用域也先是当前函数的作用域，然后才是全局作用域。

//es6

console.log((function(a=5){}).length)


//es5
"use strict";

console.log(function () {
  var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 5;
}.length);

默认参数详细讲解！！！

https://github.com/chanceLe/ES6-Basic-Syntax/blob/master/%5Bes6%5D-07-%E5%87%BD%E6%95%B0%E6%89%A9%E5%B1%95.html